カテゴリー別アーカイブ: WebRTC

WebRTC

WebRTCを利用すれば, カメラやマイクといったデバイスとブラウザを連携させることが可能になります.

(function(){
    window.URL             = window.URL || window.webkitURL;
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;

    document.addEventListener('DOMContentLoaded', function() {
        var video   = document.querySelector('video');   //カメラから取得した映像が流れる
        var canvas  = document.querySelector('canvas');  //Videoの映像をCanvasにも描画する
        var context = canvas.getContext('2d');

        navigator.getUserMedia({audio : false, video : true}, function(stream) {
            video.src = window.URL.createObjectURL(stream);

            //Canvasにも描画する
            window.setInterval(function(){
                context.drawImage(video, 0, 0, canvas.width, canvas.height);
            }, 0);
        }, function(error) {
            //エラー時のコールバック関数
            console.error(error);
        });
    }, true);
})();

デバイスを連携させるためのAPIが, navigator.getUserMediaメソッドです. ただし, 現状では, ChromeとOperaでしか実装されておらず, また, ベンダープレフィックス (webkit) も必要になります.

getUserMediaメソッドの引数は,

  1. どのメディアを取り込むかを表すオブジェクト
  2. 成功時のコールバック関数
  3. 失敗時のコールバック関数

1については, 例えば, マイクとカメラからとりこむのであれば, {audio : true, video : true} といった感じで指定します.

3のコールバック関数には, エラー情報をもつErrorオブジェクトが渡されます.

そして, 重要なのが, 2. の成功時のコールバック関数です. このコールバック関数には, MediaStreamインスタンスが引数として渡されます. これが, デバイスから取得したデータの実体です.

createObjectURLの引数にこれを指定した返り値を, HTMLMediaElementのsrc属性としてします.

また, Canvasに描画することで, 取得したデータに対してより多くの処理 (画像フィルタ, お絵描き, DataURLへの変換 + ダウンロードなど) が可能になります.

ちなみに, Web Audio APIでは, このMediaStreamインスタンスを入力ソーストする, MediaStreamAudioSourceNodeが定義されています.