WebRTC-アーキテクチャ

全体的なWebRTCアーキテクチャは非常に複雑です。

ここでは、3つの異なる層を見つけることができます-

Web開発者向けのAPI -このレイヤーには、RTCPeerConnection、RTCDataChannel、MediaStreanオブジェクトなど、Web開発者が必要とするすべてのAPIが含まれています。
ブラウザメーカー向けのAPI
ブラウザーメーカーがフックできるオーバーライド可能なAPI。

トランスポートコンポーネントを使用すると、さまざまなタイプのネットワーク間で接続を確立できます。一方、音声およびビデオエンジンは、サウンドカードおよびカメラからネットワークにオーディオおよびビデオストリームを転送するフレームワークです。 Web開発者にとって最も重要な部分はWebRTC APIです。

クライアントサーバー側からWebRTCアーキテクチャを見ると、最も一般的に使用されているモデルの1つがSIP（Session Initiation Protocol）Trapezoidに触発されていることがわかります。

SIP台形

このモデルでは、両方のデバイスが異なるサーバーからWebアプリケーションを実行しています。 RTCPeerConnectionオブジェクトは、ピアツーピアで互いに接続できるようにストリームを構成します。このシグナリングは、HTTPまたはWebSocketを介して行われます。

しかし、最も一般的に使用されるモデルは三角形です-

トライアングルモデル

このモデルでは、両方のデバイスが同じWebアプリケーションを使用します。これにより、Web開発者はユーザー接続をより柔軟に管理できます。

WebRTC API

それはいくつかの主要なjavascriptオブジェクトで構成されています-

RTCPeerConnection
MediaStream
RTCDataChannel

RTCPeerConnectionオブジェクト

このオブジェクトは、WebRTC APIへの主要なエントリポイントです。ピアへの接続、接続の初期化、およびメディアストリームの接続に役立ちます。また、別のユーザーとのUDP接続を管理します。

RTCPeerConnectionオブジェクトの主なタスクは、ピア接続をセットアップして作成することです。このオブジェクトはイベントが発生すると一連のイベントを発生させるため、接続のキーポイントを簡単にフックできます。これらのイベントにより、接続の構成にアクセスできます-

RTCPeerConnectionオブジェクト

RTCPeerConnectionはシンプルなjavascriptオブジェクトであり、この方法で簡単に作成できます-

[code]
var conn = new RTCPeerConnection(conf);

conn.onaddstream = function(stream) {
  //use stream here
};

[/code]

RTCPeerConnectionオブジェクトは、_conf_パラメーターを受け入れます。これについては、これらのチュートリアルの後半で説明します。 _onaddstream_イベントは、リモートユーザーがピア接続にビデオまたはオーディオストリームを追加したときに発生します。

MediaStream API

最新のブラウザにより、開発者は_MediaStream_ APIとも呼ばれる_getUserMedia_ APIにアクセスできます。機能の3つのキーポイントがあります-

開発者は、ビデオおよびオーディオストリームを表す_stream_オブジェクトにアクセスできます。
ユーザーがデバイスに複数のカメラまたはマイクを持っている場合に、入力ユーザーデバイスの選択を管理します
ユーザーがストリームを取得するたびにセキュリティレベルを要求します。

このAPIをテストするには、簡単なHTMLページを作成しましょう。単一の<video>要素が表示され、カメラの使用許可をユーザーに要求し、カメラのライブストリームをページに表示します。 _indexl_ファイルを作成して追加します-

[code]
<html>

   <head>
      <meta charset = "utf-8">
   </head>

   <body>
      <video autoplay></video>
      <script src = "client.js"></script>
   </body>

</html>
[/code]

次に、_client.js_ファイルを追加します-

[code]
//checks if the browser supports WebRTC

function hasUserMedia() {
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
      || navigator.mozGetUserMedia || navigator.msGetUserMedia;
   return !!navigator.getUserMedia;
}

if (hasUserMedia()) {
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
      || navigator.mozGetUserMedia || navigator.msGetUserMedia;

  //get both video and audio streams from user's camera
   navigator.getUserMedia({ video: true, audio: true }, function (stream) {
      var video = document.querySelector('video');

     //insert stream into the video tag
      video.src = window.URL.createObjectURL(stream);
   }, function (err) {});

}else {
   alert("Error. WebRTC is not supported!");
}
[/code]

_indexl_を開くと、顔を表示するビデオストリームが表示されます。

ただし、WebRTCはサーバー側でのみ機能するため、注意してください。このページをブラウザで開くだけでは機能しません。これらのファイルは、ApacheまたはNodeサーバーでホストする必要があります。

RTCDataChannelオブジェクト

ピア間でメディアストリームを送信するだけでなく、DataChannel APIを使用して追加データを送信することもできます。このAPIはMediaStream APIと同じくらい簡単です。主な仕事は、既存のRTCPeerConnectionオブジェクトから来るチャネルを作成することです-

[code]
var peerConn = new RTCPeerConnection();

//establishing peer connection
//...
//end of establishing peer connection
var dataChannel = peerConnection.createDataChannel("myChannel", dataChannelOptions);

//here we can start sending direct messages to another peer
[/code]

これで、必要なのは2行のコードだけです。それ以外はすべて、ブラウザの内部層で行われます。 _RTCPeerConnectionobject_が閉じられるまで、任意のピア接続でチャネルを作成できます。

概要

これで、WebRTCアーキテクチャをしっかりと把握できるはずです。また、MediaStream、RTCPeerConnection、およびRTCDataChannel APIも取り上げました。 WebRTC APIは動くターゲットなので、常に最新の仕様に遅れずについていく必要があります。

Webrtc-architecture

目次

WebRTC-アーキテクチャ

WebRTC API

RTCPeerConnectionオブジェクト

MediaStream API

RTCDataChannelオブジェクト

概要