Question

我在下面的教程中使用了背景减法。我想获得有颜色的物体。 https://docs.opencv.org/3.3.1/de/df4/tutorial_js_bg_subtraction.html

我做了一些研究，并在stackoverflow上找到类似的问题并在我的代码上实现。 opencv background subtraction get color objects

 let colorForeground = zeros(frame.size(), frame.type()); 
 cv::Mat::copyTo(colorForeground, fgmask);

但我得到了这个错误。

    SyntaxError: Unexpected token :
    at Utils.executeCode (file:///C:/Users/q/Desktop/web/opencv.js/6-Background%20substraction/utils.js:57:18)
    at onVideoStarted (file:///C:/Users/q/Desktop/web/opencv.js/6-Background%20substraction/index.html:115:11)
    at videoInput.play.then (file:///C:/Users/q/Desktop/web/opencv.js/6-
Background%20substraction/index.html:102:13)

-

javascript代码存在问题，codeEditor无法运行。

let video = document.getElementById('videoInput');
    let cap = new cv.VideoCapture(video);

    let frame = new cv.Mat(video.height, video.width, cv.CV_8UC4);
    let fgmask = new cv.Mat(video.height, video.width, cv.CV_8UC1);
    let fgbg = new cv.BackgroundSubtractorMOG2(500, 16, true);

    const FPS = 30;
    function processVideo() {
        try {
            if (!streaming) {
                // clean and stop.
                frame.delete(); fgmask.delete(); fgbg.delete();
                return;
            }


            let begin = Date.now();
            // start processing.
            cap.read(frame);
            fgbg.apply(frame, fgmask);
            let colorForeground = zeros(frame.size(), frame.type()); 
            cv::Mat::copyTo(colorForeground, fgmask);

            cv.imshow('canvasOutput', colorForeground);
            // schedule the next one.
            let delay = 1000/FPS - (Date.now() - begin);
            setTimeout(processVideo, delay);
        } catch (err) {
            utils.printError(err);
        }
    };

    // schedule the first one.
    setTimeout(processVideo, 0);

我的整个HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Background Subtraction Example</title>
<link href="js_example_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Background Subtraction Example</h2>
<p>
    Click <b>Start/Stop</b> button to start or stop the camera capture.<br>
    The <b>videoInput</b> is a &lt;video&gt; element used as input.
    The <b>canvasOutput</b> is a &lt;canvas&gt; element used as output.<br>
    The code of &lt;textarea&gt; will be executed when video is started.
    You can modify the code to investigate more.
</p>
<div>
<div class="control"><button id="startAndStop" disabled>Start</button></div>
<textarea class="code" rows="29" cols="80" id="codeEditor" spellcheck="false">
</textarea>
</div>
<p class="err" id="errorMessage"></p>
<div>
    <table cellpadding="0" cellspacing="0" width="0" border="0">
    <tr>
        <td>
            <video id="videoInput" width="320" height="240" muted loop></video>
        </td>
        <td>
            <canvas id="canvasOutput" width="320" height="240"></canvas>
        </td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
            <div class="caption">videoInput</div>
        </td>
        <td>
            <div class="caption">canvasOutput</div>
        </td>
        <td></td>
        <td></td>
    </tr>
    </table>
</div>
<script src="https://webrtc.github.io/adapter/adapter-5.0.4.js" type="text/javascript"></script>
<script src="utils.js" type="text/javascript"></script>
<script id="codeSnippet" type="text/code-snippet">
let video = document.getElementById('videoInput');
let cap = new cv.VideoCapture(video);

let frame = new cv.Mat(video.height, video.width, cv.CV_8UC4);
let fgmask = new cv.Mat(video.height, video.width, cv.CV_8UC1);
let fgbg = new cv.BackgroundSubtractorMOG2(500, 16, true);

const FPS = 30;
function processVideo() {
    try {
        if (!streaming) {
            // clean and stop.
            frame.delete(); fgmask.delete(); fgbg.delete();
            return;
        }
        let begin = Date.now();
        // start processing.
        cap.read(frame);
        fgbg.apply(frame, fgmask);
        let colorForeground = zeros(frame.size(), frame.type()); 
        cv::Mat::copyTo(colorForeground, fgmask);

        cv.imshow('canvasOutput', colorForeground);
        // schedule the next one.
        let delay = 1000/FPS - (Date.now() - begin);
        setTimeout(processVideo, delay);
    } catch (err) {
        utils.printError(err);
    }
};
// schedule the first one.
setTimeout(processVideo, 0);
</script>
<script type="text/javascript">
let utils = new Utils('errorMessage');
utils.loadCode('codeSnippet', 'codeEditor');
let streaming = false;
let videoInput = document.getElementById('videoInput');
let startAndStop = document.getElementById('startAndStop');
let canvasOutput = document.getElementById('canvasOutput');
let canvasContext = canvasOutput.getContext('2d');

startAndStop.addEventListener('click', () => {
    if (!streaming) {
        utils.clearError();
        videoInput.play().then(() => {
            onVideoStarted();
        });
    } else {
        videoInput.pause();
        videoInput.currentTime = 0;
        onVideoStopped();
    }
});

function onVideoStarted() {
    streaming = true;
    startAndStop.innerText = 'Stop';
    videoInput.height = videoInput.width * (videoInput.videoHeight / videoInput.videoWidth);
    utils.executeCode('codeEditor');
}

function onVideoStopped() {
    streaming = false;
    canvasContext.clearRect(0, 0, canvasOutput.width, canvasOutput.height);
    startAndStop.innerText = 'Start';
}   
utils.loadOpenCv(() => {
    videoInput.addEventListener('canplay', () => {
        startAndStop.removeAttribute('disabled');
    });
    videoInput.src = 'box.mp4';
});
</script>
</body>
</html>

Answer 1

因此，如果您查看异常并按照代码进行操作，您将看到代码在第115行失败：

utils.executeCode('codeEditor');

＆＃34; CodeEditor＆＃34;是无效的代码，您需要修复它。

opencv.js背景减法与颜色

1 个答案: