グーグルは、ブラックコミュニティのための人種的資本を進めてまいります。 どのように参照してください。
このページは Cloud Translation API によって翻訳されました。
Switch to English

Firebase +のWebRTCコードラボ

1.はじめに

このコードラボでは、シグナリングのために、ブラウザとクラウドFirestoreでのWebRTCのAPIを使用して簡単なビデオチャットアプリケーションを構築する方法を学びます。アプリケーションはFirebaseRTCと呼ばれ、あなたのWebRTCは、アプリケーションを有効に構築の基本をお教えします簡単な例として動作します。

学習内容

  • WebRTCを使ってWebアプリケーションでビデオ通話を開始
  • クラウドFirestoreを使用してリモートパーティにシグナリング

必要なもの

このコードラボを開始する前に、あなたがインストールしたことを確認します。

  • 通常のNode.jsが付属していますNPM - ノードLTSが推奨されます

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

Firebaseプロジェクトを作成します。

  1. Firebaseコンソールで 、クリックしFirebaseプロジェクトFirebaseRTCに名前を付け、プロジェクトを追加します。

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

  1. プロジェクトの作成]をクリックします。

ビルドしようとしていることをアプリケーションがWeb上で利用可能な2つのFirebaseのサービスを使用しています。

  • クラウド上の構造化データを保存し、データが更新されたときにインスタント通知を取得するためのクラウドFirestore
  • Firebaseあなたの静的な資産をホストするホスティングおよびサーブ

この特定のコードラボでは、あなたはすでにあなたがクローニングされますプロジェクトでホスティングFirebaseを設定しました。しかし、クラウドFirestoreのために、我々は設定を通してあなたを歩くだろうとFirebaseコンソールを使用して、サービスの有効化。

クラウドFirestoreを有効にします

アプリはチャットメッセージを保存し、新しいチャットメッセージを受信するクラウドFirestoreを使用しています。

あなたはクラウドFirestoreを有効にする必要があります:

  1. Firebaseコンソールメニューでデータベースをクリックし、セクションを開発します。
  2. クラウドFirestoreペインでデータベースを作成 ]をクリックします。
  3. テストモードオプションの[開始]を選択し、セキュリティルールについての免責事項を読んだ後に有効にする]をクリックします。

あなたが自由に開発中のデータベースに書き込むことができることをテストモードが保証されます。私たちは、データベースがよりこのコードラボでに後で固定してあげます。

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

クローンコマンドラインからGitHubのリポジトリ:

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

サンプルコードはfirebase-RTC-Webディレクトリ内にクローニングされている必要があります。あなたのコマンドラインは、今からこのディレクトリから実行していることを確認します。

 cd firebase-rtc-web
 

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

お使いのエディタでfirebase-RTC-ウェブでファイルを開き、以下の手順に従って、それらを変更。このディレクトリは、未機能のWebRTCアプリで構成コードラボの開始コードが含まれています。私たちは、このコードラボを通じて、それを機能させるでしょう。

Firebaseコマンドラインインタフェースのインストール4

Firebaseコマンドラインインタフェース(CLI)を使用すると、ローカルでウェブアプリを提供してFirebaseホスティングにウェブアプリケーションを配備することができます。

  1. 次のNPMのコマンドを実行して、CLIをインストールします。 sh npm -g install firebase-tools
  1. 次のコマンドを実行して、CLIが正しくインストールされていることを確認しsh firebase --version

確認してくださいFirebase CLIのバージョンはv6.7.1かです。

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

あなたはFirebaseアプリのローカルディレクトリやファイルからホスティングのために、アプリケーションの設定を引っ張ってWebアプリケーションのテンプレートを設定しました。しかし、これを行うには、あなたのFirebaseプロジェクトとアプリケーションを関連付ける必要があります。

  1. 次のコマンドを実行してFirebaseプロジェクトとアプリケーションを関連付ける: sh firebase use --add

  2. プロンプトが表示されたら、あなたのプロジェクトIDを選択し、あなたのFirebaseプロジェクトの別名を与えます。

あなたが複数の環境(生産、ステージングなど)を持っている場合、エイリアスは便利です。しかし、このコードラボのために、ちょうどの別名使用してみましょうdefault

  1. あなたのコマンドラインの残りの指示に従ってください。

5.ファイル名を指定して実行ローカルサーバー

あなたは、実際に我々のアプリ上で作業を開始する準備が整いました!のは、ローカルでアプリケーションを実行してみましょう!

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

  2. あなたのコマンドラインは次の応答が表示されます: hosting: Local server: http://localhost:5000

私たちは、ローカルに我々のアプリを提供するためにFirebaseホスティングエミュレータを使用しています。 Webアプリケーションは現在、HTTPから利用可能であるべきである:// localhostを:5000。

  1. HTTPであなたのアプリを開き:// localhostを:5000。

あなたのFirebaseプロジェクトに接続されたFirebaseRTCのコピーが表示されるはずです。

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

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

このアプリケーションでは、各ビデオチャットセッションが部屋と呼ばれています。ユーザーが自分のアプリケーションのボタンをクリックして、新しい部屋を作成することができます。これは、相手が同じ部屋に参加するために使用できるIDを生成します。 IDは、各部屋のためのクラウド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!`
 

最初の行が作成されます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候補

呼び出し元と呼び出し先が相互に接続する前に、彼らはまた、リモートピアに接続する方法のWebRTCを伝える交換ICE候補にする必要があります。あなたの次のタスクは、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);
            }
        });
    })
}
 

この関数は、2つのことを行います。それはのWebRTC APIからICE候補を収集し、データベースに追加して、リモートピアからの追加ICE候補をリッスンし、そのに追加しますRTCPeerConnectionインスタンス。フィルターにデータベースの変更を聴いたとき、我々はそう何度も何度もICE候補の同じセットを追加していますので、それは、新たに追加されていないものから重要です。

9.おわり

このコードラボでは、シンプルなビデオチャットアプリケーションを作成するためにそれを使用する方法だけでなく、クラウドFirestoreを使用してのWebRTCのためのシグナリングを実装する方法を学びました。

もっと知るには、次のリソースを参照してください。

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