转载地址：https://blog.csdn.net/leytton/article/details/76836265
1、你将学到
- 使用Socket.IO在Node.js上运行一个WebRTC服务
- 使用信令服务在WebRTC客户端之间交换元数据.
完整示例代码在 step-05 目录下.
2、HTML和JavaScript代码
index.html 文件:
-
<!DOCTYPE html> -
<html> -
<head> -
<title>Realtime communication with WebRTC</title> -
<link rel="stylesheet" href="/css/main.css" /> -
</head> -
<body> -
<h1>Realtime communication with WebRTC</h1> -
<div id="videos"> -
<video id="localVideo" autoplay muted></video> -
<video id="remoteVideo" autoplay></video> -
</div> -
<script src="/socket.io/socket.io.js"></script> -
<script src="js/lib/adapter.js"></script> -
<script src="js/main.js"></script> -
</body> -
</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、拓展
- 这个应用仅支持一对一视频聊天. 你如何设计一个房间内的多人视频聊天?
- 示例代码中房间名foo是写死的. 如何更好地支持其他房间名?
- 用户之间如何分享房间名? 尝试设计分享房间名的方案.
- 你能够如何改变扩展这个应用呢
5、你学到的
- 使用Socket.IO在Node.js上运行一个WebRTC服务
- 使用信令服务在WebRTC客户端之间交换元数据.
完整示例代码在 step-05 目录下.
6、建议
- 你可以在 chrome://webrtc-internals 链接中查看WebRTC统计调试数据.
- 可以用 test.webrtc.org 网页来检测你的PC或者手机浏览器是否支持WebRTC本地环境和调用摄像头.
- 如果因为缓存问题导致错误，可以尝试:
- 刷新网页
- 重启浏览器
- 执行
npm cache clean命令.
7、下一节
拍照并获取图片数据,传输到远程客户端.
4619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
