【随手记录】关于浏览器调用摄像头样例

可以通过以下样例代码,实现在浏览器端打开摄像头,并抓拍图片,图片以data url格式保存

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摄像头调用</title>
    <script>
        var videoPlaying = false;
　　　　　// 打开摄像头
        function openVedio() {
            // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
            if (navigator.mediaDevices === undefined) {
                navigator.mediaDevices = {};
            }
            if (navigator.mediaDevices.getUserMedia === undefined) {
                navigator.mediaDevices.getUserMedia = function (constraints) {
                    // 首先，如果有getUserMedia的话，就获得它
                    var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

                    // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
                    if (!getUserMedia) {
                        return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                    }

                    // 否则，为老的navigator.getUserMedia方法包裹一个Promise
                    return new Promise(function (resolve, reject) {
                        getUserMedia.call(navigator, constraints, resolve, reject);
                    });
                }
            }
            var constraints = {
                video: true,
                audio: false
            };
            // 这里注意 ID 要唯一!
            videoObject = document.getElementById('vedio-camera');
            var promise = navigator.mediaDevices.getUserMedia(constraints);
            promise.then(stream => {
                // 旧的浏览器可能没有srcObject
                if ("srcObject" in videoObject) {
                    videoObject.srcObject = stream;
                } else {
                    // 防止再新的浏览器里使用它，因为它已经不再支持了
                    videoObject.src = window.URL.createObjectURL(stream);
                }
                videoObject.onloadedmetadata = function (e) {
                    videoObject.play();
                    videoPlaying = true;
                };
            }).catch(err => {
                Djfz.Layer.msg("打开摄像头失败，请核验是否开启摄像头访问权限！！");
                console.error(err.name + ": " + err.message);
            })
        }

        // 关闭摄像头
        function closeVedio() {
            if (videoObject != null && videoObject.srcObject != null && videoObject.srcObject.getVideoTracks() != null) {
                videoObject.srcObject.getVideoTracks().forEach(function (track) {
                    track.stop();
                });
            }
            // Image清空
            document.getElementById('image-pic').setAttribute('src', "");
        }

        var dataImgInfo = null;
　　　　 // 抓拍
        function takePic() {
            if (videoPlaying) {
                var canvas = document.getElementById('vedio-canvas');
                canvas.width = videoObject.videoWidth;
                canvas.height = videoObject.videoHeight;
                canvas.getContext('2d').drawImage(videoObject, 0, 0);
                var data = canvas.toDataURL('image/jpeg');
                document.getElementById('image-pic').setAttribute('src', data);
            }
        }
    </script>
</head>
<body>
    <div class="layout-horizontal">
        <button id="open" onclick="openVedio()">打开摄像头</button>
        <button id="take" onclick="takePic()">拍照</button>
        <div class="layout-full">
            <!-- 这里注意 ID 要唯一! -->
            <video id="vedio-camera" style="width: 100%;height: 100%;"></video>
            <canvas id="vedio-canvas" data-name="vedio-canvas" style="display:none;"></canvas>
        </div>
        <div class="layout-fixed layout-width-250" style="background-color: #8D8D8D ">
            <!-- 这里注意 ID 要唯一! -->
            <img src="" id="image-pic" alt="采集图片" style="width: 250px;height: 250px;">
        </div>
    </div>
</body>
</html>

如果未能打开摄像头，查看 Chrome浏览器是否允许开启摄像头(权限问题):

在Chrome的设置 ---> 隐私和安全 --> 网站设置 ---> 摄像头 --> 查看是否开启摄像头权限
不允许的话 浏览器输入chrome://flags
搜 unsafely 然后在Insecure origins treated as secure 输入自己的网站 之后就重启就可以操作摄像头了!
posted @ 2022-05-09 16:29  空知大仙人  阅读(508)  评论(0)    收藏  举报