WeBRTCは、ビデオチャット、オンライン會議、その他のシナリオに適したH5ページでリアルタイムのオーディオとビデオ通信を?qū)g現(xiàn)する主流のテクノロジーです。そのコアプロセスには次のものが含まれます。1。メディアストリームの取得。 2。RTCPeerConnection接続の確立。 3。WebSocketまたはHTTPを介したシグナリングを交換します。 4.オーディオおよびビデオデータの直接送信。注統(tǒng)合の場合：HTTPS環(huán)境を使用する必要があります。モバイルブラウザーと互換性があります。水平および垂直の畫面の切り替えと解像度を処理します。自動再生戦略を扱っています。 WebSocketを使用して信號サービスを構(gòu)築することをお勧めします。メッセージ形式はJSONに統(tǒng)合することをお勧めします。複數(shù)の呼び出しがSFUアーキテクチャを採用できます。一般的な問題には、HTTPSをチェックすること、Simulcast/SVCの有効化、IceConnectionStatechangeイベントの聴取など、許可を取得できないこと、ビデオst音、不安定な接続、および最適化が行われます。

WeBRTCは、Webページでリアルタイムのオーディオとビデオ通信を?qū)g現(xiàn)するための最も主流のテクノロジーの1つです。ビデオチャット、オンライン會議、リモート支援など、H5ページにリアルタイム通信機能を埋め込む必要がある場合、WeBRTCは非常に適した選択です。

Webrtcの基本的な作業(yè)原則

WeBRTCは、プラグインやサードパーティサーバーに依存してメディアストリームを転送することなく、Webページ間でオーディオ、ビデオ、およびデータを直接送信できる組み込みブラウザAPIのセットです。

そのコアプロセスには次のものが含まれます。

• メディアストリームを取得： navigator.mediaDevices.getUserMedia()を介してユーザーのカメラとマイクの権限を取得します。
• 接続を確立する：rtcpeerconnectionを使用して、ポイントツーポイント接続を作成します。
• 交換信號：WeBRTC自體はシグナルメソッドを指定していませんが、SDPとICE候補の情報を交換するには、通常WebSocketまたはHTTPインターフェイスを使用して行われる「仲介者」が必要です。
• データ送信：接続が正常に確立されると、オーディオおよびビデオストリームを直接送信できます。

このプロセスは簡単に思えますが、互換性、ネットワーク狀態(tài)処理など、実際の開発において多くの詳細(xì)に注意する必要があります。

WebrtcをH5に統(tǒng)合する方法

モバイルH5ページでWeBRTCを使用する場合、いくつかの具體的な予防策があります。

HTTPS環(huán)境を使用します

最新のブラウザでは、WeBRTCをHTTPSで実行する必要があります（ローカルデバッグを除く）。そうでなければ、カメラとマイクへのアクセスは拒否されます。

モバイルブラウザと互換性があります

ほとんどの最新のブラウザはWeBRTCをサポートしていますが、一部の國內(nèi)のAndroidブラウザには互換性の問題がある場合があります。適応テストを行い、必要に応じて標(biāo)準(zhǔn)のブラウザー（ChromeやFirefoxなど）を使用するようにユーザーをガイドすることをお勧めします。

水平および垂直の畫面の切り替えと解像度を処理します

多くの場合、モバイルデバイスは方向を切り替えます。イベントのresizeを聴き、ビデオ要素のアスペクト比を動的に調(diào)整できます。同時に、適切なビデオ解像度を設(shè)定すると、次のようなパフォーマンスが向上する可能性があります。

 const Constraints = {
  ビデオ：{width：{理想：640}、高さ：{理想：480}}、
  オーディオ：本當(dāng)です
};

自動再生戦略

通常、モバイルブラウザは、サウンドで動畫を自動的に再生することを禁止しています。この問題を回避するために、プレイする前にそれをミュートしてから、「ミュート解除」ボタンを提供できます。

シグナリングサービスをより安定させる方法は？

WeBRTCは送信のシグナリングについて責(zé)任を負(fù)わないため、2つのクライアント間の接続の確立を調(diào)整するために、シグナリングサービスを自分でセットアップする必要があります。

WebSocketを使用して、信號交換を?qū)g裝します

WebSocketは、長い接続を維持し、雙方向通信に効率的であるため、最も一般的に使用されるソリューションです。

node.jsを使用して、簡単なWebSocketサービスを構(gòu)築できます。

 const websocket = require（ 'ws'）;
const wss = new websocket.server（{port：8080}）;

wss.on（ 'connection'、（ws）=> {
  ws.on（ 'message'、（message）=> {
    //メッセージを他のクライアントに転送wss.clients.foreach（（client）=> {
      if（client！== ws && client.readystate === websocket.open）{
        client.send（メッセージ）;
      }
    }）;
  }）;
}）;

メッセージ形式は統(tǒng)合する必要があります

JSON形式を使用してメッセージを渡すことをお勧めします。例えば：

 {
  「タイプ」：「オファー」、
  「SDP」：「...」
}

複數(shù)の人と話す場合はどうすればよいですか？

マルチプレイヤーシナリオの場合は、MediaSoupやJanusなどのミドルウェアを使用してメディアストリームを転送して、クライアントごとに複數(shù)の接続を確立する必要がないなど、SFU（選択的転送ユニット）アーキテクチャを検討できます。

よくある質(zhì)問と最適化の提案

カメラの権限を取得できません

HTTPSが使用されているかどうか、およびユーザーが明示的に承認(rèn)されているかどうかを確認(rèn)します。拒否された場合、 getUserMediaがスローしたエラープロンプトを介してアクセス許可を再リケストできます。

ビデオスタッターまたは遅延

これは通常、ネットワークの品質(zhì)が低いことによって引き起こされます。 SimulcastまたはSVCテクノロジーを有効にして、帯域幅に基づいてビデオ品質(zhì)を自動的に調(diào)整できます。

頻繁な切斷と再接続を防ぎます

WeBRTC接続が不安定な場合、 iceconnectionstatechangeイベントを聞いて、狀態(tài)がdisconnectedたときに再交渉しようとすることができます。

基本的にそれだけです。 WeBRTCの基本的な機能は、実裝するのがそれほど難しくありませんが、さまざまなデバイスやネットワーク環(huán)境で安定して滑らかであることに注意を払う詳細(xì)がまだたくさんあります。

以上がリアルタイムH5通信のためにWeBRTCの実裝の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。