Запись видеопотока с наложением фильтра img

Question

Я использую библиотеку отслеживания лица ( https://trackingjs.com/) для захвата видеопотока и размещения изображения поверх лица.

Изображение рисуется на холсте, который имеет ту же ширину и высоту, что и видео, поэтому наложение.

Я пытаюсь сделать снимок и видео из потока + холста, но О может получить только грубую реализацию искаженного потока и изображения.

Вот кодекс

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)
  }
}

Есть идеи? Я предпочитаю использовать API медиа-рекордера и пробовал его, но опять же не смог получить поток или изображение с наложением фильтра изображений.

Спасибо и, пожалуйста, не будьте скупыми:)