v=  (protocol version)
     o=  (originator and session identifier)
     s=  (session name)
     i=* (session information)
     u=* (URI of description)
     e=* (email address)
     p=* (phone number)
     c=* (connection information -- not required if included in
          all media)
     b=* (zero or more bandwidth information lines)
     One or more time descriptions ("t=" and "r=" lines; see below)
     z=* (time zone adjustments)
     k=* (encryption key)
     a=* (zero or more session attribute lines)
     Zero or more media descriptions

t=  (time the session is active)
     r=* (zero or more repeat times)

m=  (media name and transport address)
     i=* (media title)
     c=* (connection information -- optional if included at
          session level)
     b=* (zero or more bandwidth information lines)
     k=* (encryption key)
     a=* (zero or more media attribute lines)

v=0
o=jdoe 2890844526 2890842807 IN IP4 10.47.16.5
s=SDP Seminar
i=A Seminar on the session description protocol
u=http://www.example.com/seminars/sdp.pdf
e=j.doe@example.com (Jane Doe)
c=IN IP4 224.2.17.12/127
t=2873397496 2873404696
a=recvonly
m=audio 49170 RTP/AVP 0
m=video 51372 RTP/AVP 99
a=rtpmap:99 h263-1998/90000

具体字段的type/value描述和格式可以参考RFC4566。

1.4.3 Offer/Answer模型

1.4.4 ICE工作流程

+-----------+
                 |    SIP    |
+-------+        |    Srvr   |         +-------+
| STUN  |        |           |         | STUN  |
| Srvr  |        +-----------+         | Srvr  |
|       |        /           \         |       |
+-------+       /             \        +-------+
               /<- Signaling ->\
              /                 \
         +--------+          +--------+
         |  NAT   |          |  NAT   |
         +--------+          +--------+
           /                       \
          /                         \
         /                           \
     +-------+                    +-------+
     | Agent |                    | Agent |
     |   A   |                    |   B   |
     |       |                    |       |
     +-------+                    +-------+

ICE的基本思路是，每个终端都有一系列传输地址(包括传输协议，IP地址和端口)的候选，可以用来和其他端点进行通信。其中可能包括：

• 直接和网络接口联系的传输地址(host address)
• 经过NAT转换的传输地址,即反射地址(server reflective address)
• TURN服务器分配的中继地址(relay address)

通过之前的学习，我们可以了解到每个终端的情况是比较复杂的（有的终端可能同时连着wifi和网线，有多个内网地址），所有每个终端有多种可以连接的方案。

获取到这一系列传输地址后，会以一定优先级将地址排序。按照优先级和其他终端的传输地址进行组合检测连接可用性（连接性检查：Connectivity Checks）。 两端连接性检查，是一个4次握手过程:

A                        B 
                       -
 
STUN request ->                  \  A's           <- STUN response       /  check

<- STUN request       \  B's STUN response ->                 /  check

• 为中继候选地址生成许可(Permissions)；
• 从本地候选往远端候选发送Binding Request：在Binding请求中通常需要包含一些特殊的属性，以在ICE进行连接性检查的时候提供必要信息：

• 处理Response：当收到Binding Response时，终端会将其与Binding Request相联系，通常生成事务ID。随后将会将此事务ID与候选地址对进行绑定。

以上仅对协议作了简单的介绍，具体服务器程序实现可参考：https://github.com/evilpan/TurnServer

1.5 经典WebRTC连接建立流程

引用自：https://aggresss.blog.csdn.net/article/details/106832965

二、服务器搭建

2.1 STUN/TURN服务器【可跳过】

2.1.1 安装coturn

apt-get -y update
apt-get -y install coturn

安装完毕后，先关闭coturn服务：

systemctl stop coturn

2.1.2 配置coturn

vim /etc/default/coturn

TURNSERVER_ENABLED=1

ifconfig

apt install openssl
openssl req -x509 -newkey rsa:2048 -keyout /etc/turnserverpkey.pem -out /etc/turnservercert.pem -days 99999 -nodes

mv /etc/turnserver.conf /etc/turnserver.conf.bat

vim /etc/turnserver.conf

server-name=turn.webrtc.zzboy.cn
realm=turn.webrtc.zzboy.cn
fingerprint
relay-device=eth0   #与前ifconfig查到的网卡名称一致
listening-ip=192.168.0.186    #内网IP listening-port=3478 tls-listening-port=5349 relay-ip=192.168.0.186 external-ip=121.36.105.109    #公网IP
relay-threads=50 lt-cred-mech no-cli verbose
cert=/etc/turnservercert.pem pkey=/etc/turnserverpkey.pem #pidfile=/var/run/turnserver.pid min-port=49152 max-port=65535 user=jun:123456    #用户名密码，创建IceServer时用

2.1.3 测试

2.2 Nodejs构建信令服务器(Signal Server)

2.2.1 安装node环境

apt-get update apt-get install -y curl git

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -

apt-get install nodejs

2.2.2 克隆项目，安装依赖

cd ~/ && git clone https://github.com/qdgx/WebRtcRoomServer.git

cd ~/WebRtcRoomServer npm i

node app.js

2.2.3 pm2管理node服务

npm install pm2@latest -g

pm2 start app.js --name signal-server --watch

• name：给应用命名，可以不管
• watch：相当于热更新，应用文件更新后会重启应用

有关pm2的使用，可以百度查询一下，也可以参考本人之前写的一篇文章：https://www.zzboy.cn/Learning/f360ef90efef

三、API学习

3.1 socket.io

• emit(description: string, data: any：监听事件；description是标识；data是需要发送的数据。
• on(description: string, callback: function：监听事件；description表示监听的标识；callback是监到事件后处理方法，参数是emit发送的数据。

3.1.1 服务器端

npm install socket.io

const httpServer = require("http").createServer(); // 创建http服务
// 使用socket.io监听http服务 const socketIO = require("socket.io"); const io = socketIO.listen(httpServer);
// 也可以使用如下方式 const io = require("socket.io")(httpServer, {   // options配置项 });

const fs = require('fs'); const server = require('https').createServer({   key: fs.readFileSync('/tmp/key.pem'),   cert: fs.readFileSync('/tmp/cert.pem') }); const options = { / ... / }; const io = require('socket.io')(server, options);

io.on('connection', socket => { / ... / });
server.listen(3000);

io.on('connection', socket => {   // 监听断开连接   socket.on('disconnect', reason => console.log(reason)) // socket断开监听，disconnect也是保留字段    	// 其他业务监听   socket.on('join', data => console.log(欢迎${data.name}进入直播间)); });

socket.on('disconnect', reason => {   console.log(reason); // 断开原因有很多，可能是用户主动断开，也可能是浏览器直接关闭等 })

3.1.2 客户端

3.2 音视频相关API

3.2.1 navigator.mediaDevices

navigator.mediaDevices.getUserMedia(options) .then(function(stream) {   / use the stream / }) .catch(function(err) {   / handle the error / });

navigator.mediaDevices.getUserMedia({   audio: true,   video: true }) .then(function(stream) {   / use the stream / }) .catch(function(err) {   / handle the error / });

navigator.mediaDevices.getUserMedia({   audio: true,   video: { width: 1280, height: 720 } // 当定义宽高是，视频算是true，请求视频权限 }) .then(function(stream) {   / use the stream / }) .catch(function(err) {   / handle the error / });

其他更多配置可参考：https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

3.2.2 video

<video src="path/to/movie.mp4" c>
您的浏览器不支持 video 标签。
</video>

• autoplay: 如果出现该属性，则视频在就绪后马上播放
• controls：如果出现该属性，则向用户显示控件，比如播放按钮
• loop：如果出现该属性，则当媒介文件完成播放后再次开始播放
• muted：规定视频的音频输出应该被静音
• poster：规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像
• preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性
• src：要播放的视频的 URL
• width：设置视频播放器的宽度，单位px
• height：设置视频播放器的高度，单位px

<video id="local" muted autoplay>
您的浏览器不支持 video 标签。
</video>

<video id="remote" poster="xxx" autoplay>
您的浏览器不支持 video 标签。
</video>

/**
 * 视频流绑定到video节点展示
 * @param {dom} video video节点
 * @param {obj} stream 视频流
 */
const pushStreamToVideo = (video, stream) => {
  video.srcObject = stream;
}
// 获取video节点 const domLocalVideo = $('#local');
// 调用摄像头 navigator.mediaDevices.getUserMedia({   audio: true,   video: true }) .then(stream => {   pushStreamToVideo(domLocalVideo[0], stream); // 实时显示 }) .catch(err => {   alert(getUserMedia() error: ${err.name}) });

/**  * 关闭摄像头  * @param {dom} video video节点  */ const closeCamera = video => {   video.srcObject.getTracks()[0].stop(); // audio   video.srcObject.getTracks()[1].stop(); // video }

3.3 WebRTC

3.3.1 RTCPeerConnection

const pc = new RTCPeerConnection(serverConfig);

const serverConfig = {   iceServers: [     {       urls: 'stun:stun.xten.com'     },     {       urls: 'stun:你的服务器ip:3478', // 见2.1服务器搭建       username: '用户名',       credential: '密码'     }   ] }

(1) onicecandidate = eventHandler 作用：监听RTCPeerConnection实例上发生icecandidate事件，该函数会返回ICE协商结果，我们需要将结果发送给信令服务器，交由信令服务器转发给对方。

pc.onicecandidate = event => {   if (event.candidate) {     sendCandidateToRemotePeer(event.candidate);   } else {     / there are no more candidates coming during this negotiation /   } };

pc.ontrack = event => {   document.getElementById("received_video").srcObject = event.streams[0]; };

async openCall(pc) {   const gumStream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});   for (const track of gumStream.getTracks()) {     pc.addTrack(track);   } }

var pc, sender; navigator.getUserMedia({video: true}, function(stream) {   pc = new RTCPeerConnection();   var track = stream.getVideoTracks()[0];   sender = pc.addTrack(track, stream); });

document.getElementById("closeButton").addEventListener("click", function(event) {   pc.removeTrack(sender);   pc.close(); }, false);

const offerOptions = {   offerToReceiveAudio: true, // 请求接收音频   offerToReceiveVideo: true, // 请求接收视频 }, pc.createOffer(offerOptions)         .then(offer => onCreateOfferSuccess(offer.sdp))         .catch(error => onCreateOfferError());

const answerOptions = {   offerToReceiveAudio: true, // 请求接收音频   offerToReceiveVideo: true, // 请求接收视频 }, pc.createAnswer(answerOptions)         .then(answer => onCreateAnswerSuccess(answer.sdp))         .catch(error => onCreateAnswerError());

3.3.2 RTCSessionDescription

new RTCSessionDescription(rtcDescription)

• type只能设置：‘answer’，‘offer’，‘pranswer’，‘rollback’；
• sdp是标准的SDP会话描述（可由createOffer/createAnswer生成）

3.3.3 RTCIceCandidate

• candidate: 用于连接性检测的对象
• sdpMid: candidate的媒体流的识别标签
• sdpMLineIndex: candidate的媒体流的相关联的SDP描述索引号
• address: 本机IP地址
• relatedAddress: 中继IP
• port: 本机端口
• relatedPort: 中继端口
• component: 候选协议，只有两种情况：RTP(Real-Time Transport Protocol)， RTCP(Real-Time Transport Control Protocol)
• foundation: 来自于STUN服务器的唯一标识符
• priority: 优先级
• tcpType: 如果使用的TCP协议，这个属性及表示TCP的状态
• type: RTCIceCandidateType类型
• usernameFragment: ice-ufrag片段，用于生成ice-pwd，同一ICE进程的连接都将使用的是同一个片段。

四、实战开发

4.1 环境准备

• anywhere: npm i -g anywhere

4.2 信令服务器

4.2.1 搭建项目

{
  "name": "signal-server",
  "version": "1.0.0",
  "author": "Patrick Jun",
  "description": "A webRTC signal server",
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "express-session": "^1.17.1",
    "socket.io": "^2.3.0"
  }
}

app.js

const https = require('https');  // https服务 const fs = require('fs');        // fs const socketIO = require('socket.io');

//读取密钥和签名证书 const options = {   key: fs.readFileSync('keys/server_key.pem'),   cert: fs.readFileSync('keys/server_crt.pem'), }
// 构建https服务器 const apps = https.createServer(options);
const SSL_PORT = 8443;
apps.listen(SSL_PORT);
// 构建signal server const io = socketIO.listen(apps);
// socket监听连接 io.sockets.on('connection', (socket) => {   console.log('连接建立');   // 之后所有业务处理，写在这里面 });

（2）创建证书 在项目文件夹下，创建一个文件夹keys，然后开始生成自签名证书： linux环境下：

openssl req -x509 -newkey rsa:2048 -keyout ./keys/serverkey.pem -out ./keys/servercrt.pem -days 99999 -nodes

windows下：参考 https://letsencrypt.org/zh-cn/docs/certificates-for-localhost/ 修改app.js，将秘钥和签名证书的路径改为你电脑中的绝对路径，例如：

//读取密钥和签名证书 const options = {   key: fs.readFileSync('D://signal-server/keys/server_key.pem'),   cert: fs.readFileSync('D://signal-server/keys/server_crt.pem'), }

（3）运行 在项目根目录下，安装依赖：

npm i

node app.js

4.2.2 房间功能

// socket监听连接 io.sockets.on('connection', (socket) => {   console.log('连接建立');      // 创建/加入房间   socket.on('createAndJoinRoom', (message) => {     const { room } = message;     console.log('Received createAndJoinRoom：' + room);     // 判断room是否存在     const clientsInRoom = io.sockets.adapter.rooms[room];     const numClients = clientsInRoom ? Object.keys(clientsInRoom.sockets).length : 0;     console.log('Room ' + room + ' now has ' + numClients + ' client(s)');     if (numClients === 0) {       // room 不存在 不存在则创建（socket.join）       // 加入并创建房间       socket.join(room);       console.log('Client ID ' + socket.id + ' created room ' + room);

// 发送消息至客户端 [id,room,peers]       const data = {         id: socket.id, //socket id         room: room, // 房间号         peers: [], // 其他连接       };       socket.emit('created', data);     } else {       // room 存在       // 加入房间中       socket.join(room);       console.log('Client ID ' + socket.id + ' joined room ' + room);              // joined告知房间里的其他客户端 [id,room]       io.sockets.in(room).emit('joined', {         id: socket.id, //socket id         room: room, // 房间号       });
// 发送消息至客户端 [id,room,peers]       const data = {         id: socket.id, //socket id         room: room, // 房间号         peers: [], // 其他连接       };       // 查询其他连接       const otherSocketIds = Object.keys(clientsInRoom.sockets);       for (let i = 0; i < otherSocketIds.length; i++) {         if (otherSocketIds[i] !== socket.id) {           data.peers.push({             id: otherSocketIds[i],           });         }       }       socket.emit('created', data);     }   });    });

（2）退出房间 在加入房间监听后面，继续添加：

// 退出房间，转发exit消息至room其他客户端 [from,room] socket.on('exit', (message) => {   console.log('Received exit: ' + message.from + ' message: ' + JSON.stringify(message));   const { room } = message;   // 关闭该连接   socket.leave(room);   // 转发exit消息至room其他客户端   const clientsInRoom = io.sockets.adapter.rooms[room];   if (clientsInRoom) {     const otherSocketIds = Object.keys(clientsInRoom.sockets);     for (let i = 0; i < otherSocketIds.length; i++) {       const otherSocket = io.sockets.connected[otherSocketIds[i]];       otherSocket.emit('exit', message);     }   } });

还有一种情况，当socket连接异常断开时，也需要退出房间：

// socket关闭 socket.on('disconnect', function(reason){   const socketId = socket.id;   console.log('disconnect: ' + socketId + ' reason:' + reason );   const message = {     from: socketId,     room: '',   };   socket.broadcast.emit('exit', message); });

4.2.3 转发功能

// 转发offer消息至room其他客户端 [from,to,room,sdp]
socket.on('offer', (message) => {
  // const room = Object.keys(socket.rooms)[1];
  console.log('收到offer: from ' + message.from + ' room:' + message.room + ' to ' + message.to);
  // 根据id找到对应连接
  const otherClient = io.sockets.connected[message.to];
  if (!otherClient) {
    return;
  }
  // 转发offer消息至其他客户端
  otherClient.emit('offer', message);
});

（2）转发answer

// 转发answer消息至room其他客户端 [from,to,room,sdp] socket.on('answer', (message) => {   // const room = Object.keys(socket.rooms)[1];   console.log('收到answer: from ' + message.from + ' room:' + message.room + ' to ' + message.to);   // 根据id找到对应连接   const otherClient = io.sockets.connected[message.to];   if (!otherClient) {     return;   }   // 转发answer消息至其他客户端   otherClient.emit('answer', message); });

（3）转发candidate

// 转发candidate消息至room其他客户端 [from,to,room,candidate[sdpMid,sdpMLineIndex,sdp]] socket.on('candidate', (message) => {   console.log('收到candidate: from ' + message.from + ' room:' + room + ' to ' + message.to);   // 根据id找到对应连接   const otherClient = io.sockets.connected[message.to];   if (!otherClient) {     return;   }   // 转发candidate消息至其他客户端   otherClient.emit('candidate', message); });

4.3 前端

4.3.1 搭建项目

/** * 连接 */ btnConnect.click(() => { //启动摄像头 if (localStream == null) { openCamera().then(stream => { pushStreamToVideo(domLocalVideo[0], stream); }).catch(e => alert(getUserMedia() error: ${e.name})); } });

/** * 连接 */ btnConnect.click(() => { const roomid = domRoom.val(); // 获取用户输入的房间号 if (!roomid) { alert('房间号不能为空'); return; }; //启动摄像头 if (localStream == null) { openCamera().then(stream => { localStream = stream; // 保存本地视频到全局变量 pushStreamToVideo(domLocalVideo[0], stream); connect(roomid); // 成功打开摄像头后，开始创建或者加入输入的房间号 }).catch(e => alert(getUserMedia() error: ${e.name})); } });

[js] http://www.webrtc.org/native-code/development [android] http://www.webrtc.org/native-code/android [iOS] http://www.webrtc.org/native-code/ios 看看大牛的编译实践： http://chinawebrtc.org/?p=339 http://chinawebrtc.org/?p=340 http://chinawebrtc.org/?p=260 http://chinawebrtc.org/?p=292 http://chinawebrtc.org/?p=391 使用Tokbox瞬间实现在线视频：https://dashboard.tokbox.com/quickstart#1（需要注册申请一个sdk的key生成token,之后就很方便了）国外已经有视频教程了：http://www.pluralsight.com/courses/webrtc-fundamentals（可试看，后需会员） WebRTC在android端的教程：https://tech.appear.in/2015/05/25/Introduction-to-WebRTC-on-Android/ WebRTC在iOS端的教程： https://tech.appear.in/2015/05/25/Getting-started-with-WebRTC-on-iOS/ Play With WebRTC：http://chinawebrtc.org/?p=530 手把手教程： http://io2014codelabs.appspot.com/static/codelabs/webrtc-file-sharing/#1 https://bitbucket.org/webrtc/codelab

• ### 三、高级教程