Чтение видео из файла и отображение на холсте - PullRequest
Новая
       122

Чтение видео из файла и отображение на холсте

0 голосов
/ 13 июля 2020

Я пытаюсь открыть видео со своего компьютера и наложить поверх него. Но прежде чем я смогу это сделать, я пытаюсь отобразить видео при загрузке на свой холст, и это дает следующую ошибку: 

opencv.js:56 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Я попытался исправить эту проблему аналогично ответам на этот вопрос . Но это не сработало.

Вот мой код: 

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <meta charset="UTF-8">

    <title>opencv.js</title>
</head>

<body>
    <div class="container">
        <br />
        <h1 style="text-align: center">
            OpenCV.js
        </h1>

        <video id="canvasInput" width=480 height=360 src = "my_video_file.mp4" autoplay muted></video>
        <canvas id="canvasOutput" width=480 height=360></canvas>
    </div>

    <script src="js/index.js"></script>
    <script async src="js/opencv.js" onload="opencvIsReady()"></script>
</body>

</html>

Вот мой индекс. js файл 

let height = 360;
let width = 480;

let video = null;
let src = null;
let dst = null;
let cap = null;
const FPS = 30;

function opencvIsReady() {
    video = document.getElementById('canvasInput');
    
    playVideo()
}

function playVideo() {
    src = new cv.Mat(height, width, cv.CV_8UC4);
    dst = new cv.Mat(height, width, cv.CV_8UC1);
    cap = new cv.VideoCapture(video);
    setTimeout(processVideo, 0);
}


function processVideo() {
    let begin = Date.now();

    // VISION CODE
    cap.read(src);
    
    dst = src

    let startPoint = {x: 0, y: 0};
    let endPoint = {x: 200, y: 200};
    cv.line(dst, startPoint, endPoint, [255, 0, 0, 255]);

    cv.imshow("canvasOutput", dst);

    let delay = 1000 / FPS - (Date.now() - begin);
    setTimeout(processVideo, delay);
}
...