WebRTC实时通信系列教程8 打通P2P连接和信令通信

小咪咪 2022-05-17 11:57 201阅读 0赞

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

## 1、你将学到 ##

*  使用Socket.IO在Node.js上运行一个WebRTC服务
 *  使用信令服务在WebRTC客户端之间交换元数据.

完整示例代码在 step-05 目录下.

## 2、HTML和JavaScript代码 ##

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. `<div id="videos">`
17. `<video id="localVideo" autoplay muted></video>`
18. `<video id="remoteVideo" autoplay></video>`
19. `</div>`
20. 
21. `<script src="/socket.io/socket.io.js"></script>`
22. `<script src="js/lib/adapter.js"></script>`
23. `<script src="js/main.js"></script>`
24. 
25. `</body>`
26. 
27. `</html>`

将 main.js 文件内容替换成 step-05/js/main.js 里的内容.

## 3、运行Node服务器 ##

在 work 目录下使用以下命令行运行Node服务器:

node index.js

(确保你使用的的 index.js 文件中是上一节中实现了Socket.IO的代码.)

浏览器打开 localhost:8080.

在新标签中再次打开 localhost:8080 .一个video标签将会用于展示 getUserMedia() 获取到的视频流另一个video标签将会用于展示 RTCPeerconnection 获取到的远程视频流.

注意：每次关闭一个客户端标签或窗口后你需要重启Node服务器.

在浏览器JavaScript控制台查看日志输出.

###  ###

## 4、拓展 ##

1.  这个应用仅支持一对一视频聊天. 你如何设计一个房间内的多人视频聊天?
2.  示例代码中房间名foo是写死的. 如何更好地支持其他房间名?
3.  用户之间如何分享房间名? 尝试设计分享房间名的方案.
4.  你能够如何改变扩展这个应用呢

## 5、你学到的 ##

*  使用Socket.IO在Node.js上运行一个WebRTC服务
 *  使用信令服务在WebRTC客户端之间交换元数据.

完整示例代码在 step-05 目录下.

## 6、建议 ##

*  你可以在 chrome://webrtc-internals 链接中查看WebRTC统计调试数据.
 *  可以用 [test.webrtc.org][] 网页来检测你的PC或者手机浏览器是否支持WebRTC本地环境和调用摄像头.
 *  如果因为缓存问题导致错误，可以尝试:
 *  刷新网页
 *  重启浏览器
 *  执行 `npm cache clean` 命令.

## 7、下一节 ##

拍照并获取图片数据,传输到远程客户端.

[https_blog.csdn.net_leytton_article_details_76836265]: https://blog.csdn.net/leytton/article/details/76836265
[test.webrtc.org]: https://test.webrtc.org/