以前にプロデューサーを紹介しました。今日はコンシューマーについて話しましょう。正式に入る前に、
プロデューサーとコンシューマーはここではユーザーではありません。同じユーザーがコンシューマーとプロデューサーを作成できます。
たとえば、WeChatボイスチャット、2人同時に話すことができ、お互いの言葉を聞くこともできます。
これが考え方を変える必要性です。
注目に値するもう1つのポイントは、公式デモ全体で、シグナリングサービスはデータ送信のみを行うため、トランスポートと混同しないでください。
全体的なプロセスとプロセス(プロセスには重要なリンクのみがリストされます)
- (プロデューサー側)クライアントの初期化
- (プロデューサー側)トランスポートの作成; createSendTransportが作成され、関連イベントをリッスンします。接続イベントとプロデュースイベントは、WebSocketを介して関連データを送信する必要があります。
- 前の記事で説明したproduce()は、トランスポートのproduceイベントをトリガーし、シグナリングサービスを介して関連データを送信します
- (コンシューマー)createRecvTransportイベントは、上記と同じ手順で接続をリッスンします
- (シグナリングサービス)接続と生成の作成チャネルおよびサーバーのメディアスープ操作を受信した後、生成されたデータもコンシューマーに転送します(これについては記事の後半で詳しく説明します)。
- (消費者)シグナリングサービスのデータを受信して消費する
ここに書かれている完全なプロセスは比較的簡単です。技術的な詳細が必要な場合は、コードを分析する必要があります。
この記事のトピックに戻る
実際、これは上記の6番目のステップです。クライアント
シグナリングサーバーがプロデューサーデータを受信した後、対応するコンシューマーを見つけてデータを転送する必要があります。
公式ウェブサイトで提供されているコードは、実際には非常に短く明確であることがわかります。ここで指摘します。
mySignaling.on('newConsumer', async (data) =>
{
const consumer = await transport.consume(
{
id : data.id,
producerId : data.producerId,
kind : data.kind,
rtpParameters : data.rtpParameters
});
// Render the remote video track into a HTML video element.
const {
track } = consumer;
videoElem.srcObject = new MediaStream([ track ]);
});
- トランスポートは実際にはコンシューマチャネルですcreateRecvTransport()
- 変換中のメディアデータ消費の取得を追跡する
実際、消費の難しさはそれほど多くありません。前の記事とこの記事は、クライアントのいくつかの関連する知識ポイントに属しています。後で、サーバーの関連する処理手順を更新する時間があります。
コードワードは簡単ではありません、あなたのサポートに感謝します