Opera 12で定期的に映像を取り込む
Opera 12の場合もサンプル4とほぼ同じコードで実装できます。video要素の内容をCanvasに描画する、Canvasの内容をimg要素に出力するといった部分は変更する必要はありません。WebRTCによるカメラからの取り込み部分のみ異なりますので、取り込み部分を変更しましょう。
実際のプログラムはサンプル5です。
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要素にURLとして代入
var myVideo = document.getElementsByTagName("video")[0];
myVideo.src = stream;
},
function(error){ // エラーの場合
console.log("エラー："+error.code);
}
);
// 保存しておく画像を用意
var maxCamData = 20; // 20枚まで保存
var content = document.getElementById("camData");
for(var i=0; i<maxCamData; i++){
content.innerHTML += '<img src="images/black.png" width="160" height="120">';
}
// 2秒ごとに撮影
var camNo = 0;
setInterval(function(){
var myVideo = document.getElementsByTagName("video")[0];
var myCanvas = document.getElementsByTagName("canvas")[0];
var myImage = document.getElementsByTagName("img")[camNo];
var context = myCanvas.getContext("2d");
context.drawImage(myVideo, 0, 0, 320, 240);
camNo = ( camNo + 1 ) % maxCamData;
// 現在の時刻を取得
var dateObj = new Date();
var y = dateObj.getFullYear();
var m = dateObj.getMonth() + 1;
var d = dateObj.getDate();
var H = dateObj.getHours();
var M = dateObj.getMinutes();
var S = dateObj.getSeconds();
var dateString = y+"年"+m+"月"+d+"日 "+H+"時"+M+"分"+S+"秒";
// Canvasに描画
context.shadowBlur = 8;
context.shadowColor = "black";
context.fillStyle = "red";
context.font = "20px Arial";
context.fillText(dateString, 10, 230);
// img要素に転送
myImage.src = myCanvas.toDataURL();
}, 2*1000);
}, false);
</script>
</head>
<body>
<video width="320" height="240" autoplay style="border:1px solid black"></video>
<canvas width="320" height="240" style="opacity:1"></canvas>
<hr>
<div id="camData"></div>
</body>
</html>
共通のコードで動作させる
最後に、1つのプログラムでGoogle ChromeとOpera 12で動作するように、両ブラウザーで異なるWebRTCの処理部分を変更します。まず、Google Chromeでのnavigator.webkitGetUserMediaをnavigator.getUserMediaとして呼び出せるようにします。Opera 12ではnavigator.getUserMediaを呼び出すので以下のようになります。
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
これで、Google Chrome、Operaともに同じgetUserMedia()メソッドを呼び出して映像を取り込めるようになります。
次に異なるのはデバイスから渡されるデータ（ストリームデータ）です。Opera 12の場合は変換することなくvideo要素のsrcプロパティに代入しますが、Google Chromeの場合はwebkitURL.createObjectURL()で変換する必要があります。以下のようにif命令を使ってwebkitURL.createObjectURL()が存在している場合と、そうでない場合で処理を分けています。
if (window.webkitURL && webkitURL.createObjectURL){
myVideo.src = webkitURL.createObjectURL(stream);
}else{
myVideo.src = stream;
}
実際のプログラムがサンプル6です。Google Chrome、Opera 12とも同じコードで動作するようになりました。なお、カメラの映像はブラウザーを非表示にした状態でも取り込まれるようです(Mac OS Xで確認)。Google ChromeとOpera 12で1台のカメラから同時に映像を取り込んで処理もできます(Mac OS Xで確認)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Chrome+Opera 12のWebRTC</title>
<script>
window.addEventListener("load", function(){
// getUserMediaにwebkitGetUserMediaを設定
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
// 映像と音声を指定。新仕様では{ video : true, audio: true }
navigator.getUserMedia("video, audio",
function(stream){ // カメラからの取り込みがOKな場合
// 映像を表示するvideo要素にURLとして代入
var myVideo = document.getElementsByTagName("video")[0];
if (window.webkitURL && webkitURL.createObjectURL){
myVideo.src = webkitURL.createObjectURL(stream);
}else{
myVideo.src = stream;
}
},
function(error){ // エラーの場合
console.log("エラー："+error.code);
}
);
// 保存しておく画像を用意
var maxCamData = 20; // 20枚まで保存
var content = document.getElementById("camData");
for(var i=0; i<maxCamData; i++){
content.innerHTML += '<img src="images/black.png" width="160" height="120">';
}
// 2秒ごとに撮影
var camNo = 0;
setInterval(function(){
var myVideo = document.getElementsByTagName("video")[0];
var myCanvas = document.getElementsByTagName("canvas")[0];
var myImage = document.getElementsByTagName("img")[camNo];
var context = myCanvas.getContext("2d");
context.drawImage(myVideo, 0, 0, 320, 240);
camNo = ( camNo + 1 ) % maxCamData;
// 現在の時刻を取得
var dateObj = new Date();
var y = dateObj.getFullYear();
var m = dateObj.getMonth() + 1;
var d = dateObj.getDate();
var H = dateObj.getHours();
var M = dateObj.getMinutes();
var S = dateObj.getSeconds();
var dateString = y+"年"+m+"月"+d+"日 "+H+"時"+M+"分"+S+"秒";
// Canvasに描画
context.shadowBlur = 8;
context.shadowColor = "black";
context.fillStyle = "red";
context.font = "20px Arial";
context.fillText(dateString, 10, 230);
// img要素に転送
myImage.src = myCanvas.toDataURL();
}, 2*1000);
}, false);
</script>
</head>
<body>
<video width="320" height="240" autoplay style="border:1px solid black"></video>
<canvas width="320" height="240" style="opacity:1"></canvas>
<hr>
<div id="camData"></div>
</body>
</html>
WebRTCは、まだ仕様が変わる可能性もありますが、リアルタイムで画像／映像処理ができるという点で非常におもしろいAPIです。アイデア次第でいろいろなことができるでしょう。
それでは、また次回。
