導入

こんにちは！ ?

このチュートリアルでは、WebCodec API を使用してビデオの送信と受信の両方を行う方法を説明します。

まずサーバーのコーディングを始めましょう。

サーバーのセットアップ

ピア間でパケットを送受信するには、WebSocket サーバーが必要です。

このために、nodejs を使用して非常に基本的なサーバーを作成します。まずプロジェクトを初期化します:

npm init -y

次に、必要なモジュールをインストールします:

npm i ws express

次に、「index.js」という新しいファイルを作成し、次のコードを入力します。

// server.js
const WebSocket = require('ws');
const express = require('express');

const app = express();
const port = 3000;
const connectedClients = new Set();

app.use(express.static(__dirname   '/public'));

const wss = new WebSocket.Server({ noServer: true });

wss.on('connection', ws => {
  console.log('new connection');
  connectedClients.add(ws);

  ws.on('message', message => {
    connectedClients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  ws.once('close', () => {
    connectedClients.delete(ws);
    console.log('connection closed');
  });
});

const server = app.listen(port, () => {
  console.log(`server running on port ${port}`);
});

server.on('upgrade', (request, socket, head) => {
  wss.handleUpgrade(request, socket, head, (ws) => {
    wss.emit('connection', ws, request);
  });
});

上記のコードはそれほど複雑ではなく、パブリック ディレクトリにサービスを提供し、接続されているすべてのピアにパケットを送信する WebSocket 接続を処理します。 ?

次に送信側の部分を処理しますが、最初に「public」という名前の新しいディレクトリを作成します

mkdir public

送信者の作成

最初に作成するフロント エンド ファイルはブロードキャストするもので、public の下に「sender.html」という新しいファイルを作成し、次の HTML を入力します。

コードの動作を詳細に説明します。

1. HTML 構造
   • video 要素は、ユーザーのカメラからのライブビデオを表示します
   • キャンバス要素は、ビデオ フィードの個々のフレームを表示するために使用されます。これにより、エンコードされた各フレームの視覚的なプレビューが提供されます
2. JavaScript コード
   • initWebSocket 関数は WebSocket サーバーに接続します。この接続は、エンコードされたフレームを受信機にストリーミングするために不可欠です
   • initEncoder 関数は VideoEncoder オブジェクトを作成します。エンコーダーが新しいチャンクを生成するたびに実行される出力コールバックを定義します
   • videoEncoder.configure() は、コーデックを 1Mbps ビットレートおよび 30 FPS の VP8 に設定し、スムーズで高品質なエンコードを保証します
   • getUserMedia 呼び出しは、カメラへのアクセスを要求するために使用されます。ビデオ フィードは video 要素に割り当てられ、VideoTrackProcessor によって各フレームをリアルタイムで処理できるようになります
   • processFrames 関数は、ビデオからフレームを読み取り、キャンバス要素に表示し、videoEncoder.encode() を使用して各フレームをエンコードします。その後、各フレームはエンコードされたチャンクとしてサーバーに送信されます。

ふぅ！ご理解いただければ幸いです。次にストリームを受信するファイルを作成します。 ?

レシーバーの作成

このファイルは、エンコードされたビデオ チャンクを WebSocket 経由で受信し、デコードして、キャンバス要素に表示します。

パブリック ディレクトリの下に「receiver.html」という名前の新しいファイルを作成し、次の情報を入力します。

上記のファイルを分解するには:

1. HTML
   • キャンバス要素は、デコードされたビデオ フレームの主な表示領域です。送信者ページと同じように、幅、高さ、境界線が固定されています。
2. JavaScript
   • initWebSocket 関数は新しい WebSocket 接続を作成し、送信者からエンコードされたフレームを受信し、デコードのためにそれらを decodeFrame() に渡します。
   • initDecoder は、VP8 コーデック用に構成された VideoDecoder オブジェクトを初期化します。デコーダは各フレームをキャンバスに出力します。
   • decodeFrame は、エンコードされたデータを取得し、(現在のタイムスタンプを持つキー フレームとして) EncodedVideoChunk にラップし、videoDecoder.decode() を介してデコードします。各フレームはリアルタイムでキャンバスに表示されます

ふぅ！必要な要素がすべて揃ったので、実際に実行してみましょう。 ?

コードの実行

コードを実行するには、次のコマンドを実行するだけです:

node index.js

次に、ブラウザで http://localhost:3000/sender.html
を指定します。 カメラへのアクセスを許可してから、別のタブを開いて
を行ってください http://localhost:3000/receiver.html

以下のように、送信者から送信されたストリームが表示されるはずです。

結論

このチュートリアルでは、カメラにアクセスし、それをエンコードし、WebSocket 経由でチャンクを送信し、受信側でデコードして表示する方法を説明しました。このチュートリアルがお役に立てば幸いです。 ?

いつものように、コードは私の github から入手できます:
https://github.com/ethand91/webcodec-stream

コーディングを楽しんでください! ?

私の作品が好きですか？さまざまなトピックについて投稿しています。もっと見たい場合は、「いいね！」とフォローしてください。
あとコーヒーも大好きです。

コーディング面接に合格するためにアルゴリズム パターンを学習したい場合は、[次のコース](https://algolab.so/p/algorithms-and-data-structural-video-course?affcode=1413380_bzrepgch