【随手记录】关于浏览器调用摄像头样例
可以通过以下样例代码,实现在浏览器端打开摄像头,并抓拍图片,图片以data url格式保存
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 87 88 89 90 91 92 93 94 95 | <! 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 输入自己的网站 之后就重启就可以操作摄像头了!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战