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

<!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、下一节

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

二、原文

摘自https://codelabs.developers.google.com/codelabs/webrtc-web/#7

8. Combine peer connection and signaling

What you'll learn

In this step you'll find out how to:

Run a WebRTC signaling service using Socket.IO running on Node.js
Use that service to exchange WebRTC metadata between peers.

A complete version of this step is in the step-05 folder.

Replace HTML and JavaScript

Replace the contents of index.html with the following:

<!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>

Replace js/main.js with the contents of step-05/js/main.js.

Run the Node server

If your Node server is not running, start it by calling the following command in the work directory

node index.js

(Make sure you're using the version of index.js from the previous step that implements Socket.IO.)

From your browser, open localhost:8080.

Open localhost:8080 again, in a new tab or window. One video element will display the local stream fromgetUserMedia()and the other will show the 'remote' video streamed via RTCPeerconnection.

You'll need to restart your Node server each time you close a client tab or window.

View logging in the browser console.

Bonus points

This application supports only one-to-one video chat. How might you change the design to enable more than one person to share the same video chat room?
The example has the room name foo hard coded. What would be the best way to enable other room names?
How would users share the room name? Try to build an alternative to sharing room names.
How could you change the app

What you learned

In this step you learned how to:

Run a WebRTC signaling service using Socket.IO running on Node.js
Use that service to exchange WebRTC metadata between peers.

A complete version of this step is in the step-05 folder.

Tips

WebRTC stats and debug data are available from chrome://webrtc-internals.
test.webrtc.org can be used to check your local environment and test your camera and microphone.
If you have odd troubles with caching, try the following:
Do a hard refresh by holding down ctrl and clicking the Reload button
Restart the browser
Run npm cache clean from the command line.

Next up

Find out how to take a photo, get the image data, and share that between remote peers.

posted @ 2017-08-07 15:18 Leytton 阅读(593) 评论(0) 编辑收藏举报

刷新页面返回顶部

不亦的博客