https://dkurtaev.github.io/opencv_canny.html

1<!DOCTYPE html>
2
3<html>
4
5<head>
6  <title>DK: OpenCV Canny</title>
7
8  

8<script>

8
9    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
10    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
11    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
12    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
13    ga('create', '

13UA-83328246-1

13', 'auto');
14    ga('send', 'pageview');
15  

15</script>

15
16
17  <!-- Download OpenCV JavaScript bindings -->
18  

18<script src="https://docs.opencv.org/master/opencv.js" type="text/javascript"></script>

18
19
20  

20<script type='text/javascript'>
21    function main() {
22      // Create a camera object.
23      var camera = document.createElement("video");
24      camera.setAttribute("width", "640");
25      camera.setAttribute("height", "480");
26
27      // Get a permission from user to use a camera. Prefer rare camera on mobile devices.
28      navigator.mediaDevices.getUserMedia({video: true, audio: false})
29        .then(function(stream) {
30          camera.srcObject = stream;
31          camera.onloadedmetadata = function(e) {
32            camera.play();
33          };
34      });
35
36      // Open a camera stream.
37      var cap = new cv.VideoCapture(camera);
38      var frame = new cv.Mat(camera.height, camera.width, cv.CV_8UC4);
39      var res = new cv.Mat(camera.height, camera.width, cv.CV_8UC1);
40
41      // Define frames processing.
42      function captureFrame() {
43        cap.read(frame);
44        cv.Canny(frame, res, 100, 200);
45        cv.imshow("output", res);
46        setTimeout(captureFrame, 40);  // Loop this function.
47      };
48      // Run the processing function.
49      captureFrame();
50    };
51  </script>

51
52</head>
53
54<body onload="main()">
55  <h1><a href="https://dkurtaev.github.io/">Dmitry Kurtaev/</a> OpenCV: Canny edge detector</h1>
56
57  <p>
58  <b>Example:</b> OpenCV.js demo with Canny edge detection on images from camera stream<br>
59  </p>
60
61  <div style="position: relative">
62    <canvas id="output" style="max-width: 100%; position: relative"></canvas>
63    <a href="https://opencv.org/">
64      <img src="https://opencv.org/assets/theme/logo.png"
65           style="background-color: #fff; border: 1px solid black; width: 64px; position: absolute; left: 0; top: 0;"></img>
66    </a>
67  </div>
68
69  <h2 id="references">Useful links</h2>
70  <a href=https://docs.opencv.org/master>OpenCV documentation</a><br>
71  <a href=http://answers.opencv.org>OpenCV questions forum</a>
72</body>
73
74</html>