Web先端味見部 第0回 に行ってきた

Event HTML5

Web先端味見部 第0回 に行ってきた。こんな勉強会。

昨今のWeb技術の進化はめまぐるしいばかり。実際に手を動かして触るということができていない方も多いのではないでしょうか？
この「Web先端技術味見部」では、そうした 真新しい技術を実際に触ってみる ことを目的とした勉強会です。

Web先端技術味見部#0 : ATND

hackathonとはちょっと違う感じで(hackathonに参加したことないけど)、みんなで1つの技術を使ってみるという感じで面白かった。

WebRTC

今回のテーマはWebRTC(Web Real Time Communication)だった。仕様はこのあたり。カメラなどのデバイスを扱ったり、P2Pの通信を行ったりできる。

環境

今回試した環境はこんな感じ。Canaryは勝手にプロファイルが分かれるから便利。

プロファイルの分け方は、こちらも参考になるかも。

勉強会当日は、beta以降じゃないとMediaStream(getUserMediaとか)が使えなかったけど、最近では Chrome Stable でも使えるようになった。
chrome://flags とアドレスバーに入れて、MediaStreamを有効化する。

getUserMediaは、サーバにあるHTMLじゃないとうまく動作しないので、注意が必要。けっこうはまる。サーバがなければ、dropboxでWeb公開でもOK。

カメラを使った(getUserMedia)簡単なサンプル

まずは試してみる。設定がちゃんとできていれば、以下のページを開くとカメラからの映像が写るはず。

動かなかったら、そもそもカメラが付いているか、Chromeの最新版を使っているか、chrome://flagsでMediaStreamを有効化したか、を確認。
ソースはこんな感じ。短い。

<!DOCTYPE html>
<script>
navigator.webkitGetUserMedia("video", function(stream) {
var url = webkitURL.createObjectURL(stream);
console.log(url);
document.getElementById("v").src = url;
});
</script>
<video id="v" autoplay></video>

PeerConnection

次はこれを試してみた。

ソースの場所はこっちみたい。

でも gyp や xcode が必要で、けっこう大変だったので諦めた。

WebRTCでP2Pの動画チャット

これも試してみた。

ブラウザを2つ上げて、通信のハンドシェイク的なことを手動で入力していくと、ローカル側の動画とリモート側の動画が表示される。でも違うPC同士だと、なぜかうまくいかなくて、ローカルでブラウザを2つ上げる場合だとうまくいく。原因はよくわからなかった。
あと、Chrome Canaryだとうまく動かなかった。PeerConnection(webkitPeerConnection)というAPIを使うけど、PeerConnection00(webkitPeerConnection00)という名前に変更されていた。きっとこのあたりが関係しているけど、ちゃんと読んでない。

VideoからCanvas

勉強会の最中と、勉強会後に、これを作っていた。といっても、もともとはHTML5とか勉強会で、Operaのダニエルさんが発表していたものを自分で書きなおしてみただけ。でも自分で書きなおしてみると、いろいろ発見がある。コードを眺めていただけではわからないことがたくさんある。


getUserMediaでビデオからの入力をvideoに入れて、それをCanvasに渡している。Canvasの context.drawImage の第1引数には img, canvas, video 要素が取れる。というわけで、ここでvideo要素を渡している。そして setInterval で Canvas を定期的に書き換えているので、動画っぽく表示される。
getUserMedia -> video -> Canvas という感じで使えば、動画をCanvasでいろいろ操作できるので楽しい。これ、よく使うことになるんだろうなーと思った。


参考URLはこちら。最後のデモは、ビデオをクリックすると弾けるようなエフェクトがあって楽しい。

OperaとChromeのコードの違いは2つ。

  • navigator.getUserMedia か navigator.webkitGetUserMedia
  • video.src = stream; か video.src = window.webkitURL.createObjectURL(stream);

まとめ

最初だし、いろいろ手探りな感じで進んでいった。試してみたら全然動かない、ということがあったりした。でもそういうのって、普段はひとりでうまく行かねーなー、なんでだよーってやっていることで、それをみんなでやってみるというのは面白かった。WebRTC、ひとりではあまり触らなかったと思う。何ができるのかよくわかっていなかったから。
個人的には、WebSocketやP2Pにあまり興味がなくて、でもデバイス関連はけっこう好き。HTML5関連は幅広すぎるので、興味のないことは必要になるまで置いておいて、興味のあるところや、必要に迫られたところから勉強していけばいいと思っている。
学生のときはみんなで勉強するのって普通のことだけど、大人になってから、社会人になってからはあまりなかったな、と思った。楽しかったので、また参加したい。