音视频

在网上找到了一个非常适合入门的教程，分享给有缘人(稍微改了以下布局，并添加了一点内容o(￣︶￣)o)

WebRtc处理过程

实现1v1的通话有4个部分，WebRtc终端（这里理解为浏览器端）、Signal（信令）服务器、STUN/TURN服务器

  • WebRtc终端，负责音视频的采集、编解码、NAT穿越、音视频数据传输 （这里终端暂时看做浏览器，webRtc不止应用在浏览器）
  • Signal服务器，负责信令处理，如有人加入房间、离开房间、媒体协商消息传递等。（类似聊天室的xx加入房间），一般采用WebSocket连接
  • STUN/TURN服务，负责获取WebRtc终端在公网的ip地址，以及NAT穿越失败后的数据中转。（）

用户A和用户B要语音通过大致过程：

  1. 用户A和用户B作为WebRtc终端（浏览器）检测你的设备是否支持音视频数据采集，
  2. 获取音视频数据后加入到信令信令服务器，这样2个用户都加入到一个房间
  3. 用户A会创建RTCPeerConnection对象，该对象将采集到的音视频数据进行编码和通过P2P传送给对方，P2P穿越失败，就使用TURN进行数据中转，有的公司架构是直接用后者进行传输
    音视频采集
    浏览器的getUserMedia方法
1
navigator.mediaDevices.getUserMedia(constraints);

constraints参数视频设置采集分辨率、帧率参数，音频可以设置开启降噪等参数；如设备具备音视频采集能力，它返回的成功的promise里，可以获取到MediaStream对象，并完成以下操作

  1. 本地操作视频流：MediaStream对象存放着采集到的音视频轨，直接赋值给video标签的srcObject属性，就可以本地实现看到摄像头和听到声音。
  2. 拍照：通过canvas的drawImage，将video标签传入
  3. 保存照片：通过canvas.toDataURL生成本地地址，通过a标签下载图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var constraints = { audio: true, video: true };
let media
navigator.mediaDevices
    .getUserMedia(constraints)
    .then((MediaStream) => {
      media = MediaStream;
      const video = document.querySelector("video");
      video.srcObject = MediaStream;
      video.onloadedmetadata = function (e) {
        video.play();
      };
    })
    .catch((e) => {
      console.warn(e, "e");
    });

// 拍照：调用canvas的api，将video标签传入
const video = document.querySelector("video");
document.querySelector("canvas").getContext('2d').drawImage(video, 0, 0,400,300)

// 保存照片
const url = canvas.toDataURL("image/jpeg");
document.createElement('a').href = url;

媒体协商

  • 作用：
    让双方找到共同支持的媒体能力，过程有点像 TCP 的三次握手。

  • 知识点：

    1. 创建连接：
      创建 RTCPeerConnection 对象，它负责端与端之间建立 P2P 连接。
    2. 信令：
      客户端通过信令服务器交换 SDP（Session Description Protocol）信息。SDP 包含编解码方式、传输协议、IP 地址和端口等信息，确保双方能够找到共同支持的媒体能力并进行通信。
    3. Offer：
      在双向通信时，呼叫方发送的 SDP 消息称为 Offer。
    4. Answer：
      在双向通信时，被呼叫方发送的 SDP 消息称为 Answer。

  • 媒体协商过程：

    1. 呼叫方创建 Offer 类型的 SDP 消息后，通过 setLocalDescription 方法保存到本地的 Local 域，再通过信令将 Offer 发给被呼叫方。
    2. 被呼叫方收到 Offer 类型的 SDP 消息后，通过 setRemoteDescription 保存到其 Remote 域。接着，它创建 Answer 类型的 SDP 消息，并通过 setLocalDescription 保存到本地，再将消息发给呼叫方。
    3. 呼叫方收到 Answer 类型的 SDP 消息后，通过 setRemoteDescription 保存到其 Remote 域。

  • 总结：
    媒体协商完成后，WebRTC 底层会收集 Candidate（WebRTC 与远端通信时使用的协议、IP 地址和端口），进行连通性测试，最终建立一条链路。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 呼叫方A
// 创建Offer,本地设置，发给对方
const pcA = new RTCPeerConnection();
pcA.createOffer().then((offerSDP)=>{
    pcA.setLocalDescription(offerSDP);
    sendMessage(offerSDP);
})

// 接受到answer，保存起来
socket.on('message', (message) => {
    if(message.type === 'answer') {
        pcA.setRemoteDescription(new RTCSessionDescription(message))
    }
})


// 被呼叫方B
const pcB = new RTCPeerConnection();
socket.on('message', (message) => {
    if(message.type === 'offer')
    pcB.setRemoteDescription(new RTCSessionDescription(message))
    
    // 创建Answer,本地设置，发给对方
    pcB.createAnswer().then((answerSDP)=>{
        pcB.setLocalDescription(answerSDP);
        sendMessage(answerSDP)
    })
})

连接建立

连接的基本原则

如果A和B连接，C作为服务器

场景一：双方处于同一个网段内（内网）
场景二：双方处于不同点

ICE Candidate（ICE候选者），它表示WebRtc与远端通信使用的协议、ip地址和端口，一般3种方式
host表示本机候选者，内网之间的联通性测试，优先级最高
srflx表示内网主机映射的外网地址和端口，让双发通过P2P进行连接，次优化级
relay表示中继候选者，低优先级

1
2
3
4
5
6
7
{
    address: 'xxx.xxx.xxx.xxx',
    port: 'xxxx',
    type: 'host/srflx/relay',
    protocol: 'UDP/TCP',
    // ...
}

STUN协议

NAT是指网络地址转换，作用就是进行内外网的地址转换。
STUN(session traversal utilities for NAT),一种处理NAT传输的协议，它允许位于NAT后的客户端找出自己的公网地址。
srflx类型的Candidate实际上就是用的经NAT映射后的外网地址，进行P2P连接通信。

TURN协议

relay服务通过TURN协议实现。TURN协议描述了如何获取relay服务器（即TUNR协议）的Candidate过程。通过TURN服务器发送Allocation指令，relay服务就会在服务端分配一个新的relay端口，用于中转UDP数据报。
因为P2P场景有限，其实大部分还是采用relay方式来传输数据。
实现1v1音视频实时直播系统
用户A和用户B之间视频通话过程：

信令服务器

基于nodejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const ws = require('nodejs-websocket');
const roomTableMap = new Map(); // 根据roomId，记录每个房间的成员信息
ws.createServer((socket) => {
    socket.on('text', (str) => {
        // 接收来自客户端的消息
    })

    socket.on('close', (data) => {
        console.log(data);
    })

    socket.on('error', (data) => {
        console.log(data);
    })
}).listen(3000)

建立连接的具体流程

  1. 用户A和用户B，通过WebSocket，连接ws服务，监听回调函数
1
2
3
4
5
6
7
8
9
function createWebScoket(url) {
  ws = new WebSocket(url);
  ws.onopen = (e) => {};
  ws.onmessage = (e) => {
    // 接收来自信令服务器的消息
  };
  ws.onclose = (e) => {};
  ws.onerror = (e) => {};
}
  1. 用户A和用户B先后点击加入房间，根据navigator.mediaDevices.getUserMedia获取本地的音视频流，再通过ws.send将roomId、userId等信息传递给信令服务器
1
2
3
4
5
6
7
8
9
10
11
roomId = document.getElementById('roomBox').value // 输入框取房间号
// 拿到媒体设备流，显示在本地
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((stream) => {
    ws.send(JSON.stringify({
      type: 'join',
      roomId,
      uid: localUserId
    }))
    localStream = stream;
    localVideo.srcObject = stream;
})
  1. 信令服务器先后收到用户A和用户B消息，将该用户加入房间，当用户B加入的时候，就通知到房间里用户A
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
socket.on('text', (data) => {
    const { type = '', roomId, uid, remoteUid} = JSON.parse(data);
    if (type === 'join') {
        let roomMap = roomTableMap.get(roomId);
        if (!roomMap) {
            roomMap = new Map();
            roomTableMap.set(roomId, roomMap)
        }
        roomMap.set(uid, {roomId,uid,socket})
        for (const [key, value] of roomMap) {
            if(key !== uid) {
                value.socket.sendText(JSON.stringify({ type: 'peer-join', remoteUid: uid }));
            }
        }
    }
})
  1. 用户A发现此时房间有其他人，会收到消息，type=“peer-join”，会先创建RTCPeerConnection对象，再监听onicecandidate（收到网络协商相关消息）和ontrack（收到远端音视频流）,将本地音视频流添加到对象中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
ws.onmessage = (e) => {
    if (type === 'peer-join') {
        pc = new RTCPeerConnection(null);
        pc.onicecandidate = (e) => {
            if (e.candidate) {
              ws.send(JSON.stringify({
                type: 'candidate',
                roomId,
                uid: localUserId,
                remoteUid: remoteUserId,
                candidate: e.candidate
              }))
            }
        }
        pc.ontrack = (e) => {
            remoteStream = e.streams[0];
            remoteVideo.srcObject = remoteStream;
        }
        localStream.getTracks().forEach(track => {
        pc.addTrack(track, localStream)
        });
    }
}
  1. 用户A再通过RTCPeerConnection的实例，创建offer（sdp信息用于协商音视频编码协议），setLocalDescription设置在本地，再发送到信令服务器,转给用户B
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ws.onmessage = (e) => {
    if (type === 'peer-join') {
      pc.createOffer().then(sdp => {
          pc.setLocalDescription(sdp).then(() => {
              ws.send(JSON.stringify({
                type: 'offer',
                roomId,
                uid: localUserId,
                remoteUid,
                sdp
              }))
            })
        })
    }
}
  1. 信令服务器收到消息，type=‘offer’时，转发给用户B
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
socket.on('text', (data) => {
    const { type = '', roomId, uid, sdp = '' } = JSON.parse(str);
    if(type === 'offer') {
        let roomMap = roomTableMap.get(roomId);
        for (const [key, value] of roomMap) {
            if (key !== uid) {
                value.socket.sendText(JSON.stringify({
                  type,
                  roomId,
                  remoteUid: uid,
                  sdp
                }))
              }
        }
    }
})
  1. 用户B，收到信令服务器发到type=‘offer’消息，同样先创建RTCPeerConnection实例和监听，再监听onicecandidate和ontrack，将本地音视频流添加到实例中，代码同上面一致
    同时用户B，会将用户A的sdp消息，setRemoteDescription到远程，自己创建answer的sdp信息，发送给服务端，转给用户A
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ws.onmessage = (e) => {
    if (type === 'offer') {
        pc.setRemoteDescription(new RTCSessionDescription(sdp));
        pc.createAnswer().then(sdp => {
            pc.setLocalDescription(sdp).then(() => {
              ws.send(JSON.stringify({
                type: 'answer',
                roomId,
                uid: localUserId,
                remoteUid,
                sdp
              }))
            })
        })
    }
}
  1. 最后用户A收到，type=‘answer’的消息，setRemoteDescription到远程
    双方收到ontrack回调事件，获取到对方码流的对象句柄
    双方都开始请求打洞，通过onicecandidate获取到打洞信息（candidate）并通过信令服务器发送给对方
    如果p2p能成功则进行通话，不成功则进行中继转发通话(这里并没有配置服务器，所以只能进行内网的通信)

中继服务器的配置

这里我使用了开源的coturn服务器

添加pc = new RTCPeerConnection()这个方法的参数

1
2
3
4
5
6
7
8
9
10
11
12
13
const configuration = {
  iceTransportPolicy: 'relay', //测试的时候使用relay, 发布到公网时用all
  iceServers: [
    {
      urls:  ['stun:192.168.75.128:3478', 'stun:stun.l.google.com:19302'] //可以按照这样的格式填写多个
    },
    {
      urls: 'turn:192.168.75.128:3478', //你的服务器
      username: 'wqe', //用户名
      credential: '1234567' //密码
    }
  ]
};

完整代码

前端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!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>
</head>
<body>
  <div>
    <input id="roomBox" type="text">
    <button id="joinBtn">加入</button>
    <button id="leaveBtn">离开</button>
  </div>
  <div>
    <video id="localVideo" autoplay muted playsinline></video>
    <video id="remoteVideo" autoplay playsinline></video>
  </div>
  <script>
    const localVideo = document.getElementById('localVideo');
    const remoteVideo = document.getElementById('remoteVideo');
    const joinBtn = document.getElementById('joinBtn');
    const leaveBtn = document.getElementById('leaveBtn');
    const localUserId = Math.random().toString(36).slice(2);
    let roomId = -1;
    let remoteUserId = -1;
    let localStream = null;
    let remoteStream = null;
    let ws = null;
    let pc = null;
    function createWebScoket(url) {
      ws = new WebSocket(url);
      ws.onopen = (e) => {
        console.log("onopen", e)
      }
      ws.onmessage = (e) => {
        const { type, remoteUid = '', sdp, candidate } = JSON.parse(e.data);
        if (type === 'peer-join') {
          remoteUserId = remoteUid;
          if (!pc) createConnect();
          pc.createOffer().then(sdp => {
            pc.setLocalDescription(sdp).then(() => {
              ws.send(JSON.stringify({
                type: 'offer',
                roomId,
                uid: localUserId,
                remoteUid,
                sdp
              }))
            })
          })
        } else if (type === 'peer-leave') {
          remoteVideo.srcObject = null;
        } else if (type === 'offer') {
          if (!pc) createConnect();
          pc.setRemoteDescription(new RTCSessionDescription(sdp))
          pc.createAnswer().then(sdp => {
            pc.setLocalDescription(sdp).then(() => {
              ws.send(JSON.stringify({
                type: 'answer',
                roomId,
                uid: localUserId,
                remoteUid,
                sdp
              }))
            })
          })
        } else if (type === 'answer') {
          if (!pc) createConnect();
          pc.setRemoteDescription(new RTCSessionDescription(sdp))
        } else if (type === 'candidate') {
          pc.addIceCandidate(new RTCIceCandidate(candidate))
        }
      }
      ws.onclose = (e) => {
        console.log("onclose", e)
      }
      ws.onerror = (e) => {
        console.log("onerror", e)
      }
    }
    createWebScoket('ws://127.0.0.1:3000');
    // 加入房间
    joinBtn.onclick = () => {
      roomId = document.getElementById('roomBox').value // 输入框取房间号
      // 拿到媒体设备流，显示在本地
      navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((stream) => {
        ws.send(JSON.stringify({
          type: 'join',
          roomId,
          uid: localUserId
        }))
        localStream = stream;
        localVideo.srcObject = stream;
      })
    }
    function createConnect() {
      pc = new RTCPeerConnection(null);
      pc.onicecandidate = (e) => {
        if (e.candidate) {
          ws.send(JSON.stringify({
            type: 'candidate',
            roomId,
            uid: localUserId,
            remoteUid: remoteUserId,
            candidate: e.candidate
          }))
        }
      }
      pc.ontrack = (e) => {
        remoteStream = e.streams[0];
        remoteVideo.srcObject = remoteStream;
      }
      localStream.getTracks().forEach(track => {
        pc.addTrack(track, localStream)
      });
    }
    // 离开
    leaveBtn.onclick = () => {
      ws.send(JSON.stringify({
        type: 'leave',
        roomId,
        uid: localUserId
      }))
      remoteVideo.srcObject = null;
      localStream && localStream.getTracks().forEach(track => track.stop())
      localVideo.srcObject = null;
      if(pc) {
        pc.close();
        pc = null;
      }
    }
  </script>
</body>
</html>

信令服务器完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
const ws = require('nodejs-websocket');
const roomTableMap = new Map();
ws.createServer((socket) => {
    socket.on('text', (str) => {
        const { type = '', roomId, uid, remoteUid, candidate = '', sdp = '' } = JSON.parse(str);
        if (type === 'join') {
            let roomMap = roomTableMap.get(roomId);
            if (!roomMap) {
                roomMap = new Map();
                roomTableMap.set(roomId, roomMap)
            }
            const client = {
                roomId,
                uid,
                socket
            }
            roomMap.set(uid, client)
            for (const [key, value] of roomMap) {
                if (key !== uid) {
                    // 通知其他人，有人进入房间了
                    value.socket.sendText(JSON.stringify({ type: 'peer-join', remoteUid: uid }));
                }
            }
        } else if (type === 'leave') {
            let roomMap = roomTableMap.get(roomId);
            roomMap.delete(uid);
            for (const [key, value] of roomMap) {
                value.socket.sendText(JSON.stringify({ type: 'peer-leave', remoteUid: uid }));
            }
        } else if (['offer', 'answer', 'candidate'].includes(type)) {
            let roomMap = roomTableMap.get(roomId);
            for (const [key, value] of roomMap) {
              if (key !== uid) {
                value.socket.sendText(JSON.stringify({
                  type,
                  roomId,
                  remoteUid: uid,
                  sdp,
                  candidate
                }))
              }
            }
        }
    })
    socket.on('close', (data) => {
        console.log(data);
    })
    socket.on('error', (data) => {
        console.log(data);
    })
}).listen(3000)

最后

本文只是webrtc进行一个初步的了解，参考了<<WebRtc音视频实时互动技术原理>>书籍和b站视频，对于大家如果有所帮助，欢迎点赞~

作者：竹业
链接：https://juejin.cn/post/7218532789195702333
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

说些什么吧！

valine