WebRTC打开本地摄像头

网友投稿 670 2022-05-30

本文使用WebRTC的功能,打开电脑上的摄像头,并且把摄像头预览到的图像显示出来。

纯网页实现,能支持除IE外的多数浏览器。手机浏览器也可用。

引入依赖

我们需要引入adapter-latest.js

这个WebRTC adapter曾是WebRTC中的一部分,但现在被移出来了。

我们会用到它提供的功能。

html

我们在界面上先摆放一些控件。

显示摄像头预览的内容,网页上由元素video来呈现。

点击打开摄像头按钮后,浏览器会询问是否允许,请点击“允许”。

video 用来显示预览的视频

两个button用来控制开启和关闭

再放几个显示信息的地方

js

先设置一下,我们只使用视频

const constraints = window.constraints = { audio: false, video: true };

在网页上显示一些信息,便于调试。

function showErrMsg(msg, error) { const errorElement = document.querySelector('#errorMsg'); errorElement.innerHTML += `

${msg}

`; if (typeof error !== 'undefined') { console.error(error); } } function showMsg(msg) { const msgEle = document.querySelector('#tipMsg'); msgEle.innerHTML += `

-> ${msg}

`; console.log(msg); }

完整代码在main.js中。css可自行定义。

打开摄像头

要打开摄像头,使用MediaDevices.getUserMedia()方法

async function openCamera(e) { try { showMsg('正在打开摄像头'); const stream = await navigator.mediaDevices.getUserMedia(constraints); showMsg('获取到了stream'); gotStream(stream); e.target.disabled = true; } catch (err) { onErr(err); }

MediaDevices.getUserMedia()方法在用户允许后,按照请求,拿到stream。

stream可以包含视频或音频。前面的设定里,我们只使用视频。

如果用户拒绝了使用摄像头申请,或者申请的媒体不可用,即表现为被拒绝。

用户拒绝会报NotAllowedError,找不到符合要求的设备会报NotFoundError DOMException。

方法的文档MediaDevices.getUserMedia()

显示视频

获取到stream后,让video显示视频

function gotStream(stream) { const videoEle = document.querySelector('video'); const videoTracks = stream.getVideoTracks(); showMsg(`正在使用的设备: ${videoTracks[0].label}`); window.stream = stream; videoEle.srcObject = stream; }

document.querySelector('video')直接获取html上的video控件。

把stream直接交给videoEle.srcObject。

WebRTC打开本地摄像头

停止视频流

要停止视频,我们可以从video元素入手,拿到stream,然后把里面的track停掉。

function stopVideo(e) { showMsg("停止视频"); const videoElem = document.querySelector('video'); const stream = videoElem.srcObject; document.querySelector('#showVideo').disabled = false; // 允许开启 if(stream == null) { return; } const tracks = stream.getTracks(); tracks.forEach(function(track) { track.stop(); }); videoElem.srcObject = null; }

stream.getTracks()方法拿到所有的轨道(track),遍历一遍全部关掉。

最后,把videoElem.srcObject设置为null,它与前面的stream解除关联,方便将它释放。

参考 MediaStreamTrack-stop

小结

示例使用的WebRTC的功能。显示的是本地摄像头的视频,不涉及传输。拿到视频流后交给video来显示。

getUserMedia是示例中最关键的方法。以后的示例都会用到它。

参考

webrtc-adapter github

效果预览

完整的效果请参考 open-camera

http://an.rustfisher.com/webrtc/web-samples/getUserMedia-open-camera/open-camera.html

web前端

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:1、QT基础——Qt概述
下一篇:认识HTML
相关文章