Downloaded 32 times
More Related Content
![[社内勉強会]ELBとALBと数万スパイク負荷テスト](https://cdn.slidesharecdn.com/ss_thumbnails/elbalb-160822022623-thumbnail.jpg?width=640&height=640&fit=bounds)
WebRTCでドラゴンボールごっこ
- 1. WebRTCで ドラゴンボールごっこ 2012/07/21 #daiNagoyaJS @girigiribauer
- 2. WebRTCとは • RTCは、Real TimeCommunication の略 • ローカルデバイスにアクセスするための getUserMedia API • ブラウザとブラウザ同士が直接通信する Peer-to-Peer connections API
- 3. WebRTCとは • getUserMedia は gUM と略されることも あるっぽい • 時代はリアルタイム
- 4. ドラゴンボールとは • みんな大好きドラゴンボール • 説明不要 http://www.dragonball2013.com/ より引用
- 5. 対応状況（※2012/07/21時点） • みんなの味方、 “Whencan 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 BecomesA Super Saiyan http://www.youtube.com/watch?v=u8szR7LnmlI
- 14.
- 15.
- 16. 本日のレシピ • 1. getUserMediaで映像と音が取れるか 検証 • 2. 今までのHTML技術との組み合わせ • 3. Tipsとか • 4. まとめ
- 17.
- 18.
- 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.
- 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.
- 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.
- 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.
Editor's Notes
- #2 \n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 \n
- #57 \n
- #58 \n
- #59 \n
- #60 \n
- #61 \n
- #62 \n
- #63 \n
- #64 \n
- #65 \n
- #66 \n
- #67 \n