WeBRTCビデオチャットアプリケーションの構築

WebrTCの台頭とリアルタイムのポイントツーポイント通信を処理するブラウザの能力が強化されたため、建物のリアルタイムアプリケーションがこれまで以上に簡単になります。この記事では、SimplewebrtcとWeBRTCテクノロジーの実装におけるそのアプリケーションを調査し、同じ目標を達成できる他の代替案を紹介します。

Webrtcとピアツーピア通信に関する背景知識が必要な場合は、「Dawn of Webrtc」と「Getusermedia APIの紹介」を読むことをお勧めします。

カスタムWeBRTCアプリケーションの構築が複雑であるため、この記事では段階的なビルドチュートリアルを提供しません。代わりに、信頼できるアプリケーションを構築するために必要なライブラリとサーバーの種類を調べます。独自のアプリケーションを構築するときに参照できる完全なサンプルアプリケーションリンクを提供します。

主にSimpleWebrtcプラットフォームに焦点を当てます。その後、同じ目標を達成するのに役立つ他の商業およびオープンソースの代替品について簡単に説明します。

キーポイント

• WeBRTCは、サードパーティのプラグインを必要とせずに、Webブラウザー内で直接ポイントツーポイントからポイントツーポイントリアルタイム通信を許可し、Chrome、Firefox、Safariなどの最新のブラウザをサポートします。
• webrtc（ピアツーピア接続の確立に重要）での署名は、Stunおよびターンサーバーに依存して、NAT（ネットワークアドレス変換）とファイアウォールをバイパスして、さまざまなネットワーク構成での接続を確保します。
• SimpleWebrtcは、WeBRTCアプリケーションを構築および展開するための包括的なプラットフォームを提供し、SDK、ホスティングサービス、および技術サポートを提供して、開発者がカスタムビデオチャットソリューションの実装を容易にします。
Daily.coやその他の商用プラットフォームなどのSimplewebrtcの代替品は、完全にブランド化されたソリューションへの高速セットアップのニーズを満たすために、さまざまな程度の使いやすさとカスタマイズオプションを提供します。
WeBRTCアプリケーションの展開には、ネットワークの信頼性、セキュリティ、ブラウザの互換性の考慮事項が必要であり、商用プラットフォームはカスタム開発に関連する複雑さの多くを簡素化します。

webrtcとは何ですか？

WeBRTC（Webリアルタイム通信）は、ネットワーク上のリアルタイムビデオ、オーディオ、データストリームの送信、Webブラウザー間のポイントツーポイントリアルタイム通信を可能にするオープンソースプロジェクトです。 Google Chrome、Mozilla Firefox、Safari、Opera、およびその他のクロムベースのブラウザは、この技術をネイティブに実装しています。これは、ユーザーがサードパーティのプラグインやアプリケーションをインストールせずにテクノロジーにアクセスできるため、朗報です。

古いブラウザーバージョンとInternet Explorerなどの従来のブラウザにはこのテクノロジーがありません。ユーザーは最新のブラウザを使用する必要があります。サポートされているブラウザの完全なリストを表示できます。

2021年1月、World Wide Web Alliance（W3C）は、候補者の推奨状態から推奨状態にWeBRTC 1.0仕様を変換しました。これは、テクノロジーが10年前に最初にリリースされたことを考えると、並外れた成果です。

WeBRTC仕様は、ブラウザがローカルメディアデバイスにアクセスする方法と、リアルタイムプロトコルのセットを使用してメディアと共通のアプリケーションデータをブラウザに送信する方法をカバーしています。これは、前の記事で説明されている一連のJavaScript APIを介して行います。また、この仕様により、すべての通信が暗号化され、不要な第三者がストリームを盗聴できないことが保証されます。

WebrTCは、シグナリング、ブラウザ間の接続を開始するプロセスなど、すべてをカバーしていないことに注意する必要があります。潜在的な新しい技術的制限を回避するために、コンテンツのこの部分は仕様から省略されています。 2番目の理由は、WeBRTCが主にクライアントテクノロジーであり、サーバーテクノロジーを使用してセッションなどの問題に対処することをお勧めします。

ブラウザシグナリングの仕組み

webrtcは、Webブラウザー間のポイントツーポイント通信として定義されています。現実には、ほとんどのブラウザは、NAT（ネットワークアドレス変換）デバイス（オプションのファイアウォール）の背後にあるコンピューターで実行されます。 NATデバイス（通常はルーターまたはモデム）を使用すると、プライベートIPアドレスを備えたコンピューターが1つのパブリックIPアドレスを介してインターネットに接続できます。

NATデバイスは、IPアドレスを介してインターネット上の悪意のあるユーザーによる直接的な攻撃からパーソナルコンピューターを保護します。残念ながら、プライベートIPアドレスを持つデバイスがインターネット上で別のプライベートIPデバイスに接続することも防止します。

この課題を克服するために、インターネットエンジニアリングタスクフォース（IETF）はICE（インタラクティブ接続確立）プロトコルを提案し、プライベートIPコンピューターがパブリックネットワーク上の他のプライベートコンピューターを発見および接続できるようにしました。

これには、両方のクライアントが簡単に接続できるパブリックシグナリングサーバーの使用が含まれます。ピアコンピューターはこのサーバーに接続し、それを使用して、データソースとレシーバーに必要なIPアドレスとポートを交換します。この情報を使用すると、互いに直接接続を確立し、ビデオ、オーディオ、およびデータの送信を開始できます。

これはアニメーションのデモンストレーションです：

画像説明：webrtcシグナル伝達

WeBRTCシグナリングをセットアップするには、ICEフレームワークでは、次の2種類のサーバーを提供する必要があります。

1

Stun（NATのセッショントラバーサルユーティリティ）サーバー機能上記のように。コンピューターが連絡先情報を交換するための会議スペースを提供するだけです。情報交換が完了すると、ピアコンピューターの間に接続が確立され、スタンサーバーは残りの会話を離れます。

これはクライアントで実行されているサンプルスクリプトであり、ブラウザがStunサーバーを介して接続を開始できるようにします。このスクリプトにより、サーバーのいずれかが失敗したときに複数のスタンサーバーURLを提供できます。

STUNサーバーを介して確立された接続は、WEBRTC通信の最も理想的で費用対効果の高いタイプです。ユーザーはランニングコストをほとんど発生しません。残念ながら、各ピアは異なるタイプのNATデバイスを使用しているため、一部のユーザーの接続は確立されない場合があります。この場合、ICEプロトコルでは、ターンサーバーと呼ばれる異なるタイプのシグナリングサーバーであるフォールバックを提供する必要があります。

2ターンサーバー

ターン（リレーNATを使用して移動）サーバーは、Stunサーバーの拡張機能です。前任者と違うのは、通信セッション全体を処理することです。

基本的に、ピア間の接続を確立した後、あるピアからストリームを受け取り、別のピアに転送し、その逆も同様です。このタイプの通信はより高価であり、ホストはターンサーバーの実行に必要な処理と帯域幅の負荷を支払う必要があります。

以下は、最初にスタンサーバーを含むシグナリングプロセス全体を含むグラフィカルな説明であり、次にフォールバックとしてターンサーバーを含むものです。

画像説明：WeBRTCプロセス全体の完全なアーキテクチャ図を示しています。

カスタムビデオチャットアプリケーションを構築します

純粋なJavaScriptコードと無料のパブリックスタンサーバーを使用して独自のビデオチャットソリューションをセットアップすることは可能ですが、誰もがプラットフォームで互いに接続できるわけではありません。すべてのユーザーに信頼できるサービスを提供する場合は、ターンサーバーを使用する必要があります。

前述のように、

webrtcプラットフォームのセットアップは複雑になる場合があります。幸いなことに、WeBRTCビデオチャットアプリケーションを簡単にするオールインワンのビジネスプラットフォームがあります。それでは、Simplewebrtcが私たちの負担をどのように和らげることができるか見てみましょう。

SimpleWebrtcは、Reactを使用してカスタムリアルタイムアプリケーションを構築および展開するためのシンプルで費用対効果の高いサービスを開発者に提供するプラットフォームです。具体的には、以下を提供します

SimpleWebrtc SDK：フロントエンドライブラリ

ホスト：Stun/TurnおよびSFU（Selective Forwarding Unit）Server

• テクニカルサポート
• カスタムアプリケーション開発とWeBRTCコンサルティングサービス
• シングルテナントおよびローカルインフラストラクチャ
• Talky：simplewebrtcで完全に構築された無料のビデオチャットアプリケーション
以下は、クライアントが開発および立ち上げを支援したいくつかのカスタムビデオチャットプロジェクトのスクリーンショットの例です。

写真の説明：talky

写真の説明：Web個別指導アプリ

simplewebrtcプラットフォームが提供する主なwebrtcサービスは次のとおりです。 ビデオ、音声、スクリーン共有のセキュリティ転送

エンドツーエンドの暗号化

最大30人の同時ユーザーをサポート

• 無限の部屋
価格設定に関しては、次の計画を提供します。
• 小グループ：最大6人の参加者、月額5ドルから
• 大規模なグループ：最大30人の参加者、月額3ドルから

小グループ計画の利点は、エンドツーエンドの暗号化を使用できることですが、大規模なグループプランはできないことです。小グループ計画では、セッションの60〜80％がピアツーピア接続であり、メディアストリームはサーバーに触れないようにします。このようなセッションの帯域幅消費の料金はありません。

大規模なグループプランの場合、トラフィックはSFU（選択的転送ユニット）と呼ばれるサーバーを介してルーティングされ、すべてのトラフィックが計算されます。

ほとんどの商業的な代替案（後で簡単に説明する）が請求される

（記事の長さのために次のコンテンツが簡素化され、コア情報とコードの例が保持されます。元のテキストについては、元のドキュメントを参照してください。）

前提条件
SimpleWebrtcクライアントライブラリは、ReactおよびReduxエコシステムに依存しています。基本的なスキルが必要です：
反応
redux
非同期Reduxライブラリ - Redux Thunk、Redux Saga、Redux Observablesなど
アカウントを設定します

simplewebrtc.comの登録ページを取得し、新しいアカウントを登録します。 2GBの帯域幅を取得し、ニュースレターにサインアップすると、3GBの帯域幅が追加されます。このクォータは、ビデオチャットアプリケーションを開発およびテストするのに十分でなければなりません。

登録後、メールアドレスを確認する必要があります。この手順を完了したら、APIキーを受け取るダッシュボードページにある必要があります。

このAPIキーを使用して、独自のカスタムWeBRTCアプリケーションの構築を開始できます。次のセクションでは、Simplewebrtcチームによって構築された完全なサンプルアプリケーションを実行します。
サンプルアプリケーションをビルドして実行します
（コードサンプルが合理化されています）
展開
（簡素化された展開手順）

Simplewebrtc

の代替案

（代替案の簡単な紹介）

結論
とにかく、コマーシャルプラットフォームを使用してWeBRTCを使用してライブビデオチャットソリューションを構築する方が簡単です。オープンソースのルートを採用することは実現可能ですが、すべてのユーザーに信頼できる接続を確保するために独自のターンサーバーをホストする必要があります。どちらの場合でも、ビルドプロセスは、見たサンプルアプリケーションの相対的な複雑さを考えると、非常に時間がかかる場合があります。

自分自身に尋ねる重要な質問は、独自のカスタムリアルタイムソリューションを構築する価値があるかどうかです。 Webrtcをコアビジネスとして使用する予定がない限り、まずこのテクノロジーの処理経験を持つ会社に相談する必要があるかもしれません。

（FAQパーツが合理化されています）

以上がWeBRTCビデオチャットアプリケーションの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。