Google Chromeでカメラ映像を表示する
最初に、Google Chromeを使ってカメラ映像を表示します。HTMLではvideo要素を用意し、autoplay属性を指定します。autoplay属性を指定しないと最初に取り込まれた1フレーム目しか表示されず、静止したままになってしまいます。
デバイスからはnavigatorオブジェクトのgetUserMedia()メソッドを使って映像を取り込みます。Google Chromeではベンダープレフィックス付きで、navigator.webkitGetUserMedia()のように指定します。
webkitGetUserMedia()には3つの引数を指定します。第1引数には取り込むメディアストリームの種類を"video"または"audio"、もしくは"video, audio"として指定します※。
webkitGetUserMedia()の第2引数には取り込みに成功したときに呼び出す関数を指定します。この関数にデバイスから取得したデータが渡されます。Google ChromeではストリームをwebkitURL.createObjectURL()を使ってオブジェクトURL形式に変換した後にvideo要素のsrc属性に入れます。これだけで、video要素にリアルタイムで映像が流れます。
webkitGetUserMedia()の第3引数にはエラー発生時(デバイスからの取り込みに失敗したときなど)に呼び出す関数を指定します。この関数にはエラーオブジェクトが渡されます。エラーオブジェクトのcodeプロパティを参照すれば発生したエラーを確認できます。カメラからの取り込みが許可されていない場合はPERMISSION_DENIEDエラーとなります。
サンプル1が、Google Chromeでカメラからリアルタイムで映像を取り込み、再生するプログラムです。
※WebRTCの新しい仕様(W3C Editor's Draft 07 June 2012)では文字列ではなく{ video : true, audio: true } のように指定します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google ChromeのWebRTC</title>
<script>
window.addEventListener("load", function(){
// 映像と音声を指定。新仕様では{ video : true, audio: true }
navigator.webkitGetUserMedia("video, audio",
function(stream){ // カメラからの取り込みがOKな場合
// 映像を表示するvideo要素にURLとして代入
var myVideo = document.getElementsByTagName("video")[0];
myVideo.src = webkitURL.createObjectURL(stream);
},
function(error){ // エラーの場合
console.log("エラー:"+error.code);
}
);
}, false);
</script>
</head>
<body>
<video src="" width="320" height="240" autoplay style="border:1px solid black"></video>
</body>
</html>
Opera 12でカメラ映像を表示する
次に、サンプル1と同様のプログラムをOpera 12向けに作ります。video要素にautoplay属性を指定する点やgetUserMedia()メソッドの引数は同じですが、Opera 12はベンダープレフィックスが不要でnavigator.getUserMedia()として指定します。
カメラから取り込みに成功した場合、Google ChromeではwebkitURL.createObjectURL()メソッドで変換しましたが、Operaの場合は変換せずそのままvideo要素のsrc属性に代入します。
実際のプログラムがサンプル2です。Opera 12でもリアルタイムで映像が表示されます。Google Chromeよりも若干高速に表示されるようです。なお、Google Chrome/Opera 12ともカメラからの取り込みを開始する際にはユーザーに許可を求める画面が表示されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Opera 12のWebRTC</title>
<script>
window.addEventListener("load", function(){
// 映像と音声を指定。新仕様では{ video : true, audio: true }
navigator.getUserMedia("video, audio",
function(stream){ // カメラからの取り込みがOKな場合
// 映像を表示するvideo要素にそのまま代入
var myVideo = document.getElementsByTagName("video")[0];
myVideo.src = stream;
},
function(error){ // エラーの場合
console.log("エラー:"+error.code);
}
);
}, false);
</script>
</head>
<body>
<video width="320" height="240" autoplay style="border:1px solid black"></video>
</body>
</html>