medium.js

const video = document.querySelector('#camera-stream');
const hiddenCanvas = document.querySelector('#hidden-canvas');
const outputCanvas = document.querySelector('#output-canvas');
const hiddenContext = hiddenCanvas.getContext('2d');
const outputContext = outputCanvas.getContext('2d');

const processFrame = () => {
  const { videoWidth: width, videoHeight: height } = video;

  if (width && height) {
    hiddenCanvas.width = width;
    hiddenCanvas.height = height;
    outputCanvas.width = width;
    outputCanvas.height = height;
    hiddenContext.drawImage(video, 0, 0, width, height);

    // get frame from hiddenContext
    // apply filter
    // draw outputContext
  }

  window.requestAnimationFrame(processFrame);
};