1.概要

WebRTCは、主にブラウザを作り、ビデオ、オーディオおよびデータのリアルタイム交換を取得するために使用される「リアルタイム通信ネットワーク」（ウェブリアルタイムコミュニケーション）、の頭文字です。

WebRTCは3つのAPIに分かれています。

（また、getUserMediaとしても知られる）MediaStreamの
RTCPeerConnection
RTCDataChannel

getUserMediaは、映像及び音声情報、ブラウザ間のデータ交換のための2つのAPIを取得するために使用されます。

2、getUserMedia

2.1はじめに

まず、ブラウザはgetUserMediaメソッドをサポートしているかどうか確認してください。

navigator.getUserMedia || 
    （navigator.getUserMedia = navigator.mozGetUserMedia || || navigator.webkitGetUserMedia navigator.msGetUserMedia）。

もし（navigator.getUserMedia）{ 
    //何かをする
}他{ 
    （ 'お使いのブラウザはgetUserMediaをサポートしていない'）はconsole.logを。
}

Chrome21、オペラ座18とFirefox 17をサポートこのメソッドは、現在のIEだけで、将来の互換性を確保するために、上記のコードmsGetUserMediaをサポートしていません。

getUserMedia方法は、3つのパラメータを取ります。

getUserMedia（ストリーム、成功、エラー）。

以下の意味：

ストリーム：これ含むマルチメディア装置を表すオブジェクト
成功：コールバック、マルチメディアデバイスへの呼び出しが成功を取得
エラー：コールバック関数は、マルチメディア機器の故障呼び出されます

次のように使用方法は以下のとおりです。

navigator.getUserMedia（{ 
    ビデオ：真、
    オーディオ：真
}するonSuccess、のonError）。

上記のコードは、カメラとマイクのリアルタイムの情報を得るために使用されます。

ページはgetUserMediaを使用している場合、ブラウザは情報の提供を許可するかどうかをユーザーに尋ねます。ユーザーが拒否した場合、それはコールバック関数を呼び出すのonError。

エラーが発生した場合、コールバック関数がパラメータエラーオブジェクトであり、それは次のようにパラメータ値であるコードを有します。

PERMISSION_DENIED：情報を提供するために、ユーザーのゴミ。
NOT_SUPPORTED_ERROR：ブラウザが指定したメディアタイプをサポートしていません。
MANDATORY_UNSATISHIED_ERROR：指定したメディアタイプは、メディアストリームを受信しません。

2.2示すカメラ画像

カメラユーザーのページに表示されることにより、撮影した画像は、ページ上のvideo要素を配置する必要があります。この要素のディスプレイ上の画像。

<動画ID = "ウェブカメラ"> </ビデオ>

次に、コード内でこの要素を取得します。

機能するonSuccess（ストリーム）{ 

    VARビデオ=のdocument.getElementById（ 'ウェブカム'）。

    //より多くのコード
}

最後に、データ・ストリームを結合この要素のsrc属性は、カメラで撮影した画像を表示することができます。

機能するonSuccess（ストリーム）{ 

    VARビデオ=のdocument.getElementById（ 'ウェブカム'）。

    （window.URL）{もし
        video.src = window.URL.createObjectURL（ストリーム）。
    }他{ 
        video.src =ストリーム。
    } 

    video.autoplay = TRUE。
    //またはvideo.play（）; 
}

その主な目的は、ユーザーが写真を撮るためにカメラを使用することができるようにすることです。

2.3マイクキャプチャサウンド

比較的複雑な、ブラウザを介して音をキャプチャし、それがウェブオーディオAPIを必要とします。

するonSuccess関数（ストリーム）{ 

    //などのオーディオ環境を作成
    AudioContext = window.AudioContext || window.webkitAudioContext、
    コンテキスト=新しい新しいAudioContextを（）; 

    //画像にこの音声入力
    audioInput = context.createMediaStreamSources（ストリーム）; 

    /ボリュームノードセット/ 
    体積= context.createGain（）; 
    audioInput.connect（体積）; 

    //音声キャッシュのキャッシュを作成
    = 2048 VARあるbufferSizeを; 

    //ノード音声のキャッシュを作成し、createJavaScriptNode方法
    2 //と3番目のパラメータは、デュアルチャネルであり、入力と出力を指します。
    = context.createJavaScriptNodeレコーダー（あるbufferSize、2、2）; 

    //コールバック記録処理は、基本的には、左右のチャンネルの音声であり
    、それぞれ、キャッシュに//。
    =関数recorder.onaudioprocess（E）{  
        にconsole.log（ '記録'）。
        VAR e.inputBuffer.getChannelData（0）=左。
        e.inputBuffer.getChannelData右= VAR（1）; 
        //クローンWE、サンプル
        leftchannel.push（新しい新しいFloat32Array（左））; 
        rightchannel.push（新しい新しいFloat32Array（右））; 
        recordingLength + =あるbufferSize; 
    } 

    //ボリュームキャッシングノードに接続されたノードは、換言すれば、ボリュームが入力ノードであり
    、//および中間リンクを出力します。
    volume.connect（レコーダー）; 

    キャッシュノードの//出力先が接続され、マイクロホンであることができ、それもでき
    //音声ファイルです。
    recorder.connect（context.destination）; 

}

3、リアルタイムのデータ交換

さらに、2つのWebRTCのAPI、ポイント通信をポイントするためのブラウザとの間の接続、RTCDataChannelデータのRTCPeerConnectionポイント。

mozRTCPeerConnectionとしてwebkitRTCPeerConnection、Firefoxブラウザなどのブラウザプレフィックス、ChromeブラウザでRTCPeerConnection。Googleは、ブラウザ間の違いを抽象化し、ライブラリadapter.jsを維持します。

VaRのdataChannelOptions = { 
  命じ：偽、//順序保証するものではありません
  maxRetransmitTime：ミリ秒単位で3000を、// 
}; 

VAR peerConnection =新しいRTCPeerConnection（）; 

//ここにシグナリングチャネルを使用してピア接続を確立
VARデータチャネル= 
  peerConnection.createDataChannel（「mylabelという」、dataChannelOptions）。

dataChannel.onerror =関数（誤差）{ 
  にconsole.log（ "データチャネルエラー："、エラー）。
}。

dataChannel.onmessage =関数（イベント）{ 
  にconsole.log（ "ガットデータチャネルメッセージ："、event.data）。
}。

dataChannel.onopen =関数（）{ 
  dataChannel.send（ "Hello Worldの！"）; 
}。

データチャネル。
  console.log（「データチャネルが閉じています」）; 
}。

4、参照リンク

[1]アンディ・スミス、のWebRTCを始めます

[2]ティボアンベール、 getUserMediaやウェブオーディオ：マイクから.WAVにして

[3]イアン・デブリン、 HTML5ビデオとキャンバス要素とgetUserMedia APIの使用

[4]エリックBidelman、 HTML5でのキャプチャオーディオ＆ビデオ

[5]サム・ダットン、のWebRTC入門

[6]、Ristic、データチャネルのWebRTC

[7] Ruanyf、のWebRTC

転送http://www.4u4v.net/html5-xin-te-xing-zhi-webrtc-yin-shi-pin-shu-ju-jiao-hu.html

HTML5のWebRTC新機能（インタラクティブオーディオおよびビデオデータ）