WebRTC实时通信系列教程5 RTCPeerConnection传输视频

清疚 2022-05-17 11:56 235阅读 0赞

转载地址：[https://blog.csdn.net/leytton/article/details/76691543][https_blog.csdn.net_leytton_article_details_76691543]

## 1、大纲 ##

在这一节中你将弄明白如何:

*  利用 [adapter.js][] 解决WebRTC在浏览器中的兼容问题.
 *  使用RTCPeerConnection API传输视频.
 *  控制媒体捕获和传输.

这一节的示例代码在 step-2 文件夹中.

## 2、什么是RTCPeerConnection? ##

RTCPeerConnection是WebRTC调用进行音视频传输和数据通信的API.

这个案例将在同一页面中的两个RTCPeerConnection对象(peers)之间建立连接。

没有什么实际用途,但有利于理解RTCPeerConnection是如何工作的。

## 3、添加video标签和控制按钮 ##

在 index.html 文件里，放置两个video标签和三个按钮:

1.  `<video id="localVideo" autoplay></video>`
2.  `<video id="remoteVideo" autoplay></video>`
3.  
4.  `<div>`
5.  `<button id="startButton">Start</button>`
6.  `<button id="callButton">Call</button>`
7.  `<button id="hangupButton">Hang Up</button>`
8.  `</div>`

一个video标签将会用于展示 getUserMedia() 获取到的视频流另一个video标签将会用于展示 RTCPeerconnection 获取到的视频流. (也就是一个用于展示本地视频流一个用于展示远程视频流)

## 4、引入adapter.js文件 ##

在 main.js 文件引入前引入 adapter.js 文件:

Index.html 现在是这个样子:

1.  `<!DOCTYPE html>`
2.  `<html>`
3.  
4.  `<head>`
5.  
6.  `<title>Realtime communication with WebRTC</title>`
7.  
8.  `<link rel="stylesheet" href="css/main.css" />`
9.  
10. `</head>`
11. 
12. `<body>`
13. 
14. `<h1>Realtime communication with WebRTC</h1>`
15. 
16. `<video id="localVideo" autoplay></video>`
17. `<video id="remoteVideo" autoplay></video>`
18. 
19. `<div>`
20. `<button id="startButton">Start</button>`
21. `<button id="callButton">Call</button>`
22. `<button id="hangupButton">Hang Up</button>`
23. `</div>`
24. 
25. `<script src="js/lib/adapter.js"></script>`
26. `<script src="js/main.js"></script>`
27. 
28. `</body>`
29. 
30. `</html>`

## 5、修改RTCPeerConnection代码 ##

把 main.js 替换成 step-02 文件夹里的版本.

并不建议直接copy, 但为了跑通RTCPeerConnection坚持到底那也是没办法的事啦.

等会我们将会解释代码原理.

## 6、创建连接 ##

打开 index.html 文件, 点击【Start】 按钮来获取你的本地摄像头, 再点击 【Call】 按钮来创建点对点连接.你应该能在另一个video标签看到与你摄像头相同的视频. 查看浏览器控制台可以看到WebRTC日志.

## 7、工作原理 ##

这里就说来话长了...

WebRTC 在其客户端之间使用 RTCPeerConnection API 来创建视频流连接, 称作 peers.

在这个案例中, 两个 RTCPeerConnection 对象为 pc1 和 pc2.

在peers之间创建通话需要三个步骤:

*  在peers两端分别创建 RTCPeerConnection , 并通过getUserMedia()添加本地视频流.
 *  获取并分享网络信息: 这些待连接的终端被称为 [ICE][] 候选者(candidates).
 *  获取并分享本地和远程描述(descriptions): 关于本地媒体的 [SDP][] 格式元数据.

你可以想像 Alice 和 Bob 想要通过 RTCPeerConnection 进行视频聊天.

首先, Alice 和 Bob 交换网络信息. '寻找候选者'(finding candidates) 正如通过 [ICE][] 框架寻找网络地址和端口的过程.

1.  Alice 创建一个 RTCPeerConnection 对象，这个对象有个 onicecandidate 事件. 这对应了 main.js 文件中的如下代码:

1.  `pc1 = new RTCPeerConnection(servers);`
2.  `trace('Created local peer connection object pc1');`
3.  `pc1.onicecandidate = function(e) {`
4.  `onIceCandidate(pc1, e);`
5.  `};`

这个 servers 参数 在本例中没有用到.你可以用它来指定STUN和TURN服务器

WebRTC 被设计为点对点工作模式, 所以用户之间是尽可能地通过最短路线进行连接. 然而, 在现实世界当中: 客户端应用需要穿透 [NAT 网关][NAT] 和防火墙, 并且点对点网络需要握手来防止直接连接失败.

在这一过程中, WebRTC APIs 使用STUN服务器来获取计算机IP地址和TURN服务器来保证点对点连接成功.详情请看 [WebRTC in the real world][] .

1.  Alice 调用 getUserMedia() 并通过以下语句添加视频流:

pc1.addStream(localStream);

1.  当网络候选(network candidates)可用时，步骤1的 onicecandidate 将会被调用.
2.  Alice 发送序列化的候选数据(candidate data)给 Bob. 在真实应用中, 这个过程 (称作信令传输 signaling) 通过消息服务器(websokect等)进行 – 在后面的小节中我们将演示如何做. 当然在这个实验小节中, 两个 RTCPeerConnection 对象在同一页面可以直接通信不需要额外的消息服务器.
3.  当 Bob 从 Alice 那获取到候选数据, 他会调用 addIceCandidate(), 来添加候选者(candidate) 到远程 peer description:

1.  `function onIceCandidate(pc, event) {`
2.  `if (event.candidate) {`
3.  `getOtherPc(pc).addIceCandidate(`
4.  `new RTCIceCandidate(event.candidate)`
5.  `).then(`
6.  `function() {`
7.  `onAddIceCandidateSuccess(pc);`
8.  `},`
9.  `function(err) {`
10. `onAddIceCandidateError(pc, err);`
11. `}`
12. `);`
13. `trace(getName(pc) + ' ICE candidate: \n' + event.candidate.candidate);`
14. `}`
15. `}`

WebRTC peers 同样需要获取并交换本地和远程音视频媒体信息, 例如分辨率和编码器功能. 信令通信通过交换媒体blob元数据配置信息, 称作一次 offer 和一次 answer, 通信使用会话描述协议(Session Description Protocol) 格式, 即 [SDP][].

1.  Alice 调用 RTCPeerConnection createOffer() 方法. JS的promise对象会返回一个 RTCSessionDescription: Alice的本地会话描述（local session description）:

1.  `pc1.createOffer(`
2.  `offerOptions`
3.  `).then(`
4.  `onCreateOfferSuccess,`
5.  `onCreateSessionDescriptionError`
6.  `);`

1.  如果成功, Alice 调用 setLocalDescription() 设置本地会话描述并且通过信令通道发送这个会话描述给Bob.
2.  Bob 调用 setRemoteDescription() 来设置Alice发送给他的会话描述.
3.  Bob 调用 RTCPeerConnection 的 createAnswer() 方法, 传递从Alice获取的远程描述, 那么能够产生回应Alice的本地会话. createAnswer() 方法中的promise对象返回一个RTCSessionDescription: Bob 将其设为本地描述并发送给Alice.
4.  当Alice获取到Bob的会话描述, 她调用setRemoteDescription()将其设置为远程描述.

1.  `function onCreateOfferSuccess(desc) {`
2.  `pc1.setLocalDescription(desc).then(`
3.  `function() {`
4.  `onSetLocalSuccess(pc1);`
5.  `},`
6.  `onSetSessionDescriptionError`
7.  `);`
8.  `pc2.setRemoteDescription(desc).then(`
9.  `function() {`
10. `onSetRemoteSuccess(pc2);`
11. `},`
12. `onSetSessionDescriptionError`
13. `);`
14. `// Since the 'remote' side has no media stream we need`
15. `// to pass in the right constraints in order for it to`
16. `// accept the incoming offer of audio and video.`
17. `pc2.createAnswer().then(`
18. `onCreateAnswerSuccess,`
19. `onCreateSessionDescriptionError`
20. `);`
21. `}`
22. 
23. `function onCreateAnswerSuccess(desc) {`
24. `pc2.setLocalDescription(desc).then(`
25. `function() {`
26. `onSetLocalSuccess(pc2);`
27. `},`
28. `onSetSessionDescriptionError`
29. `);`
30. `pc1.setRemoteDescription(desc).then(`
31. `function() {`
32. `onSetRemoteSuccess(pc1);`
33. `},`
34. `onSetSessionDescriptionError`
35. `);`
36. `}`

1.  搞定!

PS:这里补充一张原理图，摘自《[WebRTC手记之初探][WebRTC]》

![20170807184438859][]

## 8、扩展 ##

1.  chrome浏览器打开 chrome://webrtc-internals. 它提供了WebRTC统计和调试数据所有的 Chrome URLs. (打开chrome://about能列出所有的Chrome内部地址)
2.  页面CSS样式:

*  让视频并列.
 *  让按钮有相同宽度和更大字体.
 *  确保移动端显示兼容性.

1.  通过Chrome开发工具控制台, 查看 localStream, pc1 和 pc2.
2.  通过控制台, 查看 pc1.localDescription. 观察SDP格式

## 9、你学到的 ##

在这一节中你学习了如何:

*  利用 [adapter.js][] 解决WebRTC在浏览器中的兼容问题.
 *  使用RTCPeerConnection API传输视频.
 *  控制媒体捕获和传输.
 *  客户端之间分享媒体和网络信息来创建WebRTC通信

这一节的示例代码在 step-2 文件夹中.

## 10、拓展 ##

*  这一节要学习的东西太多了! 你可以在 [webrtc.org/start][webrtc.org_start] 找到更多介绍RTCPeerConnection的资源, 这个页面有一些Javascript框架的建议 — 如果你想要使用 WebRTC, 而不想研究它的接口.
 *  你可以在[adapter.js GitHub repo][adapter.js] 找到更多关于adapter.js的知识.
 *  想要知道世界上最好的视频聊天应用什么样子? 请看 AppRTC, 它是WebRTC项目的典型应用: [app][], [code][]. 通信建立时间小于500 ms.

## 11、最佳实践 ##

*  使用新的基于Promise的APIs， [adapter.js][] 解决浏览器兼容性.

## 12、接下来 ##

这一节展示了使用WebRTC在peers之间进行视频传输

在下一节中将展示如何使用RTCDataChannel传输任意数据。

[https_blog.csdn.net_leytton_article_details_76691543]: https://blog.csdn.net/leytton/article/details/76691543
[adapter.js]: https://github.com/webrtc/adapter
[ICE]: http://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment
[SDP]: http://en.wikipedia.org/wiki/Session_Description_Protocol
[NAT]: http://en.wikipedia.org/wiki/NAT_traversal
[WebRTC in the real world]: http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/
[WebRTC]: http://www.cnblogs.com/fangkm/p/4364553.html
[20170807184438859]: /images/20220517/77e678b00ffa42f69094a0ccdf78efe7.png
[webrtc.org_start]: https://webrtc.org/start
[app]: https://appr.tc/
[code]: https://github.com/webrtc/apprtc