Firebase + WebRTC の Codelab

1. はじめに

この Codelab では、 ブラウザで WebRTC API を使用し、シグナリングに Cloud Firestore を使用する必要があります。「 これは FirebaseRTC と呼ばれる簡単な例です。 WebRTC 対応アプリケーションを構築するための基本を学びました。

<ph type="x-smartling-placeholder">
</ph>

学習内容

  • WebRTC を使用してウェブ アプリケーションでビデオ通話を開始する
  • Cloud Firestore を使用したリモート パーティへのシグナリング

必要なもの

この Codelab を開始する前に、以下がインストールされていることを確認してください。

  • npm（通常 Node.js に付属）- Node LTS を推奨

2. Firebase プロジェクトを作成して設定する

Firebase プロジェクトを作成する

  1. Firebase コンソールで [追加] をクリックします。 Firebase プロジェクトに「FirebaseRTC」という名前を付けます。

Firebase プロジェクトのプロジェクト ID を覚えておいてください。

<ph type="x-smartling-placeholder">
</ph>
  1. [プロジェクトを作成] をクリックします。

これから作成するアプリケーションでは、利用可能な 2 つの Firebase サービスを使用します。 ウェブの場合:

  • 構造化データを Cloud に保存し、すぐに使える Cloud Firestore データが更新されると通知が送信されます。
  • 静的アセットをホストして提供する Firebase Hosting

この Codelab では、Firebase Hosting をすでに プロジェクトを指定します。Cloud Firestore については Firebase コンソールを使用してサービスの構成と有効化を行う。

Cloud Firestore の有効化

このアプリは Cloud Firestore を使用してチャット メッセージを保存し、新しいチャットを受信します ブロックすることもできます。

Cloud Firestore を有効にする必要があります。

  1. Firebase コンソール メニューの [開発] セクションで、[データベース] をクリックします。
  2. [Cloud Firestore] ペインで [データベースを作成] をクリックします。
  3. [テストモードで開始] オプションを選択し、 セキュリティ ルールに関する免責条項

テストモードでは、開発中にデータベースに自由に書き込めます。 データベースは後ほど、この Codelab でより安全にします。

3. サンプルコードを取得する

コマンドラインから GitHub リポジトリのクローンを作成します。

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

サンプルコードのクローンが FirebaseRTC ディレクトリにすでに作成されているはずです。 今後は、このディレクトリからコマンドラインが実行されるようにしてください。

cd FirebaseRTC

スターター アプリをインポートする

エディタで FirebaseRTC でファイルを開き、 手順は次のとおりです。このディレクトリには、Terraform の この Codelab は、まだ機能していない WebRTC アプリで構成されています。Google が実現 この Codelab 全体を通して使います。

4. Firebase コマンドライン インターフェースをインストールする

Firebase コマンドライン インターフェース（CLI）を使用すると、ウェブアプリを提供できます ウェブアプリを Firebase Hosting にデプロイします。

<ph type="x-smartling-placeholder">
</ph>
  1. 次の npm コマンドを実行して CLI をインストールします。 sh npm -g install firebase-tools
で確認できます。 <ph type="x-smartling-placeholder">
</ph>
  1. 次のコマンドを実行して、CLI が正しくインストールされていることを確認します。 command: sh firebase --version

Firebase CLI のバージョンが v6.7.1 以降であることを確認します。

  1. 次のコマンドを実行して、Firebase CLI を承認します。 sh firebase login

Firebase 用のアプリの構成を pull するようにウェブアプリ テンプレートを設定できました アプリのローカル ディレクトリとファイルからのホスティング。しかし、そのためには アプリを Firebase プロジェクトに関連付けます。

  1. 次のコマンドを実行して、アプリを Firebase プロジェクトに関連付けます。 command: sh firebase use --add

  2. プロンプトが表示されたら、プロジェクト ID を選択し、Firebase プロジェクトにプロジェクト名を入力します。 使用します。

エイリアスは、複数の環境（本番環境、ステージング環境など）がある場合に役立ちます。 ただし、この Codelab では default のエイリアスを使用します。

  1. コマンドラインの残りの手順に沿って操作します。

5. ローカル サーバーを実行する

これでアプリの作成を開始する準備が整いました。アプリをローカルで実行しましょう。

  1. 次の Firebase CLI コマンドを実行します。 sh firebase serve --only hosting

  2. コマンドラインに次のレスポンスが表示されます。 hosting: Local server: http://localhost:5000

Firebase Hosting エミュレータを使用して、アプリをローカルで配信します。ウェブアプリ http://localhost:5000 からアクセスできるはずです。

  1. http://localhost:5000 でアプリを開きます。

インスタンスにリンクされた FirebaseRTC のコピーが表示されます。 Firebase プロジェクト。

アプリが自動的に Firebase プロジェクトに接続されます。

6. 新しい部屋を作成する

このアプリケーションでは、各ビデオチャット セッションを「チャットルーム」と呼びます。ユーザーは 新しいルームに入室するには、これにより ID が生成されます 同じ部屋に参加するための 2 つのネットワーク名を指定します。ID が鍵として使用されます。 Cloud Firestore にエクスポートして、

各部屋には、オファーと特典の RTCSessionDescriptions が含まれます さらに、各政党の ICE 候補者を含む 2 つのコレクションも返されます。

あなたの最初のタスクは、不足しているコードを実装して、 最初のオファーを提示する必要があります。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!`

1 行目で、オファーを表す RTCSessionDescription を作成します。 渡されます。これをローカルの説明として設定し、 新しい Room オブジェクトが作成されます。

次に、データベースに対する変更をリッスンし、Google Cloud からの応答が 追加されたことを示します。

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 を入力します。 選択します。ここでのタスクは、Terraform ワークフローの 回答に対する 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 の候補者を集める

発信者と受信者が互いに接続するには、以下も行う必要があります。 WebRTC にリモートピアへの接続方法を指示する ICE 候補を交換します。 次のタスクでは、ICE の候補をリッスンして Google Cloud の データベース内のコレクションに追加します関数 collectIceCandidates を見つけます。 次のコードを追加します。

async function collectIceCandidates(roomRef, peerConnection,
                                    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());
                peerConnection.addIceCandidate(candidate);
            }
        });
    })
}

この関数は 2 つのことを行います。WebRTC API から ICE 候補を収集し、 それらがデータベースに追加され、追加された ICE 候補がリモートからリッスンされます。 その RTCPeerConnection インスタンスに追加します。重要なのは データベースの変更をリッスンし、新しく追加されたものでないものを除外します。 同じ ICE 候補の集合が何度も追加されてしまうためです。 ] をクリックします。

9. まとめ

この Codelab では、Cloud Functions を使用して WebRTC のシグナリングを実装する方法を学習しました。 Firestore を使用して簡単なビデオチャットを作成する方法も説明しました。 説明します。

詳しくは以下のページをご覧ください。

  1. FirebaseRTC ソースコード
  2. WebRTC のサンプル
  3. Cloud Firestore