Javascript 使用img滤波器覆盖录制视频流

我正在使用人脸跟踪库（）捕获视频流，并将图像放在人脸上方

图像是在画布上绘制的，画布与视频具有相同的宽度和高度，因此覆盖

我试图拍摄流+画布图像的图片和视频，但是O只能获得流和图像的粗略实现，这是扭曲的

有什么想法吗？我更喜欢使用媒体录制器API，并尝试过它，但再次无法获得带有图像过滤器覆盖的流或图片

谢谢，请不要生气：）

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const tracker = new tracking.ObjectTracker('face');
const flowerCrownButton = document.getElementById('flower-crown');

tracker.setInitialScale(1);
tracker.setStepSize(2.7);
tracker.setEdgesDensity(.2);

const img = document.createElement("img");
img.setAttribute("id", "pic");
img.src = canvas.toDataURL();

let filterX = 0;
let filterY = 0;
let filterWidth = 0;
let filterHeight = 0;

function changePic(x, y, width, height, src) {
  img.src = src;
  filterX = x;
  filterY = y;
  filterWidth = width;
  filterHeight = height;
}

function flowerCrown() {
  changePic(0, -0.5, 1, 1, 'https://s3-us-west- 
    2. amazonaws.com / s.cdpn.io / 450347 / flower - crown.png ')
  }

  flowerCrownButton.addEventListener('click', flowerCrown);

  //listen for track events
  tracker.on('track', function(event) {
    //if (event.data.length === 0) {
    //alert("No objects were detected in this frame.");
    //} else {
    context.clearRect(0, 0, canvas.width, canvas.height)
    event.data.forEach(rect => {
      context.drawImage(img, rect.x + (filterX * rect.width),
        rect.y + (filterY * rect.height),
        rect.width * filterWidth,
        rect.height * filterHeight
      )
    })
    //}// end of else
  });

  //start tracking
  tracking.track('#video', tracker, {
    camera: true
  })

  const canvas2 = document.getElementById('canvas2');
  const context2 = canvas2.getContext('2d');
  const video = document.getElementById("video");

  video.addEventListener("loadedmetadata", function() {
    ratio = video.videoWidth / video.videoHeight;
    w = video.videoWidth - 100;
    h = parseInt(w / ratio, 10);
    canvas2.width = w;
    canvas2.height = h;
  }, false);

  function snap() {
    context2.drawImage(video, 10, 5);
    context2.drawImage(img, 10, 10)
  }
}