HTML5-Web RTC

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

試してみたい場合は？Chrome、Opera、Firefoxで利用可能なWebRTC。開始するのに適した場所は、ここにある簡単なビデオチャットアプリケーションです。Web RTCは、以下に示すように3つのAPIを実装します-

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

MediaStream

MediaStreamは、メディアの同期ストリームを表します。たとえば、HTML5デモセクションでHTML5ビデオプレーヤーをクリックするか、ここをクリックしてください。

上記の例には、stream.getAudioTracks（）とstream.VideoTracks（）が含まれています。オーディオトラックがない場合は、空の配列を返し、ビデオストリームをチェックします。ウェブカメラが接続されている場合、stream.getVideoTracks（）は、ウェブカメラからのストリームを表す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が必要です。この機能は、Operaではまだ利用できません。サンプルデモはこちらから入手できます

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

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

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));
};