明確一下目標,A 作為輸出端,需要獲取到本地流並添加到自己的 RTCPeerConnection;B 作為呼叫端,並沒有輸出的需求,因此只需要接收流。 * 創建媒體流
頁面佈局很簡單,就是兩個 video 標籤,分別代表 A 和 B。所以我們直接看代碼,雖然源碼是用 Vue 構建的,但是並沒有用到特別的 API,整體上和 es6 的 class 語法相差不大,而且都有詳細的注釋,所以建議沒有 Vue 基礎的同學可以直接當成 es6 來閱讀。示例 源碼庫 webrtc-stream
這基本就是之前重複過好幾次的流程用代碼寫出來而已,看到這裡,思路應該比較清晰了。不過有一點需要說明一下,就是現在這種情況,A 作為呼叫端,B 一樣是可以拿到 A 的媒體流的。因為連接一旦建立了,就是雙向的,只不過 B 初始化 peer 的時候沒有添加本地流,所以 A 不會有 B 的媒體流。
想必基本流程大家都已經熟悉了,通過圖解、實例來來回回講了好幾遍。所以趁熱打鐵,我們這次把服務加上,做一個真正的點對點連接。在看下面的文章之前,我希望你有一點點 Koa 和 http://Scoket.io 的基礎,瞭解一些基本 API 即可。不熟悉的同學也不要緊,現在看也來得及,Koa、Socke.io,或者可以參考我之前的文章 Vchat - 一個社交聊天系統(vue + node + mongodb)。