SecurityError：操作不安全。 php

Question

尝试从视频创建缩略图。

我收到 SecurityError 任何人请帮助我。

这是我的脚本

<video id="video" src="<?php echo $file_path; ?>"  onerror="failed(event)"  controls="controls" preload="none" ></video>

    <script type="text/javascript">
        var index = 0;
        var video = document.getElementById('video');
        var starttime = 0.00;  // start at 7 seconds
        var endtime = 0.00;    // stop at 17 seconds
        video.addEventListener("timeupdate", function () {
            if (this.currentTime >= endtime) {
                this.pause();
                getThumb();
            }
        }, false);
        video.play();
        video.currentTime = starttime;
        function getThumb() {
            var filename = video.src;
            var w = video.videoWidth;//video.videoWidth * scaleFactor;
            var h = video.videoHeight;//video.videoHeight * scaleFactor;
            var canvas = document.createElement('canvas');
            canvas.width = w;
            canvas.height = h;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, w, h);
            //document.body.appendChild(canvas);
            var data = canvas.toDataURL("image/jpg");
            //send to php script
            var xmlhttp = new XMLHttpRequest;
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    console.log('saved');
                }
            }
            console.log('saving');
            xmlhttp.open("POST", 'process_thumb.php', true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.send('name=' + encodeURIComponent(filename) + '&data=' + data);
        }
    </script>

我在 Firefox 的控制台中收到此错误：

SecurityError: The operation is insecure. thumbnail_process.php:26
getThumb
<anonymous>

任何帮助将不胜感激。

Answer 1

当从不同目录加载图像或视频时，它也被视为本地主机中的跨域请求。所以我们需要将 crossOrigin 标签设置为 video 元素，告诉画布加载的视频来自另一个域。所以画布不会被污染。

如果没有 crossOrigin 标签，视频可能会加载，但画布会被污染。简而言之，受污染的画布无法转换为图像。所以引发了错误。

我没有尝试过这个解决方案，但你可以试试。我在视频中添加了 crossOrigin 标签：

<video id="video" src="<?php echo $file_path; ?>"  onerror="failed(event)"  controls="controls" preload="none" ></video>

<script type="text/javascript">
    var index = 0;
    var video = document.getElementById('video');
    var starttime = 0.00;  // start at 7 seconds
    var endtime = 0.00;    // stop at 17 seconds
    video.crossOrigin = "anonymous";
    video.addEventListener("timeupdate", function () {
        if (this.currentTime >= endtime) {
            this.pause();
            getThumb();
        }
    }, false);
    video.play();
    video.currentTime = starttime;
    function getThumb() {
        var filename = video.src;
        var w = video.videoWidth;//video.videoWidth * scaleFactor;
        var h = video.videoHeight;//video.videoHeight * scaleFactor;
        var canvas = document.createElement('canvas');
        canvas.width = w;
        canvas.height = h;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, w, h);
        //document.body.appendChild(canvas);
        var data = canvas.toDataURL("image/jpg");
        //send to php script
        var xmlhttp = new XMLHttpRequest;
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                console.log('saved');
            }
        }
        console.log('saving');
        xmlhttp.open("POST", 'process_thumb.php', true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send('name=' + encodeURIComponent(filename) + '&data=' + data);
    }
</script>