WebCodec - 送受信-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

WebCodec - 送受信

Patricia Arquette

Oct 09, 2024 pm 04:35 PM

導入

こんにちは！ ?

このチュートリアルでは、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 を入力します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Sender</title>
    <style>
      video, canvas {
        width: 640px;
        height: 480px;
        border: 2px solid black;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <video id="video" autoplay playsinline></video>
    <canvas id="canvas" width="640" height="480"></canvas>

    <script>
      const videoElement = document.getElementById('video');
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      let videoEncoder;
      let socket;

      const initWebSocket = () => {
        socket = new WebSocket('ws://localhost:3000');

        socket.onopen = () => console.log('WebSocket connected');
        socket.onerror = error => console.error('WebSocket error:', error);
      };

      const initEncoder = () => {
        videoEncoder = new VideoEncoder({
          output: (encodedChunk) => {
            const chunkData = new Uint8Array(encodedChunk.byteLength);
            encodedChunk.copyTo(chunkData);

            if (socket.readyState === WebSocket.OPEN) {
              socket.send(chunkData.buffer);
            }
          },
          error: (error) => console.error('Encoding error:', error)
        });

        videoEncoder.configure({
          codec: 'vp8',
          width: 640,
          height: 480,
          bitrate: 1_000_000,
          framerate: 30
        });
      };

      navigator.mediaDevices.getUserMedia({ video: true })
        .then((stream) => {
          videoElement.srcObject = stream;
          const videoTrack = stream.getVideoTracks()[0];
          const processor = new MediaStreamTrackProcessor(videoTrack);
          const reader = processor.readable.getReader();

          const processFrames = async () => {
            while (true) {
              const { value: videoFrame, done } = await reader.read();
              if (done) break;

              ctx.drawImage(videoFrame, 0, 0, canvas.width, canvas.height);
              videoEncoder.encode(videoFrame, { keyFrame: true });
              videoFrame.close();
            }
          };

          processFrames();
        })
        .catch((error) => console.error('Failed to get camera', error));

        initEncoder();
        initWebSocket();
    </script>
  </body>
</html>

ログイン後にコピー

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

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

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

レシーバーの作成

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Receiver</title>
    <style>
      canvas {
        width: 640px;
        height: 480px;
        border: 2px solid black;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="640" height="480"></canvas>

    <script>
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      let videoDecoder;

      const initWebSocket = () => {
        const socket = new WebSocket('ws://localhost:3000');
        socket.binaryType = 'arraybuffer';

        socket.onmessage = event => {
          decodeFrame(event.data);
        };
        socket.onerror = error => console.error('WebSocket error:', error);
      };

      const initDecoder = () => {
        videoDecoder = new VideoDecoder({
          output: (videoFrame) => {
            ctx.drawImage(videoFrame, 0, 0, canvas.width, canvas.height);
            videoFrame.close();
          },
          error: (error) => console.error('Decoding error:', error)
        });

        videoDecoder.configure({
          codec: 'vp8',
          width: 640,
          height: 480
        });
      };

      const decodeFrame = (encodedData) => {
        const chunk = new EncodedVideoChunk({
          type: 'key',
          timestamp: performance.now(),
          data: new Uint8Array(encodedData)
        });

        videoDecoder.decode(chunk);
      };

      initDecoder();
      initWebSocket();
    </script>
  </body>
</html>

ログイン後にコピー

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

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

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

コードの実行

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

node index.js

ログイン後にコピー

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

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

WebCodec - Sending and Receiving

結論

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

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

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

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

WebCodec - Sending and Receiving

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

以上がWebCodec - 送受信の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7909

Java チュートリアル

1652

CakePHP チュートリアル

1411

Laravel チュートリアル

1303

PHP チュートリアル

1248

Related knowledge

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？または： Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？ Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。

JavaScriptは学ぶのが難しいですか？ Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。

JavaScriptの進化：現在の傾向と将来の見通し Apr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。