简介
WebRTC (Web Real-Time Communications) 是Google于2010购买的一项实时通讯技术，能够在浏览器内部进行实时音频和视频通信，目前支持所有主流浏览器及移动设备。
在不通过中间媒介的情况下，它允许网络应用或者站点建立浏览器之间p2p（Peer-to-Peer）的连接，实现视频流和音频流或者其他任意数据的传输。
为了做到不通过中间媒介这点，一个典型的 WebRTC 通信过程，包含了找到对方，进行协商，建立连接，开始通讯
可以通过appr.tc体验下简单的webrtc应用：
- 在浏览器中打开appr.tc
- 点击Join进入聊天室并允许摄像头和麦克风权限
- 分享连接给其他人或者使用其他设备打开连接进入聊天室。
如何开发一个webRTC应用
webRTC相关的API：
- MediaStream 一个媒体内容的流.。一个流包含几个轨道，比如视频和音频轨道。
- RTCPeerConnection 代表一个由本地计算机到远端的WebRTC连接。该接口提供了创建，保持，监控，关闭连接的方法的实现。
webRTC建立步骤
- 获取视频流，音频流。
- 获取网络信息，例如：ip地址、端口号，用以和其他用户相连接。
- 连接到信令服务器启动或关闭会话并报告错误信息。（信令后文会提到）
- 交换媒体及客户端功能等信息，例如：分辨率、帧率、编解码器。
- 互相传输视频流，音频流。
获取本地音视频流
// 需要开启https，并保证设备完好
<template>
<div id="app" class="oa">
<div>
<button id="start">开始</button>
</div>
<div>
<video id="stream" autoplay controls></video>
</div>
</div>
</template>
<script>
export default {
name: 'App',
mounted() {
// 通过true or false 控制 音视频
const constraints = { audio: true, video: false }
const startBtn = document.getElementById('start')
const video = document.getElementById('stream')
startBtn.onclick = function () {
window.navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
video.srcObject = stream
window.stream = stream
})
.catch(function (err) {
console.log(err)
})
}
},
}
</script>关于信令及SDP
信令
虽然webRTC不需要经过服务器进行点到点的通信，但是在开始通信之前，必须知道对方的存在，这个时候就需要信令服务器。
信令服务器简单的讲就是用来让客户端交换元数据来协调通信的东西，是一个帮助双方建立链接的中间人角色。
信令服务器除了在寻找对等端阶段，标识与验证参与者的身份外，还负责传递一些特定信息，例如房间号，双方的信息等，除此之外还会交换会话控制消息用于打开或关闭通信，错误消息，媒体元数据。
SDP
会话描述协议(Session Description Protocol)是一个描述多媒体连接内容的协议，例如分辨率，格式，编码，加密算法等，主要用来描述多媒体会话，用途包括会话声明、会话邀请、会话初始化等。所以在数据传输时两端都能够理解彼此的数据。本质上，这些描述内容的元数据并不是媒体流本身。
下面列举了一个SDP并通过属性名的说明能清晰知道每个属性名的作用。
v=0
o=alice 2890844526 2890844526 IN IP4 host.anywhere.com
s=
c=IN IP4 host.anywhere.com
t=0 0
m=audio 49170 RTP/AVP 0
a=rtpmap:0 PCMU/8000
m=video 51372 RTP/AVP 31
a=rtpmap:31 H261/90000
m=video 53000 RTP/AVP 32
a=rtpmap:32 MPV/90000| 属性名 |
属性说明 |
| v |
代表协议版本号 |
| o |
代表会话发起者，包括 username、sessionId 等 |
| s |
代表 session 名称，为唯一字段 |
| c |
代表连接信息，包括网络类型、地址类型、地址等 |
| t |
代表会话时间，包括开始/结束时间，均为 0 表示持久会话 |
| m |
代表媒体描述，包括媒体类型、端口、传输协议、媒体格式等 |
| a |
代表附加属性，此处用于对媒体协议进行扩展 |
总结
之前有做过和webrtc相关的项目，但时间一长相关知识也有了些生疏。本文只是简单介绍了下webrtc的入门知识，也是自己对此的梳理巩固。
参考
[1]. https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API
[2].https://cloud.tencent.com/developer/article/1668930
文｜sheen16
关注得物技术，携手走向技术的云端