获取视频帧作为图像答案

【问题标题】：Get Video Frame As An Image获取视频帧作为图像
【发布时间】：2019-04-07 08:11:40
【问题描述】：

我正在尝试从视频中获取视频帧作为图像。我“http://techslides.com/demos/sample-videos/small.mp4”并且我的应用程序在 localhost:3000 上运行。下面是我从视频中获取图像的代码

<!DOCTYPE html>
<html>
<body>

<video width="400" controls>
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

<p>These are the frames' images generated by getVideoImage():</p>
<ol id="olFrames"></ol>

<script type="text/JavaScript">
    function getVideoImage(path, secs, callback) {
        var me = this, video = document.createElement('video');
        video.onloadedmetadata = function() {
            if ('function' === typeof secs) {
                secs = secs(this.duration);
            }
            this.currentTime = Math.min(Math.max(0, (secs < 0 ? this.duration : 0) + secs), this.duration);
        };
        video.onseeked = function(e) {
            var canvas = document.createElement('canvas');
            canvas.height = video.videoHeight;
            canvas.width = video.videoWidth;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            var img = new Image();
            img.src = canvas.toDataURL();
            callback.call(me, img, this.currentTime, e);
        };
        video.onerror = function(e) {
            callback.call(me, undefined, undefined, e);
        };
        video.src = path;
    }
    function showImageAt(secs) {
        var duration;
        getVideoImage(
            "http://techslides.com/demos/sample-videos/small.mp4",
            function(totalTime) {
                duration = totalTime;
                return secs;
            },
            function(img, secs, event) {
                if (event.type == 'seeked') {
                    var li = document.createElement('li');
                    li.innerHTML += '<b>Frame at second ' + secs + ':</b><br />';
                    li.appendChild(img);
                    document.getElementById('olFrames').appendChild(li);
                    if (duration >= ++secs) {
                        showImageAt(secs);
                    };
                }
            }
        );
    }
    showImageAt(0);
</script>


</body>
</html>
view raw

我收到一个错误提示

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

这意味着我的视频源和网页不在同一个域中。我怎样才能让它发挥作用？

附：你可以把我的代码粘贴到https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video

【问题讨论】：

通常我使用 Apache 作为代理来解决所有 CORS 问题。
怎么做？
看看这个 -> mod_proxy
请通过接受的答案，这是从视频stackoverflow.com/questions/32262562/…中提取图像的一种更简单的方法@
popcorn.js 在其代码中也使用了 canvas.toDataUrl。它会给出同样的问题。看看他们的 git 代码

标签： javascript canvas html5-canvas html5-video

【解决方案1】：

视频是问题。

将其粘贴到您询问的页面上 (https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video) 即可使用

<!DOCTYPE html>
<html>
<body>

<video width="400" controls>
    <source src="mov_bbb.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

<p>These are the frames' images generated by getVideoImage():</p>
<ol id="olFrames"></ol>

<script type="text/JavaScript">
    function getVideoImage(path, secs, callback) {
        var me = this, video = document.createElement('video');
        video.onloadedmetadata = function() {
            if ('function' === typeof secs) {
                secs = secs(this.duration);
            }
            this.currentTime = Math.min(Math.max(0, (secs < 0 ? this.duration : 0) + secs), this.duration);
        };
        video.onseeked = function(e) {
            var canvas = document.createElement('canvas');
            canvas.height = video.videoHeight;
            canvas.width = video.videoWidth;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            var img = new Image();
            img.src = canvas.toDataURL();
            callback.call(me, img, this.currentTime, e);
        };
        video.onerror = function(e) {
            callback.call(me, undefined, undefined, e);
        };
        video.src = path;
    }
    function showImageAt(secs) {
        var duration;
        getVideoImage(
            "mov_bbb.mp4",
            function(totalTime) {
                duration = totalTime;
                return secs;
            },
            function(img, secs, event) {
                if (event.type == 'seeked') {
                    var li = document.createElement('li');
                    li.innerHTML += '<b>Frame at second ' + secs + ':</b><br />';
                    li.appendChild(img);
                    document.getElementById('olFrames').appendChild(li);
                    if (duration >= ++secs) {
                        showImageAt(secs);
                    };
                }
            }
        );
    }
    showImageAt(0);
</script>


</body>
</html>
view raw

【讨论】：