quagga2/docs/examples/camera_example.html at master · ericblade/quagga2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <title>Camera</title>
        <script type="text/javascript">
            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
            window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;

            function getUserMedia(constraints, success, failure) {
                navigator.getUserMedia(constraints, function(stream) {
                    var videoSrc = (window.URL && window.URL.createObjectURL(stream)) || stream;
                    success.apply(null, [videoSrc]);
                }, failure);
            }


            function initCamera(constraints, video, callback) {
                getUserMedia(constraints, function (src) {
                    video.src = src;
                    video.addEventListener('loadeddata', function() {
                        var attempts = 10;

                        function checkVideo() {
                            if (attempts > 0) {
                                if (video.videoWidth > 0 && video.videoHeight > 0) {
                                    console.log(video.videoWidth + "px x " + video.videoHeight + "px");
                                    video.play();
                                    callback();
                                } else {
                                    window.setTimeout(checkVideo, 100);
                                }
                            } else {
                                callback('Unable to play video stream.');
                            }
                            attempts--;
                        }

                        checkVideo();
                    }, false);
                }, function(e) {
                    console.log(e);
                });
            }

            function copyToCanvas(video, ctx) {
                ( function frame() {
                    ctx.drawImage(video, 0, 0);
                    window.requestAnimationFrame(frame);
                }());
            }

            window.addEventListener('load', function() {
                var constraints = {
                            video: {
                                mandatory: {
                                    minWidth: 1280,
                                    minHeight: 720
                                }
                            }
                        },
                        video = document.createElement('video'),
                        canvas = document.createElement('canvas');

                document.body.appendChild(video);
                document.body.appendChild(canvas);

                initCamera(constraints, video, function() {
                    canvas.setAttribute('width', video.videoWidth);
                    canvas.setAttribute('height', video.videoHeight);
                    copyToCanvas(video, canvas.getContext('2d'));
                });
            }, false);


        </script>
    </head>
    <body>

        <footer>
            Quagga2 Project &copy; 2014-2025 Christoph Oberhofer, Eric Blade, and all other Contributors. See <a href="https://github.com/ericblade/quagga2/blob/master/package.json">package.json</a>. Licensed under MIT license. See <a href="https://github.com/ericblade/quagga2/blob/master/LICENSE">LICENSE</a>
        </footer>
    </body>
</html>