初步认识WebRTC,实现网页调起摄像头实时显示功能

实现一个web网页调用摄像头并实时显示在网页的video标签中的功能
这里有WebRTC官网,直接有更多功能的例子参考~~
还有在线的例子=>传送门
WebRTC相关的文档可以参考=>传送门
话不多说开始抛砖引玉

WebRTC是什么

WebRTC(Web实时通信)是一个免费的开源项目,它通过简单的应用程序编程接口(API)为Web浏览器和移动应用程序提供实时通信(RTC )。它允许直接的对等通信,从而允许音频和视频通信在网页内运行,而无需安装插件或下载本机应用程序。由Apple,Google,Microsoft,Mozilla和Opera支持,WebRTC正在通过万维网联盟(W3C)和Internet工程任务组(IETF)进行标准化。

它的任务是“启用要为浏览器,移动平台和IoT设备开发的丰富,高质量的RTC应用程序,并允许它们全部通过一组通用协议进行通信 ”。

实现一个web网页调用摄像头并实时显示在网页的video标签中的功能

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>WebRTCtitle>
        <script src="./demo.js">script>
    head>
    <body>
       <video id="videoElm" autoplay playsinline>video>
    body>
html>
'use strict'
// 检测浏览器的支持情况
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
    throw new Error("enumerateDevices is not supported");
}

// 列出电脑支持的设备
navigator.mediaDevices.enumerateDevices().then(devices => {
    console.log("devices", devices);
}).catch(error => {
    throw error; //抛出异常
});

let openCamera = (videoId)=>{
  /**
   * 成功回调函数
   * @param stream 视频流
   */
  let success = (stream) => {
    let videoElement = document.getElementById('videoElm');
    mediaTrack = stream.getTracks()[0];
    console.log(stream)
    let CompatibleURL = window.URL || window.webkitURL;
    try {
      videoElement.src = CompatibleURL.createObjectURL(stream);
      console.log(videoElement.src)
    } catch (e) {
      videoElement.srcObject = stream;
      console.log(videoElement.srcObject)
    }
    videoElement.play();
  };

  let error = (error) => {
    console.log('无法访问媒体设备', error);
  }

  let constraints = {
    video: {

    }
  };

  navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
};


openCamera('videoElm');

需要注意的环境问题

通过 MediaDevices.getUserMedia() 获取用户多媒体权限时,需要注意其只工作于以下三种环境:

localhost
开启了 HTTPS 的域
使用 file:/// 协议打开的本地文件

其他情况下,比如在一个 HTTP 站点上,navigator.mediaDevices 的值为 undefined

还有更多的功能待研究~~~

你可能感兴趣的:(WebRTC,javascript)