123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- <!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 <video> element used as input.
- The <b>canvasOutput</b> is a <canvas> element used as output.<br>
- The code of <textarea> 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);
- cv.imshow('canvasOutput', fgmask);
- // 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>
|