WebRTCをシンプルに試す

WebRTCって、なんなの?使うのめんどくさいの?
って、日頃から気になっていたので、簡単に動くことを試してみた。
RTCは、Real-Time Communicationsの略で、ブラウザでカメラとか音とか扱える夢いっぱいの機能です。
前提として、 Google Chromeだと、まだ開発版(Dev channel)しか対応していないらしいので、
開発版をダウンロードして試します。
あと、残念ながらカメラがないと試せません。。。

Chrome開発版ダウンロード と WebRTCの有効化

Chrome開発版をビルドすると大変時間がかかるので、
以下のサイトから環境にあったChrome開発版をダウンロードします。
私が使ったのは、Dev channel for 64-bit Debian/Ubuntuです。
http://dev.chromium.org/getting-involved/dev-channel
ダウンロード後に、Chromeをインストールし、起動します。

URLを入力するアドレス欄に
chrome://flags
を入力すると、試験運用機能の設定画面が表示されるので
「MediaStream を有効にする」をオンにしてください。

その他の準備

Webカメラとapacheか何かWebサーバが必要です。
これで、環境は出来上がりです。

HTMLを書く

以下のカメラ映像を表示するだけのHTMLを書きます。

<html>
<head>
<title>sample01</title>
</head>
<body>
<script type="text/javascript">
var localvideo;
initialize = function() {
  localvideo = document.getElementById("localvideo");
  navigator.webkitGetUserMedia("video,audio",onGotStream,onFailedStream);
}

onGotStream = function(stream) {
  console.log("onGotStream");
  var url = webkitURL.createObjectURL(stream);
  localvideo.src = url;
}

onFailedStream = function(error) {
  alert("onFailedStream");
}

setTimeout(initialize,1000);
</script>
<video id="localvideo" autoplay></video>
</body>
</html>

ChromeでWebサーバにアクセスする

つくったHTMLをそのままChromeにドラッグ&ドロップしても動作しないので、
HTMLをWebサーバで公開し、アクセスします。

f:id:alumican:20120321135604p:plain

Chromeから許可を求められるので、「許可」を押します。
以下のようなカメラ映像が得られれば、成功です!

f:id:alumican:20120321135608p:plain