Skip to content

Instantly share code, notes, and snippets.

@mariotacke

mariotacke/medium.js

Created June 30, 2019 03:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mariotacke/deadf22ce0dda920f8a7cbd8e93bbf16 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mariotacke/deadf22ce0dda920f8a7cbd8e93bbf16 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mariotacke created this gist Jun 30, 2019.
    23 changes: 23 additions & 0 deletions medium.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    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);
    };