脚本宝典收集整理的这篇文章主要介绍了【随手记录】关于浏览器调用摄像头样例,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
可以通过以下样例代码,实现在浏览器端打开摄像头,并抓拍图片,图片以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 输入自己的网站 之后就重启就可以操作摄像头了!
以上是脚本宝典为你收集整理的【随手记录】关于浏览器调用摄像头样例全部内容,希望文章能够帮你解决【随手记录】关于浏览器调用摄像头样例所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。