WebRTCの検証がてら、簡単なコンテンツを作ってみました。 その中で気になったことなどを資料にまとめてます。

1. WebRTCで
ドラゴンボールごっこ
2012/07/21
#daiNagoyaJS @girigiribauer

2. WebRTCとは
• RTCは、Real Time Communication の略
• ローカルデバイスにアクセスするための
getUserMedia API
• ブラウザとブラウザ同士が直接通信する
Peer-to-Peer connections API

3. WebRTCとは
• getUserMedia は gUM と略されることも
あるっぽい
• 時代はリアルタイム

4. ドラゴンボールとは
• みんな大好きドラゴンボール
• 説明不要
http://www.dragonball2013.com/ より引用

5. 対応状況（※2012/07/21時点）
• みんなの味方、 “When can I use”
http://caniuse.com/#feat=stream
• Operaはすでに対応
• Chromeもオプションいじればプレ
フィックス付きで使える

6. 対応状況（※2012/07/21時点）
• Firefox 16（今のNightly）は
getUserMedia のみに対応予定
http://hacks.mozilla.org/2012/07/getusermedia-is-
ready-to-roll/
• これからどんどん増えていきそうで
楽しみ！

7. getUserMedia API で
どんなことできるの？
• 写真とって投稿するのが
Webアプリでできる
• ARで遊ぶとか

8. getUserMedia API で
どんなことできるの？
• 顔認識させたり
（試してみたけどけっこう重い、
特別な理由がない限りはネイティブア
プリ向き？）
https://github.com/liuliu/ccv

9. Peer-to-Peer connections API
でどんなことできるの？
• （Peer to Peer なので）サーバに負荷の
かかりにくい、双方向なビデオチャッ
トとか
• （HTML5エロチャットサイトとか
乱立しそう。。。）

10. Peer-to-Peer connections API
でどんなことできるの？
• スマートフォンとか需要ありそうなの
で、早く対応してくれたらいいな
• 今回はこっちは触れる程度で。。。

11. JavaScriptでカメラいじれるなら、
いろいろいじりたい！

12. JavaScriptでカメラいじれるなら、
いろいろいじりたい！
• HTMLの要素として扱える
• スタイルもあてられる
• canvasの要素としても
エフェクト（画像処理）かけられる

13. これだ！
• Jaylen Becomes A Super Saiyan
http://www.youtube.com/watch?v=u8szR7LnmlI

14. これだ！
• 今回はこれが元ネタ
• リアルタイムでやりたい！

15. ということで、

16. 本日のレシピ
• 1. getUserMedia で映像と音が取れるか
検証
• 2. 今までのHTML技術との組み合わせ
• 3. Tipsとか
• 4. まとめ

17. 1. getUserMedia で
映像と音が取れるか
検証

18. chromeでの API の許可

19. chromeでの API の許可
• chrome://flags にアクセス
• 「MediaStreamを有効にする」に
チェックして再起動

20. getUserMedia APIの
基本的な使い方
• 仕様はこちら
http://dev.w3.org/2011/webrtc/editor/
getusermedia.html#navigatorusermedia
• 呼び出し方は以下の通り
navigator.webkitGetUserMedia(
constraints, // devices
successCallback, // ok
errorCallback // ng
);

21. getUserMedia APIの
基本的な使い方
• constraints は、どのデバイスに許可
出すかの指定をオブジェクトで行う
• successCallback は、ユーザーが許可した
ときに呼ばれるコールバック関数

22. getUserMedia APIの
基本的な使い方
• successCallback の引数として
LocalMediaStream オブジェクトが取得で
きる
• errorCallback は、それ以外のときに
呼ばれるコールバック関数

23. 過去に仕様が変わっていて、
動かないサンプルが多いので注意
• 主に第1引数が変わってて、それで動か
ないサンプルが多い（仕様策定と実装
が平行で進められているのでしょうが
ない）

24. 過去に仕様が変わっていて、
動かないサンプルが多いので注意
• "video audio" という文字列指定が、
{ "video": true, "audio": true } のオブジェ
クト指定に変わった
http://www.webrtc.org/blog/
changestoourwebrtcapiimplementation

25. 現時点でオーディオの入力デバイス
（マイク）にアクセスできない（！）
• getUserMedia では、audio指定しても、
現時点ではまだ取得できない
• 詳しいやりとりはこのへんっぽい
http://code.google.com/p/chromium/issues/detail?
id=112367
• 対応してくれるのをおとなしく待つ

26. 「はああああ！！！」とか
言って反応させるとか、
まだできない・・・！？

27. 「はああああ！！！」とか
言って反応させるとか、
まだできない・・・！？
このタイミングでちょっと萎えた

28. 取得した LocalMediaStream オブジェク
トをきちんと表示するところまで(1)
• canvas要素を作る、もしくは予め作った
要素を参照する
• var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

29. 取得した LocalMediaStream オブジェク
トをきちんと表示するところまで(2)
• createObjectURL にさっきの
LocalMediaStream オブジェクトを
ぶちこんで、BlobURL（リソースを参照
してる）を取得する
• var videoUrl = createObjectURL(stream);

30. 取得した LocalMediaStream オブジェク
トをきちんと表示するところまで(2)
• デバイスをBlobURLとして受け取ること
で、同様のインターフェースで扱える
（URL参照 ≒ デバイス参照）
• Blobは Binary Large OBject の略、
FileAPI 周りでよく使われてる

31. 取得した LocalMediaStream オブジェク
トをきちんと表示するところまで(3)
• video タグの src 属性に、
さっきの BlobURL をつっこむ
• var video = document.getElementById('video');
video.src = videoUrl;
video.autoplay = true;
• ※autoplay 属性がないと最初の1コマだ
けで止まっちゃうのでつける

32. 取得した LocalMediaStream オブジェク
トをきちんと表示するところまで(4)
• あとは連続して canvas に video 要素を
反映してやるだけ
• var render = function() {
context.drawImage(video, 0, 0, w, h);
requestAnimationFrame(render);
};
requestAnimationFrame(render);

33. ここまでのサンプル
• http://web-utage.com/sample/
dragonball_super_saiyan/

34. 軽くまとめ
• 1. 表示用の canvas を用意（表示するだ
けなら video タグだけでOK）
• 2. createObjectURL を使って、デバイス
アクセス用のBlobURLを取得する
• 3. video タグの src に BlobURL をつっこ
む（と表示される）

35. 軽くまとめ
• 4. canvas に毎フレーム反映する
• これだけでカメラ画像取得できる、
なんという素敵な時代に生まれたのか

36. 本日のレシピ
• 1. getUserMedia で映像と音が取れるか
検証
• 2. 今までのHTML技術との組み合わせ
• 3. Tipsとか
• 4. まとめ

37. 2. 今までのHTML技術
との組み合わせ

38. 今までのHTML技術との
組み合わせ
• 音が取れない以上、
今回はこっちでがんばるしかない

39. 考えられる組み合わせ
• 1. canvas をピクセル単位で
いろいろいじる
• 2. CSS filter でエフェクトかける
• 3. その他、既存手法いろいろ

40. 1. canvas をピクセル単位で
いろいろいじる
• context.getImageData()
配列でピクセルの値を取得
• context.putImageData()
配列のピクセルの値をセット
• この間でピクセルの数値を変えちゃえ
ば、簡単にエフェクトかけられる

41. 1. canvas をピクセル単位で
いろいろいじる
• var data = context.getImageData(0, 0, 370, 370);
（中略、黒→黄色とか）
context.putImageData(data, 0, 0);
• きっと画像処理の分野から応用すれ
ば、いろいろ良さげなライブラリたく
さん出てきそう

42. 2. CSS filter
• Chrome18から使える
http://caniuse.com/#feat=css-filters
• 任意の要素に対して、CSS でフィルター
かけられる（bodyタグでも）
• このページが比較的分かりやすい
http://www.html5rocks.com/en/tutorials/filters/
understanding-css/

43. 2. CSS filter
• grayscale : 白黒フィルター、0 ∼ 100% の
範囲
• sepia : セピア色、上に同じく
• saturate : 油絵の具で塗ったような感じ
• hue-rotate : 色相を回転させる
• invert : 色を反転させる

44. 2. CSS filter
• opacity : 不透明度（なんでこれあるのか
分からないけど、読む限りハードウェ
アアクセラレーションでこっちのがパ
フォーマンスが良いらしい）
• brightness : 明るさの変化、白く飛ばし
た感じ

45. 2. CSS filter
• contrast : コントラスト比をいじる
• blur : ぼかし
• drop-shadow : 影効果（これもopacityと
同じで、CSSにbox-shadowってのがあ
る）

46. 2. CSS filter
• スペースでつなげて複数指定もできる
（ただやりすぎると重くなるので注意）
• -webkit-filter: brightness(0.5) grayscale(1.0);
→元々黄色いやつを白く飛ばしておくとか

47. 3. その他いろいろ
• かけたいエフェクトにもよるけど、
複雑なものはPNGとかでテキトーに
作ってかぶせた方が早い
• JavaScript で canvas のピクセルいじれば
なんとかできるけど時間の無駄になる
ことが多い（＆めんどくさい）

48. ここまでのサンプル
• http://web-utage.com/sample/
dragonball_super_saiyan/

49. 軽くまとめ
• 結局 canvas に反映しちゃえば、あとは
canvas に対する操作と何ら変わらない
• Chrome に限れば CSS filter も使えるの
で表現の幅が広がる
（＆canvas なら楽できる）
• 後は既存の手法とのいいとこ取り

50. 本日のレシピ
• 1. getUserMedia で映像と音が取れるか
検証
• 2. 今までのHTML技術との組み合わせ
• 3. Tipsとか
• 4. まとめ

51. 3. Tipsとか

52. navigator.getUserMedia は
別名で呼べない
• TypeError: Illegal invocation ってエラー
• navigator.getUserMedia を別変数で参照し
て呼んでもダメ
• プレフィックスの違いを吸収したいと
きは、関数呼び出しをまるごと返す

53. navigator.getUserMedia は
別名で呼べない
var getUserMedia = function(t, onsuccess, onerror) {
if (navigator.getUserMedia) {
return navigator.getUserMedia(t, onsuccess, onerror);
} else if (navigator.webkitGetUserMedia) {
return navigator.webkitGetUserMedia(t, onsuccess, onerror);
} else if (navigator.mozGetUserMedia) {
return navigator.mozGetUserMedia(t, onsuccess, onerror);
} else if (navigator.msGetUserMedia) {
return navigator.msGetUserMedia(t, onsuccess, onerror);
} else {
onerror(new Error("No getUserMedia implementation found."));
}
};
http://www.html5rocks.com/ja/tutorials/webgl/jsartoolkit_webrtc/#toc-webrtc より

54. 毎フレームの処理が重くなりがち、
requestAnimationFrame を使った方が
よさげ
• これは WebRTC に限った話じゃないの
で、「requestAnimationFrame」でぐぐる
とたくさん出てくる

55. 毎フレームの処理が重くなりがち、
requestAnimationFrame を使った方が
よさげ
var requestAnimationFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function(callback, element) {
setTimeout(callback, 1000 / 60);
};
})();

56. LocalMediaStream→video→canvasの
とき、必ずしもvideoはDOMツリーに
入れなくともよい
• 今回、特に入力映像をそのまま表示す
る必要がなかったので、video タグは
設置してない
• canvas タグだけあればOK

57. なぜ映像は取れて、
音だけ使えないのか？
• ゆくゆくは WebRTC と WebAudioAPI と
の統合が図られているから、かも？
（英語ちょっと自信ない。。）
• このへんとか参考になるかも
http://www.html5rocks.com/en/tutorials/
getusermedia/intro/#toc-webaudio-api

58. 必ずしもJavaScriptで
解決しなくてもよい
• ガタガタ揺らすエフェクトは、
JavaScript で CSS の position プロパティ
いじるとか、斜めなら canvas 内の
ピクセルいじるしかない
• 今なら CSS animation 内で transform を
使うだけで揺らせる（斜めにも）

59. 本日のレシピ
• 1. getUserMedia で映像と音が取れるか
検証
• 2. 今までのHTML技術との組み合わせ
• 3. Tipsとか
• 4. まとめ

60. 4. まとめ

61. 4. まとめ
• WebRTC の可能性
• Web がネイティブになる世界
• リアルタイム性

62. WebRTC の可能性
• デバイスへのアクセスが一般化すると、
Webアプリで展開できる種類も増える
• スマートフォン（iOS, Android,
WindowsPhone）にWebRTCが普及し
出したころが本当のスタートかも

63. Web がネイティブになる世界
• デバイスとかの機能を Web API で呼ぶ
といった、インターフェースが徐々に
Web ベースになってきてる
• そのうちネイティブはブラウザエンジ
ンだけになって、やがて Web がネイ
ティブになる世界（例 : FirefoxOSとか）

64. リアルタイム性
• パーソナライズ（個々のユーザーに最
適化）されたものを提供するには、
その場で作ってその場で返すリアルタ
イム性が大事
• 単一なものではなく、自分ならではの
何かが欲しい人たち向け

65. リアルタイム性
• 誰もキャプチャしてエフェクトつけて
YouTubeにアップとかしない（2, 3人居たけど）
• でもその場でできるなら、
ちょっとやってみようかなって気になる
• WebRTC 試してみよう！
変身コンテンツとか作ってみよう！

66. ありがとうございました！