HTML5-Web RTC

World Wide Web Consortium（W3C）によって導入されたWeb RTC。これは、音声通話、ビデオチャット、およびP2Pファイル共有のためのブラウザー間アプリケーションをサポートします。

試してみたいですか？ Chrome、Opera、Firefoxで利用可能なweb RTC。始めるのに適した場所は、http：//apprtc.appspot.com/[こちら]にあるシンプルなビデオチャットアプリケーションです。 Web RTCは以下に示すように3つのAPIを実装しています-

MediaStream -ユーザーのカメラとマイクへのアクセスを取得します。
RTCPeerConnection -オーディオまたはビデオ通話機能へのアクセスを取得します。
RTCDataChannel -ピアツーピア通信へのアクセスを取得します。

MediaStream

MediaStreamは、メディアの同期ストリームを表します。たとえば、HTML5デモセクションでHTML5ビデオプレーヤーをクリックするか、http：//simpl.info/getusermedia/[こちら]をクリックします。

上記の例には、stream.getAudioTracks（）およびstream.VideoTracks（）が含まれています。オーディオトラックがない場合、空の配列を返し、ビデオストリームをチェックします。Webカメラが接続されている場合、stream.getVideoTracks（）は、Webカメラからのストリームを表す1つのMediaStreamTrackの配列を返します。簡単な例はチャットアプリケーションです。チャットアプリケーションは、Webカメラ、リアカメラ、マイクからストリームを取得します。

MediaStreamのサンプルコード

function gotStream(stream) {
   window.AudioContext = window.AudioContext || window.webkitAudioContext;
   var audioContext = new AudioContext();

  //Create an AudioNode from the stream
   var mediaStreamSource = audioContext.createMediaStreamSource(stream);

  //Connect it to destination to hear yourself
  //or any other node for processing!
   mediaStreamSource.connect(audioContext.destination);
}
navigator.getUserMedia({audio:true}, gotStream);

画面キャプチャ

また、mediaStreamSourceを備えたChromeブラウザーでも可能であり、HTTPSが必要です。この機能は、オペラではまだ利用できません。サンプルデモはhttps://html5-demos.appspot.com/static/getusermedia/screensharel [こちら]から入手できます。

セッション制御、ネットワークおよびメディア情報

Web RTCでは、ブラウザー間でピアツーピア通信が必要でした。このメカニズムには、シグナリング、ネットワーク情報、セッション制御、およびメディア情報が必要でした。 Web開発者は、SIPやXMPPなどのブラウザー間で通信するためのさまざまなメカニズム、または任意の双方向通信を選択できます。 XHRのサンプル例はhttps://apprtc.appspot.com/[here]です。

createSignalingChannel（）のサンプルコード

var signalingChannel = createSignalingChannel();
var pc;
var configuration = ...;

//run start(true) to initiate a call
function start(isCaller) {
   pc = new RTCPeerConnection(configuration);

  //send any ice candidates to the other peer
   pc.onicecandidate = function (evt) {
      signalingChannel.send(JSON.stringify({ "candidate": evt.candidate }));
   };

  //once remote stream arrives, show it in the remote video element
   pc.onaddstream = function (evt) {
      remoteView.src = URL.createObjectURL(evt.stream);
   };

  //get the local stream, show it in the local video element and send it
   navigator.getUserMedia({ "audio": true, "video": true }, function (stream) {
      selfView.src = URL.createObjectURL(stream);
      pc.addStream(stream);

      if (isCaller)
         pc.createOffer(gotDescription);

      else
         pc.createAnswer(pc.remoteDescription, gotDescription);

         function gotDescription(desc) {
            pc.setLocalDescription(desc);
            signalingChannel.send(JSON.stringify({ "sdp": desc }));
         }
      });
   }

   signalingChannel.onmessage = function (evt) {
      if (!pc)
         start(false);
         var signal = JSON.parse(evt.data);

      if (signal.sdp)
         pc.setRemoteDescription(new RTCSessionDescription(signal.sdp));

      else
         pc.addIceCandidate(new RTCIceCandidate(signal.candidate));
};

Html5-web-rtc

目次