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サーバで公開し、アクセスします。
Chromeから許可を求められるので、「許可」を押します。
以下のようなカメラ映像が得られれば、成功です!