谷歌致力於推進種族平等的黑人社區。 怎麼看。
本頁面由 Cloud Translation API 翻譯而成。
Switch to English

火力地堡+的WebRTC程式碼實驗室

1.簡介

在本程式碼實驗室中,您將學習如何建立使用瀏覽器和雲公司的FireStore為信令的WebRTC API一個簡單的視頻聊天應用。該應用程序被稱為FirebaseRTC和作品作為一個簡單的例子,將教你建立的WebRTC功能的應用程序的基礎知識。

你將學習

  • 在使用WebRTC技術的Web應用程序啟動視頻通話
  • 信令使用雲公司的FireStore遠程方

你需要什麼

開始本程式碼實驗室之前,請確保您已安裝:

  • NPM通常自帶的Node.js - 節點LTS推薦

2.創建並設置了火力地堡項目

創建一個火力地堡項目

  1. 在火力地堡控制台 ,單擊添加項目,然後命名火力地堡項目FirebaseRTC。

還記得項目ID為您的火力地堡項目。

  1. 點擊創建項目。

那你要構建的應用程序使用提供了兩個火力地堡服務網站:

  • 雲公司的FireStore保存在雲上的結構化數據,並得到即時通知當數據被更新
  • 火力地堡託管到主機並為您的靜態資產

對於這個特定的程式碼實驗室中,你已經配置火力地堡中你會被克隆的項目託管。然而,對於雲計算公司的FireStore,我們會引導您完成配置和啟用使用火力地堡控制台的服務。

啟用雲公司的FireStore

應用程序使用雲計算公司的FireStore保存聊天消息和接收新的聊天消息。

你將需要啟用雲計算公司的FireStore:

  1. 在火力地堡控制台菜單的開發部分,單擊數據庫。
  2. 單擊雲公司的FireStore窗格中創建數據庫
  3. 在測試模式選項選擇開始 ,然後單擊閱讀安全規則的免責條款後啟用。

測試模式,確保您可以在開發過程中自由寫入到數據庫中。我們將讓我們的數據庫更本程式碼實驗室今後的安全上。

3.獲取示例代碼

克隆命令行GitHub的庫:

 git clone https://github.com/webrtc/FirebaseRTC
 

示例代碼應該已經克隆到火力-RTC-web目錄。確保您的命令行從該目錄從現在開始運行:

 cd firebase-rtc-web
 

導入啟動應用程序

打開火力-RTC-網上所有文件在編輯器中,並按照下面的說明更改。該目錄包含了它由一個尚未功能的WebRTC應用程序的代碼實驗室的啟動代碼。我們會讓整個本程式碼實驗室它的功能。

4.安裝火力地堡的命令行界面

在火力地堡命令行界面(CLI),可以在本地提供您的網絡應用和部署Web應用火力地堡託管。

  1. 通過運行以下命令故宮安裝CLI: sh npm -g install firebase-tools
  1. 核實運行以下命令,該命令行已正確安裝: sh firebase --version

確保火力地堡CLI的版本是v6.7.1或更高版本。

  1. 通過運行以下命令授權火力地堡CLI: sh firebase login

你已經設置了Web應用程序模板來拉你的應用程序的配置,以火力地堡從您的應用程序的本地目錄和文件的託管。但要做到這一點,你需要你的應用程序與你的火力地堡項目相關聯。

  1. 與你的火力地堡項目通過運行以下命令關聯您的應用程序: sh firebase use --add

  2. 提示時,選擇您的項目編號,然後給你的火力地堡項目的別名。

如果您有多個環境(生產,分期等)的別名是非常有用的。然而,對於本程式碼實驗室,就讓我們用的別名default

  1. 按照您的命令行的其餘指令。

5.運行本地服務器

你準備好真正的我們的應用程序開始工作!讓我們在本地運行的應用程序!

  1. 運行以下火力地堡CLI命令: sh firebase serve --only hosting

  2. 您的命令行應顯示以下回應: hosting: Local server: http://localhost:5000

我們使用的火力地堡主機模擬器在本地提供我們的應用程序。 Web應用程序現在應該可以從http://本地主機:5000。

  1. 在HTTP打開你的應用程序://本地主機:5000。

您應該看到您已連接到您的火力地堡項目FirebaseRTC的副本。

該應用程序已經自動連接到您的火力地堡項目。

6.創建一個新的房間

在這種應用中,每個視頻聊天會話被稱為一個房間。用戶可以通過點擊在他們的應用程序的按鈕創建一個新的空間。這將生成一個ID,遠程方可以使用它來加入同一個房間。的ID被用作在雲中的FireStore鍵每個房間。

每間客房都將包含RTCSessionDescriptions的報價都和答案,以及與各黨候選人ICE兩個獨立的集合。

你的首要任務是落實遺漏碼創建一個新的空間與主叫方的最初報價。開放public/app.js並找到註釋// Add code for creating a room here ,並添加以下代碼:

 const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);

const roomWithOffer = {
    offer: {
        type: offer.type,
        sdp: offer.sdp
    }
}
const roomRef = await db.collection('rooms').add(roomWithOffer);
const roomId = roomRef.id;
document.querySelector('#currentRoom').innerText = `Current room is ${roomId} - You are the caller!`
 

第一行創建一個RTCSessionDescription將代表來自來電的報價。這則設置為本地的描述,最後寫入到雲公司的FireStore新的房間對象。

接下來,我們會聽取更改到數據庫並在已添加了來自被叫應答檢測。

 roomRef.onSnapshot(async snapshot -> {
    console.log('Got updated room:', snapshot.data());
    const data = snapshot.data();
    if (!peerConnection.currentRemoteDescription && data.answer) {
        console.log('Set remote description: ', data.answer);
        const answer = new RTCSessionDescription(data.answer)
        await peerConnection.setRemoteDescription(answer);
    }
});
 

這將等到被叫寫RTCSessionDescription的答案,並設置為呼叫者遠程描述RTCPeerConnection

7.加入一個房間

下一步是實現邏輯用於加入現有的房間。用戶通過點擊加入房間按鈕並輸入ID為房間加入做到這一點。在這裡你的任務是貫徹落實創建RTCSessionDescription相應的答案,並在數據庫中更新了房間。

 const offer = roomSnapshot.data().offer;
await peerConnection.setRemoteDescription(offer);
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);

const roomWithAnswer = {
    answer: {
        type: answer.type,
        sdp: answer.sdp
    }
}
await roomRef.update(roomWithAnswer);
 

在上面的代碼中,我們通過提取從呼叫者提供並創建一個啟動RTCSessionDescription我們設置為遠程描述。接下來,我們創建了答案,將其設置為本地的描述,並更新數據庫。數據庫的更新將觸發onSnapshot對發送方的回調,這反過來將設置基於從被叫方的答案遠程描述。這樣就完成了交換RTCSessionDescription的主叫用戶和被叫之間的對象。

8.收集ICE候選人

之前,主叫方和被叫方都可以互相連接,他們還需要交換ICE候選人,告訴的WebRTC如何連接到遠程節點。你的下一個任務是實現偵聽ICE候選人,並將它們添加到集合中的數據庫的代碼。查找功能collectIceCandidates並添加以下代碼:

 async function collectIceCandidates(roomRef, peerConneciton,    
                                    localName, remoteName) {
    const candidatesCollection = roomRef.collection(localName);

    peerConnection.addEventListener('icecandidate', event -> {
        if (event.candidate) {
            const json = event.candidate.toJSON();
            candidatesCollection.add(json);
        }
    });

    roomRef.collection(remoteName).onSnapshot(snapshot -> {
        snapshot.docChanges().forEach(change -> {
            if (change.type === "added") {
                const candidate = new RTCIceCandidate(change.doc.data());
                peerConneciton.addIceCandidate(candidate);
            }
        });
    })
}
 

這個函數做兩件事情。它收集來自API的WebRTC ICE候選人,並將它們添加到數據庫中,並從遠程節點添加ICE候選監聽,並將它們添加到其RTCPeerConnection實例。聽的時候更改數據庫篩選出任何不屬於新增加的,因為我們本來會加入同一套ICE候選人的一遍又一遍是很重要的。

9.結論

在本程式碼實驗室學習了如何實現使用雲公司的FireStore實現WebRTC信號,以及如何利用它來創建一個簡單的視頻聊天應用。

要了解更多信息,請訪問以下資源:

  1. FirebaseRTC源代碼
  2. 的WebRTC樣本
  3. 雲公司的FireStore