js获取摄像头权限实现拍照功能 | 您所在的位置:网站首页 › 苹果手机浏览器开启相机权限 › js获取摄像头权限实现拍照功能 |
首先说一下js打开摄像头的流程: 使用getUserMedia打开摄像头然后将获取到的流媒体转成url放在video标签中的src中;使用canvas的drawImage方法将video的内容绘至canvas中,这样就形成了截图的效果;使用stream.getTracks()[0].stop()关闭摄像头。 1.开启摄像头开启摄像头主要有两种方法,一个是旧方法window.navigator.getUserMedia()方法,还有一个就是新方法navigator.mediaDevices.getUserMedia()。旧方法的使用如下: btn1.addEventListener("click", function (event) { if ("getUserMedia" in window.navigator) { window.navigator.getUserMedia({ video: true, audio: false }, function (stream) { v1.srcObject = stream; v1.play(); }, function (err) { console.error("获取摄像头视频错误"); }) } });其中window.navigator.getUserMedia()方法的参数有三个。 第一个参数是一个对象,用于选择是否使用视频(video)和audio(audio)。第二个参数是成功的回调,其中带一个参数(stream),在旧版本中可以直接通过调用MediaStream.stop() 来关闭摄像头,不过在新版之中已废弃。需要使用MediaStream.getTracks()[index].stop() 来关闭相应的Track 。第三个参数是失败的回调,他有一个参数err用于接收错误,可以在控制台打印出来。新方法的getUserMedia 位于navigator.mediaDevices对象下面,使用方法如下: btn1.addEventListener("click", function () { if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({ video: true, Audio: true }).then(function (stream) { mediaStreamTrack = stream.getTracks()[0]; btn2.addEventListener("click", function () { mediaStreamTrack.stop(); }, false); video.srcObject = stream; video.play(); }).catch(function (err) { console.log(err); }) } });这个新方法返回的是一个Promise对象,可以使用then和catch表示成功与失败的回调。其中的btn2的监听事件是关闭摄像头的,在下文会说明。 这里我想说的是第一次用这个新方法的时候有点问题,我准备用URL.createObjectURL()这个方法将流媒体转成一个地址然后放在video标签的src中,但是浏览器给我来了这么一下: 感兴趣的可以去这里看看URL.createObjectURL() 解决的方法如下: 原先的代码: video.src = URL.createObjectURL(stream); 更改成下面的代码: video.srcObject = stream; 兼容版本如下: try { this.srcObject = stream;} catch (error) { this.src = window.URL.createObjectURL(stream);} 这里的解决方案是我查到的,具体的相关解释可以看下该博主的博客 2.使用canvas截图代码如下: var photo = document.querySelector("#photo"); var ctx = photo.getContext("2d"); btn3.addEventListener("click", function () { ctx.drawImage(video, 0, 0, 300, 300); }, false) 3.关闭摄像头在旧版本中可以直接使用stream.stop()来关闭摄像头,不过现在好像已经不行了所以我直接跳过使用新方法stream.getTracks()来关闭摄像头。 var mediaStreamTrack = stream.getTracks()[0]; btn2.addEventListener("click", function () { mediaStreamTrack.stop(); }, false);这里需要注意的是返回的stream.getTracks()返回的Tracks数组是倒序排列的,例如video在第一个audio在第二个,那么stream.getTracks()[1]就是video。不过我在本例中只获取到了video,我也不知道为啥…所以只能用下标0。 |
CopyRight 2018-2019 实验室设备网 版权所有 |