ウェブキャストのためのオープンソースブラウザアプリケーション

シンプルなウェブキャストはopen source browser application 簡単な方法で自分自身をブロードキャストする.放送を押すと、視聴者と共有するリンクを受け取ります.彼らが単にあなたのウェブキャストを見るために彼らのブラウザーで開く関連.デモは入手可能ですwebcast.eyevinn.technology そして、私たちは、このブログ記事でどのように動作し、どのように自分でそれを設定できるかを説明します.

アプリケーションは、Eyevinnのオープンソースを使用してNPMライブラリをホイップ@eyevinn/whip-web-client and @eyevinn/whip-endpoint .
WHIP (webrtc http ingestion protocol)は,webrtcベースの摂食のための新しい標準である.これは、このアプリケーションの送信者の部分は、ホイップ互換のメディアサーバの任意のタイプで使用することができることを意味します.

鞭は何ですか。

ホイップは、放送/ストリーミング業界でWebrtcを採用するためのイニシアチブです.この業界がwebrtc採用の後ろに遅れているという貢献している事実は、ストリーミングサービスにメディアを摂取するために設計された標準的なプロトコル(RTSPのような)がないということです.WHIPは、Webベースのコンテンツのストリーミングサービスや/またはCDNを可能にする簡単なHTTPベースのプロトコルを提案します.

フロントエンド

フロントエンドの部分はwhip WebクライアントSDKを使用します.@eyevinn/whip-web-client ) を使用すると、セットアップを支援するライブラリですsendonly WebIP互換メディアサーバへのWEBRTCピア接続IDを持つHtmlVideoElementを持つとしますwebcast あなたのウェブカメラからホイップバックエンドにメディアを送信するには、次のコードを追加します.

    const videoElement = document.querySelector<HTMLVideoElement>("#webcast");
    const client = new WHIPClient({
      endpoint: "https://<whip-endpoint>",
      element: videoElement,
      opts: { iceServers: iceServers }
    });

    await client.connect();

The iceServers stun/turnサーバのリストを含む配列ですが、WHEP標準では、受信ピア、whipバックエンドがすべてのICE候補を集め、SDP回答に含めることを指定します.しかし、氷サーバーのリストを提供することによって、クライアントは最適ペアリングの可能性を増やすSDP申し込みで候補を含むかもしれません.
それは基本的にすべてあなたがWHIP互換メディアサーバおよび/またはCDNにメディアを摂取するためのブラウザアプリケーションを構築を開始する必要があります.

バックエンド(ホイップエンドポイント)

このアプリケーションでは、ブロードキャスターの役割を持ってホイップ互換のサーバーが含まれます.これは、送信者がメディア送信の接続を確立するために使用する鞭エンドポイントを提供します.この着信メディアは、転送され、すべての接続ウォッチャーに複製されます.ウォッチャーと放送の間でrecvonly ピア接続が確立されます.これを行うことによって、送信者はすべてのウォッチャーでピアを確立する必要はありません.このバックエンドはNPMライブラリに組み込まれています@eyevinn/whip-endpoint 必要なのは以下のコード行です.

import { WHIPEndpoint, Broadcaster } from "@eyevinn/whip-endpoint";

const broadcaster = new Broadcaster({
  port: parseInt(process.env.BROADCAST_PORT || "8001"),
  baseUrl: process.env.BROADCAST_BASEURL,
  prefix: process.env.BROADCAST_PREFIX,
  iceServers: iceServers,
});
broadcaster.listen();

const endpoint = new WHIPEndpoint({ port: parseInt(process.env.PORT || "8000"), iceServers: iceServers });
endpoint.registerBroadcaster(broadcaster);
endpoint.listen();

港で8000 あなたは鞭終点を実行して、送付者が接続する終点です.すべてのウォッチャーはブロードキャスターとウォッチャーの間のwebrtcピア接続を確立するためにポート8001のブロードキャスターに接続します.この部分はWHIP規格の一部ではありません.また、HTTPのエンドポイントには、信号と交換SDPの提供と回答に基づいています.
我々の単純なウェブキャストアプリケーションでは、ブロードキャスターの特定のチャネルにURIのbase 64エンコードされた文字列を含むリンクを生成します.そして次のコードを見ますchannelUrl がURIである.

    const peer = new RTCPeerConnection({
      iceServers: iceServers
    });
    peer.onicecandidate = async (event) => {
      if (event.candidate === null) {
        const response = await fetch(channelUrl, {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({ sdp: peer.localDescription.sdp })
        });
        if (response.ok) {
          const { sdp } = await response.json();
          peer.setRemoteDescription({ type: "answer", sdp: sdp });
        }
      }
    }
    peer.ontrack = (ev) => {
      if (ev.streams && ev.streams[0]) {
        video.srcObject = ev.streams[0];
      }
    };

    const sdpOffer = await peer.createOffer({
      offerToReceiveAudio: true,
      offerToReceiveVideo: true,
    });
    peer.setLocalDescription(sdpOffer);

その後、Docker画像を作成し、ECSとFargate上でコンテナを実行できます.これはかなり簡単ですが、セキュリティグループがUDPトラフィックをコンテナに許可し、コンテナが2つのサービス(ポート8000と8001)を実行することを保証する必要がありますALB target groups 同じ容器に向かって.これはAWSコンソールではサポートされていませんが、AWS CLIを使ってECSサービスを設定することができます.

セットアップターンサーバー

ためにすべてのこれは実質的にあなたが直接接続が可能でないときピアの間のネットワークトラフィックを中継するためにターンサーバー(中継NATを使用して横断)が必要になります.
自己ホストとクラウド提供サービスの両方に利用可能ないくつかのオプションがあります.自己主催のオプションはオープンソースを使うことですCOTURN project そして、例えばAWS上のEC 2インスタンス上で実行します.これを取得し、実行する最も速い方法は、dockerエンジンを実行しているEC 2インスタンス(Ubuntu)を回転させることです.Dockerエンジンをインストールするには、次の手順に従います

sudo apt-get update
sudo apt-get install ca-certificates curl gnupg lsb-release
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
echo   "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io
sudo groupadd docker
sudo usermod -aG docker ubuntu

Dockerがインストールされたら、コンテナを簡単にします.ホストモードで実行すると、coturn 例えば、リレーIPアドレスを決定する.このDocker構成ファイルは、インスピレーションとして使用することができます.

version: "3.7"

services:
  coturn:
    image: coturn/coturn:latest
    network_mode: host
    command: -n --log-file=stdout -r <realm> -a -u eyevinn:<credential> --external-ip='<public-ip>/<private-ip>' --min-port=49160 --max-port=49200

上記の例では、セキュリティグループがポート3478上のTCPとUDPトラフィック、および49160のUDPトラフィックを49200にするのを確実にする必要があります.ターンサーバーが正しく設定されていることを確認するには、online test tool here .

トラブルシューティング

クロムブラウザでは、入力することによってアクセスする便利なツールがありますchrome://webrtc-internals アドレスバーで.成功して確立された接続はこのようになります.

ICE connection state: new => checking => connected
Connection state: new => connecting => connected
Signaling state: new => have-local-offer => stable
ICE Candidate pair: 85.24.142.180:1025 <=> 16.16.27.107:42818

シグナル状態がstable SDP申し込み/答えプロセスは完了しました、そして、氷候補は交換されました、しかし、氷候補組がセットされないならば、2人の仲間が接続する方法を見つけることはおそらく問題です.
シンプルなウェブキャストは、アプリケーションの使用と生産のためにスケーリングされていません.これは、アップロードされたインフラストラクチャ(使用するサーバーと対応するネットワークインフラストラクチャ)を使用してビルドすることを歓迎します.

アバウトテクノロジーについて

Eyevinn技術は、ビデオとストリーミングに特化した独立したコンサルタント会社です.我々が商業的にどんなプラットホームまたはテクノロジーベンダーにも縛られない方法で独立してください.
Eyeevinでは、すべてのソフトウェア開発者のコンサルタントは、オープンソースの開発とオープンソースコミュニティへの貢献のための専用予算を予約しています.これは、革新、チームビルディングと個人的な能力開発の余地を我々に与えます.また、オープンソースコミュニティに貢献する方法として私たちを与える.
eyevinnについての詳細を知りたいとどのようにここで動作するようにします.お問い合わせ[email protected] !