通過WebRTC進行實時通信-結合對等連接和信令
- 2020 年 4 月 2 日
- 筆記
用內存的內容替換 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="https://webrtc.github.io/adapter/adapter-latest.js"></script> <script src="js/main.js"></script> </body> </html>
用 step-05/js/main.js替換 js/main.js。
運行 Node.js 服務
如果您沒有從工作目錄中關注此codelab，則可能需要安裝step-05文件夾或當前工作文件夾的依賴項。從你的工作目錄中運行下面的命令：
npm install
一旦安裝了，如果你的Node.js服務沒有運行，調用下面的命令在你的工作目錄下啟動它：
node index.js
確保你正在使用的是上一步Socket.IO實現的 index.js版本。對於更多的關於Node和Socket.IO的信息，查看一下「建立信令服務去交換消息」一節。
在你的瀏覽器上輸入 localhost:8080。
在窗中的新 tab中再次輸入localhost:8080。一個視頻元素將顯示從getUserMedia()獲取的本地流，而另一個將通地 RTCPeerConnection顯示'遠端'視頻流。
你需要重起你的 Node.js 服務，在每次你關閉tab或窗口時。
在瀏覽器console中查看日誌。
點滴
- 該應用僅支持1對1的視頻聊天，你可以改變這個設計使更多的人共享同一個視頻嗎？
- 這個例子有一個房間名為
foo的硬編碼，有更好的方法開啟另一個房間名嗎？ - 用戶間如何共享房間名？嘗試建立一個共享房間名稱的替代方案。
- 如何改變應用？
你學到什麼
在該步驟中你學會了如何：
- 使用在Node.js上的 Socket.IO運行 WebRTC信令服務。
- 使用該服務在用戶間交換WebRTC 元數據。
本步驟的完整例子在step-05目錄下。
提示
- WebRTC 將態和調試數據可以在chrome://webrtc-internals查看。
- test.webrtc.org可用於查測你的本地環境和測試你的camera及microphone。
- 如果您遇到奇怪的緩存問題，請嘗試以下方法：
- 按住ctrl並單擊「重新加載」按鈕進行硬刷新
- 重啟瀏覽器
- 在命令行運行npm cache clean
下一步
了解如何拍攝照片，獲取圖像數據以及在遠程同伴之間共享照片。
