javascript - 如何生成基于 HTML DOM + 视频的图像？

Question

我正在网络上制作一个“instagram 过滤器”应用程序，并且我正在使用这个 HTML + JS 结构将相机加载到视频元素上：

<div id="camera" class="camera" style="width: 100%; overflow: hidden; position: relative">
    <video style="object-fit: cover"></video>
        <div class="chuva-canvas">
            <div id="c1" class="item"></div>
            <div id="c2" class="item"></div>
            <div id="c3" class="item"></div>
        </div>
    <canvas id="canvas"></canvas>
    <img id="img_val" src="" alt="">
</div>

startCamera() {
        var constraints = {
            audio: false,
            video: {
                facingMode: {
                    exact: 'environment'
                }
            }
        };

        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

        navigator.getUserMedia(
            // constraints
            constraints,

            // success callback
            function (mediaStream) {
                let video = document.getElementsByTagName('video')[0];
                try {
                    video.srcObject = mediaStream;
                } catch (error) {
                    video.src = window.URL.createObjectURL(mediaStream);
                }
                video.play();
                this.startActions();
            },
            //handle error
            function (error) {
                alert('Não conseguimos encontrar uma câmera disponível.');
            });
    }

图像看起来不错，在我的“chuva-canvas”div 上，过滤器已经加载并且工作正常。

我需要的是，当用户按下下载时，他会得到一个包含所有这些的 JPG/PNG。

我已经尝试使用 html2canvas，但是视频没有在此渲染，我只有空的背景 + 过滤器。

我正在使用 download.js 下载图像并且工作正常，但我可以使用视频 + 过滤器生成 base64。

你知道有什么办法吗？

标签： javascriptcameranavigator