WebRTC打开本地摄像头

举报
AnRFDev 发表于 2021/11/24 13:46:58 2021/11/24
【摘要】 本文使用WebRTC的功能,打开电脑上的摄像头,并且把摄像头预览到的图像显示出来。

本文使用WebRTC的功能,打开电脑上的摄像头,并且把摄像头预览到的图像显示出来。
纯网页实现,能支持除IE外的多数浏览器。手机浏览器也可用。

引入依赖

我们需要引入adapter-latest.js

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

这个WebRTC adapter曾是WebRTC中的一部分,但现在被移出来了。
我们会用到它提供的功能。

html

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

<div id="container">
    <video id="video-local" autoplay playsinline></video>
    <button id="showVideo">打开摄像头</button>
    <button id="stopVideo">关闭摄像头</button>
    <p>显示摄像头预览的内容,网页上由元素video来呈现。</p>
    <p>点击打开摄像头按钮后,浏览器会询问是否允许,请点击“允许”。</p>
    <div id="errorMsg"></div>
    <div id="tipMsg"></div>
</div>
  • video 用来显示预览的视频
  • 两个button用来控制开启和关闭
  • 再放几个显示信息的地方

js

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

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

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

function showErrMsg(msg, error) {
  const errorElement = document.querySelector('#errorMsg');
  errorElement.innerHTML += `<p>${msg}</p>`;
  if (typeof error !== 'undefined') {
    console.error(error);
  }
}

function showMsg(msg) {
    const msgEle = document.querySelector('#tipMsg');
    msgEle.innerHTML += `<p>-> ${msg}</p>`;
    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

停止视频流

要停止视频,我们可以从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是示例中最关键的方法。以后的示例都会用到它。

参考

效果预览

完整的效果请参考 open-camera
http://an.rustfisher.com/webrtc/web-samples/getUserMedia-open-camera/open-camera.html

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。