Question

我正在尝试从视频中获取视频帧作为图像。我“ 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.

这意味着我的视频源和网页不在同一个域中。我该如何运作？

P.S。您可以通过将其粘贴到https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video

中来尝试我的代码

Answer 1

视频是问题所在。

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

g++ -o app app.cpp /usr/local/include/class.cpp

获取视频帧作为图像

1 个答案: