js_bg_subtraction.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Background Subtraction Example</title>
  6. <link href="js_example_style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. <h2>Background Subtraction Example</h2>
  10. <p>
  11. Click <b>Start/Stop</b> button to start or stop the camera capture.<br>
  12. The <b>videoInput</b> is a &lt;video&gt; element used as input.
  13. The <b>canvasOutput</b> is a &lt;canvas&gt; element used as output.<br>
  14. The code of &lt;textarea&gt; will be executed when video is started.
  15. You can modify the code to investigate more.
  16. </p>
  17. <div>
  18. <div class="control"><button id="startAndStop" disabled>Start</button></div>
  19. <textarea class="code" rows="29" cols="80" id="codeEditor" spellcheck="false">
  20. </textarea>
  21. </div>
  22. <p class="err" id="errorMessage"></p>
  23. <div>
  24. <table cellpadding="0" cellspacing="0" width="0" border="0">
  25. <tr>
  26. <td>
  27. <video id="videoInput" width="320" height="240" muted loop></video>
  28. </td>
  29. <td>
  30. <canvas id="canvasOutput" width="320" height="240"></canvas>
  31. </td>
  32. <td></td>
  33. <td></td>
  34. </tr>
  35. <tr>
  36. <td>
  37. <div class="caption">videoInput</div>
  38. </td>
  39. <td>
  40. <div class="caption">canvasOutput</div>
  41. </td>
  42. <td></td>
  43. <td></td>
  44. </tr>
  45. </table>
  46. </div>
  47. <script src="https://webrtc.github.io/adapter/adapter-5.0.4.js" type="text/javascript"></script>
  48. <script src="utils.js" type="text/javascript"></script>
  49. <script id="codeSnippet" type="text/code-snippet">
  50. let video = document.getElementById('videoInput');
  51. let cap = new cv.VideoCapture(video);
  52. let frame = new cv.Mat(video.height, video.width, cv.CV_8UC4);
  53. let fgmask = new cv.Mat(video.height, video.width, cv.CV_8UC1);
  54. let fgbg = new cv.BackgroundSubtractorMOG2(500, 16, true);
  55. const FPS = 30;
  56. function processVideo() {
  57. try {
  58. if (!streaming) {
  59. // clean and stop.
  60. frame.delete(); fgmask.delete(); fgbg.delete();
  61. return;
  62. }
  63. let begin = Date.now();
  64. // start processing.
  65. cap.read(frame);
  66. fgbg.apply(frame, fgmask);
  67. cv.imshow('canvasOutput', fgmask);
  68. // schedule the next one.
  69. let delay = 1000/FPS - (Date.now() - begin);
  70. setTimeout(processVideo, delay);
  71. } catch (err) {
  72. utils.printError(err);
  73. }
  74. };
  75. // schedule the first one.
  76. setTimeout(processVideo, 0);
  77. </script>
  78. <script type="text/javascript">
  79. let utils = new Utils('errorMessage');
  80. utils.loadCode('codeSnippet', 'codeEditor');
  81. let streaming = false;
  82. let videoInput = document.getElementById('videoInput');
  83. let startAndStop = document.getElementById('startAndStop');
  84. let canvasOutput = document.getElementById('canvasOutput');
  85. let canvasContext = canvasOutput.getContext('2d');
  86. startAndStop.addEventListener('click', () => {
  87. if (!streaming) {
  88. utils.clearError();
  89. videoInput.play().then(() => {
  90. onVideoStarted();
  91. });
  92. } else {
  93. videoInput.pause();
  94. videoInput.currentTime = 0;
  95. onVideoStopped();
  96. }
  97. });
  98. function onVideoStarted() {
  99. streaming = true;
  100. startAndStop.innerText = 'Stop';
  101. videoInput.height = videoInput.width * (videoInput.videoHeight / videoInput.videoWidth);
  102. utils.executeCode('codeEditor');
  103. }
  104. function onVideoStopped() {
  105. streaming = false;
  106. canvasContext.clearRect(0, 0, canvasOutput.width, canvasOutput.height);
  107. startAndStop.innerText = 'Start';
  108. }
  109. utils.loadOpenCv(() => {
  110. videoInput.addEventListener('canplay', () => {
  111. startAndStop.removeAttribute('disabled');
  112. });
  113. videoInput.src = 'box.mp4';
  114. });
  115. </script>
  116. </body>
  117. </html>