HTML5のWebRTC新機能を詳しく解説

1.概要

WebRTCとは、「Web Real Time Communication」の略で、主にブラウザがビデオ、音声などのデータを取得して交換できるようにするために使用されます。

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

• MediaStream (getUserMedia とも呼ばれます)

• RTCPeerConnection

• RTCDataChannel

getUserMedia は主にビデオとオーディオ情報を取得するために使用され、後の 2 つの API はブラウザ間のデータ交換に使用されます。

2. getUserMedia

2.1

はじめに

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

navigator.getUserMedia || 
    (navigator.getUserMedia = navigator.mozGetUserMedia ||  navigator.webkitGetUserMedia || navigator.msGetUserMedia);

if (navigator.getUserMedia) {
    //do something
} else {
    console.log('your browser not support getUserMedia');
}

Chrome 21、Opera 18、Firefox 17 はこのメソッドをサポートしていますが、IE は現在このメソッドをサポートしていません。上記のコードの msGetUserMedia は将来の互換性を確保するためのものです。

getUserMedia メソッドは 3 つのパラメーターを受け入れます。

rreeeeの意味は次のとおりです。

streams：Multimedia
• デバイスが含まれていることを示すobject

  success：

  コールバック関数。マルチメディアデバイスが正常に取得されたときに呼び出されます。
error: callback function, get マルチメディア デバイスに障害が発生したときに呼び出されます。使用法は次のとおりです:

• getUserMedia(streams, success, error);

  上記のコードは、カメラとマイクからリアルタイム情報を取得するために使用されます。 Web ページで getUserMedia が使用されている場合、ブラウザはユーザーに情報の提供に同意するかどうかを尋ねます。ユーザーが拒否した場合、コールバック関数 onError が呼び出されます。

エラーが発生すると、コールバック
• 関数のパラメータ

  は、次の値のコード パラメータを持つ Error オブジェクトになります:

PERMISSION_DENIED: ユーザーは情報の提供を拒否します。

NOT_SUPPORTED_ERROR: ブラウザーは、指定されたメディア タイプをサポートしていません。

MANDATORY_UNSATISHIED_ERROR: 指定されたメディア タイプはメディア ストリームを受信しませんでした。

• 2.2 カメラ画像の表示

ユーザーのカメラでキャプチャした画像を Web ページに表示するには、最初に Web ページにビデオ要素を配置する必要があります。この要素には画像が表示されます。

• navigator.getUserMedia({
      video: true,
      audio: true}, onSuccess, onError);

  次に、コードを使用して要素を取得します。

  <video id="webcam"></video>

最後に、この要素の src
• 属性

  をデータストリームにバインドすると、カメラで捉えた画像を表示することができます。

  function onSuccess(stream) {    
  var video = document.getElementById('webcam');    
  //more code}

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

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

ブラウザを介してサウンドをキャプチャすることは比較的複雑であり、Web Audio API の使用が必要です。

function onSuccess(stream) {    
var video = document.getElementById('webcam');    
if (window.URL) {
        video.src = window.URL.createObjectURL(stream);
    } else {
        video.src = stream;
    }

    video.autoplay = true;    //or video.play();}

3. リアルタイムデータ交換

WebRTC の他の 2 つの API、RTCPeerConnection はブラウザ間のポイントツーポイント接続に使用され、RTCDataChannel はポイントツーポイントのデータ通信に使用されます。 RTCPeerConnection にはブラウザ接頭辞があり、Chrome ブラウザでは webkitRTCPeerConnection、Firefox ブラウザでは mozRTCPeerConnection になります。 Google は、ブラウザ間の違いを抽象化するために関数ライブラリadapter.jsを保守しています。

function onSuccess(stream) {    
//创建一个音频环境对像
    audioContext = window.AudioContext || window.webkitAudioContext;
    context = new audioContext();    
    //将声音输入这个对像
    audioInput = context.createMediaStreamSources(stream);    
    //设置音量节点
    volume = context.createGain();
    audioInput.connect(volume);    
    //创建缓存，用来缓存声音
    var bufferSize = 2048;    
    // 创建声音的缓存节点，createJavaScriptNode方法的
    // 第二个和第三个参数指的是输入和输出都是双声道。
    recorder = context.createJavaScriptNode(bufferSize, 2, 2);    
    // 录音过程的回调函数，基本上是将左右两声道的声音
    // 分别放入缓存。
    recorder.onaudioprocess = function(e){
        console.log('recording');        
        var left = e.inputBuffer.getChannelData(0);        
        var right = e.inputBuffer.getChannelData(1);        
        // we clone the samples
        leftchannel.push(new Float32Array(left));
        rightchannel.push(new Float32Array(right));
        recordingLength += bufferSize;
    }    // 将音量节点连上缓存节点，换言之，音量节点是输入
    // 和输出的中间环节。    
    volume.connect(recorder);    
    // 将缓存节点连上输出的目的地，可以是扩音器，也可以
    // 是音频文件。    
    recorder.connect(context.destination); 

}

4. 参考リンク

[1] Andi Smith、WebRTC の入門

[2] Thibault Imbert、getUserMedia と Web Audio を使用したマイクから .WAV への

[3] Ian Devlin、getUserMedia API の使用

HTML5

ビデオと

canvas

要素を使用

[4] Eric Bidelman、HTML5 でオーディオとビデオをキャプチャ

[5] Sam Dutton、WebRTC 入門

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

[7] ルアニフ、WebRTC

以上がHTML5のWebRTC新機能を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。