WebRTC

Web实时通信技术，全称(Web Real-Time Communication)。实时通讯功能通过标准API与WEB应用程序交互，使用浏览器与操作系统通讯。

一些名词

SIP：会话启动协议。
NAT：网络地址转换。
RTP：实时传输协议。
SDP：会话描述协议。
打洞：穿透NAT。

新特点

对等连接：浏览器与浏览器之间的交互。
信令服务器：在浏览器和对等连接另一端之间提供信令通道。信令可通过HTTP或WebSocket传送到Web服务器，或传送到只负责处理信令的Web服务器。

WebRTC系统包含元素

建立WebRTC会话关键步骤

获取本地媒体。getUserMedia()，此方法可获取单个本地MediaStream，获取多个媒体流可使用MediaStream API组合到所需流中，注意，需要获取用户授权后方可访问用户麦克风或摄像头。
在浏览器和对等端（其它浏览器或终端）之间建立连接。核心：RTCPeerConnection。
把媒体和数据关联到改连接。
交换会话描述。
关闭连接。在对等连接中，任何一端的浏览器都可以关闭连接，通过RTCPeerConnection对象调用close()。如果某一端的浏览器断开Internet连接或发生奔溃，媒体或数据通道中发送的持久连接（keep-alive）请求将失效，另一端浏览器将重新尝试打洞，打洞失败则关闭会话。会话结束，浏览器删除访问设备的授权许可，新的会话需要重新获得许可。

约束机制

约束机制可看作是一种复杂的默认设置系统，它允许开发人员对程序细节进行规定，同时让浏览器决定该范围之外的事务。比如，应用程序知道什么样的分辨率最适合自己，但是浏览器也可快速更改编码器参数来应对不同程度的网络堵塞。
MDN文档：constraints 参数是一个包含了video 和 audio两个成员的MediaStreamConstraints 对象，用于说明请求的媒体类型。

获取本地音视频流示例

示例简单地调用了mediaDevices.getUserMedia()获取媒体流（获得对摄像头和麦克风的授权后），将流分配给video。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    video {
      width: 320px;
      height: 240px;
      border: 1px solid #000;
    }
    div {
      display: inline-block;
    }
  </style>
</head>
<body>
  <script>
    window.onload = function () {
      getMedia();
    }

    function getMedia() {
      navigator.mediaDevices.getUserMedia({
        audio: true,
        video: true
      }).then((stream) => {
        gotUserMedia(stream);
      }).catch((err) => {
        didntGetUserMedia(err);
      })
    }

    function gotUserMedia(stream) {
      const myVideo = document.getElementById('myVideo');
      myVideo.srcObject = stream;
      myVideo.onloadedmetadata = function () {
        myVideo.play();
      }
    }

    function didntGetUserMedia () {
      console.error('couldn't get video:', err);
    }
  </script>

  <div id="setup">
    <p>WebRTC Book Demo (local media only)</p>
  </div>
  <br/>
  <div style="width: 30%;vertical-align:top;">
    <div>
      <video id="myVideo" autoplay controls muted></video>
    </div>
  </div>
</body>
</html>

获取流运行结果

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

webrtc-01：获取本地音视频流并播放