WebRTCでドラゴンボールごっこ

6,890 views

Published on

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

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,890
On SlideShare
0
From Embeds
0
Number of Embeds
41
Actions
Shares
0
Downloads
31
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • WebRTCでドラゴンボールごっこ

    1. 1. WebRTCでドラゴンボールごっこ 2012/07/21 #daiNagoyaJS @girigiribauer
    2. 2. WebRTCとは• RTCは、Real Time Communication の略• ローカルデバイスにアクセスするための getUserMedia API• ブラウザとブラウザ同士が直接通信する Peer-to-Peer connections API
    3. 3. WebRTCとは• getUserMedia は gUM と略されることも あるっぽい• 時代はリアルタイム
    4. 4. ドラゴンボールとは• みんな大好きドラゴンボール• 説明不要 http://www.dragonball2013.com/ より引用
    5. 5. 対応状況(※2012/07/21時点)• みんなの味方、 “When can I use” http://caniuse.com/#feat=stream• Operaはすでに対応• Chromeもオプションいじればプレ フィックス付きで使える
    6. 6. 対応状況(※2012/07/21時点)• Firefox 16(今のNightly)は getUserMedia のみに対応予定 http://hacks.mozilla.org/2012/07/getusermedia-is- ready-to-roll/• これからどんどん増えていきそうで 楽しみ!
    7. 7. getUserMedia API で どんなことできるの?• 写真とって投稿するのが Webアプリでできる• ARで遊ぶとか
    8. 8. getUserMedia API で どんなことできるの?• 顔認識させたり (試してみたけどけっこう重い、 特別な理由がない限りはネイティブア プリ向き?) https://github.com/liuliu/ccv
    9. 9. Peer-to-Peer connections API でどんなことできるの?• (Peer to Peer なので)サーバに負荷の かかりにくい、双方向なビデオチャッ トとか• (HTML5エロチャットサイトとか 乱立しそう。。。)
    10. 10. Peer-to-Peer connections API でどんなことできるの?• スマートフォンとか需要ありそうなの で、早く対応してくれたらいいな• 今回はこっちは触れる程度で。。。
    11. 11. JavaScriptでカメラいじれるなら、 いろいろいじりたい!
    12. 12. JavaScriptでカメラいじれるなら、 いろいろいじりたい!• HTMLの要素として扱える• スタイルもあてられる• canvasの要素としても エフェクト(画像処理)かけられる
    13. 13. これだ!• Jaylen Becomes A Super Saiyan http://www.youtube.com/watch?v=u8szR7LnmlI
    14. 14. これだ!• 今回はこれが元ネタ• リアルタイムでやりたい!
    15. 15. ということで、
    16. 16. 本日のレシピ• 1. getUserMedia で映像と音が取れるか 検証• 2. 今までのHTML技術との組み合わせ• 3. Tipsとか• 4. まとめ
    17. 17. 1. getUserMedia で映像と音が取れるか 検証
    18. 18. chromeでの API の許可
    19. 19. chromeでの API の許可• chrome://flags にアクセス• 「MediaStreamを有効にする」に チェックして再起動
    20. 20. getUserMedia APIの 基本的な使い方• 仕様はこちら http://dev.w3.org/2011/webrtc/editor/ getusermedia.html#navigatorusermedia• 呼び出し方は以下の通り navigator.webkitGetUserMedia( constraints, // devices successCallback, // ok errorCallback // ng );
    21. 21. getUserMedia APIの 基本的な使い方• constraints は、どのデバイスに許可 出すかの指定をオブジェクトで行う• successCallback は、ユーザーが許可した ときに呼ばれるコールバック関数
    22. 22. getUserMedia APIの 基本的な使い方• successCallback の引数として LocalMediaStream オブジェクトが取得で きる• errorCallback は、それ以外のときに 呼ばれるコールバック関数
    23. 23. 過去に仕様が変わっていて、動かないサンプルが多いので注意• 主に第1引数が変わってて、それで動か ないサンプルが多い(仕様策定と実装 が平行で進められているのでしょうが ない)
    24. 24. 過去に仕様が変わっていて、動かないサンプルが多いので注意• "video audio" という文字列指定が、 { "video": true, "audio": true } のオブジェ クト指定に変わった http://www.webrtc.org/blog/ changestoourwebrtcapiimplementation
    25. 25. 現時点でオーディオの入力デバイス(マイク)にアクセスできない(!)• getUserMedia では、audio指定しても、 現時点ではまだ取得できない• 詳しいやりとりはこのへんっぽい http://code.google.com/p/chromium/issues/detail? id=112367• 対応してくれるのをおとなしく待つ
    26. 26. 「はああああ!!!」とか言って反応させるとか、まだできない・・・!?
    27. 27. 「はああああ!!!」とか言って反応させるとか、まだできない・・・!? このタイミングでちょっと萎えた
    28. 28. 取得した LocalMediaStream オブジェクトをきちんと表示するところまで(1)• canvas要素を作る、もしくは予め作った 要素を参照する• var canvas = document.getElementById(canvas); var context = canvas.getContext(2d);
    29. 29. 取得した LocalMediaStream オブジェクトをきちんと表示するところまで(2)• createObjectURL にさっきの LocalMediaStream オブジェクトを ぶちこんで、BlobURL(リソースを参照 してる)を取得する• var videoUrl = createObjectURL(stream);
    30. 30. 取得した LocalMediaStream オブジェクトをきちんと表示するところまで(2)• デバイスをBlobURLとして受け取ること で、同様のインターフェースで扱える (URL参照 ≒ デバイス参照)• Blobは Binary Large OBject の略、 FileAPI 周りでよく使われてる
    31. 31. 取得した LocalMediaStream オブジェクトをきちんと表示するところまで(3)• video タグの src 属性に、 さっきの BlobURL をつっこむ• var video = document.getElementById(video); video.src = videoUrl; video.autoplay = true;• ※autoplay 属性がないと最初の1コマだ けで止まっちゃうのでつける
    32. 32. 取得した LocalMediaStream オブジェクトをきちんと表示するところまで(4)• あとは連続して canvas に video 要素を 反映してやるだけ• var render = function() { context.drawImage(video, 0, 0, w, h); requestAnimationFrame(render); }; requestAnimationFrame(render);
    33. 33. ここまでのサンプル• http://web-utage.com/sample/ dragonball_super_saiyan/
    34. 34. 軽くまとめ• 1. 表示用の canvas を用意(表示するだ けなら video タグだけでOK)• 2. createObjectURL を使って、デバイス アクセス用のBlobURLを取得する• 3. video タグの src に BlobURL をつっこ む(と表示される)
    35. 35. 軽くまとめ• 4. canvas に毎フレーム反映する• これだけでカメラ画像取得できる、 なんという素敵な時代に生まれたのか
    36. 36. 本日のレシピ• 1. getUserMedia で映像と音が取れるか 検証• 2. 今までのHTML技術との組み合わせ• 3. Tipsとか• 4. まとめ
    37. 37. 2. 今までのHTML技術 との組み合わせ
    38. 38. 今までのHTML技術との 組み合わせ• 音が取れない以上、 今回はこっちでがんばるしかない
    39. 39. 考えられる組み合わせ• 1. canvas をピクセル単位で いろいろいじる• 2. CSS filter でエフェクトかける• 3. その他、既存手法いろいろ
    40. 40. 1. canvas をピクセル単位で いろいろいじる• context.getImageData() 配列でピクセルの値を取得• context.putImageData() 配列のピクセルの値をセット• この間でピクセルの数値を変えちゃえ ば、簡単にエフェクトかけられる
    41. 41. 1. canvas をピクセル単位で いろいろいじる• var data = context.getImageData(0, 0, 370, 370); (中略、黒→黄色とか) context.putImageData(data, 0, 0);• きっと画像処理の分野から応用すれ ば、いろいろ良さげなライブラリたく さん出てきそう
    42. 42. 2. CSS filter• Chrome18から使える http://caniuse.com/#feat=css-filters• 任意の要素に対して、CSS でフィルター かけられる(bodyタグでも)• このページが比較的分かりやすい http://www.html5rocks.com/en/tutorials/filters/ understanding-css/
    43. 43. 2. CSS filter• grayscale : 白黒フィルター、0 ∼ 100% の 範囲• sepia : セピア色、上に同じく• saturate : 油絵の具で塗ったような感じ• hue-rotate : 色相を回転させる• invert : 色を反転させる
    44. 44. 2. CSS filter• opacity : 不透明度(なんでこれあるのか 分からないけど、読む限りハードウェ アアクセラレーションでこっちのがパ フォーマンスが良いらしい)• brightness : 明るさの変化、白く飛ばし た感じ
    45. 45. 2. CSS filter• contrast : コントラスト比をいじる• blur : ぼかし• drop-shadow : 影効果(これもopacityと 同じで、CSSにbox-shadowってのがあ る)
    46. 46. 2. CSS filter• スペースでつなげて複数指定もできる (ただやりすぎると重くなるので注意)• -webkit-filter: brightness(0.5) grayscale(1.0); →元々黄色いやつを白く飛ばしておくとか
    47. 47. 3. その他いろいろ• かけたいエフェクトにもよるけど、 複雑なものはPNGとかでテキトーに 作ってかぶせた方が早い• JavaScript で canvas のピクセルいじれば なんとかできるけど時間の無駄になる ことが多い(&めんどくさい)
    48. 48. ここまでのサンプル• http://web-utage.com/sample/ dragonball_super_saiyan/
    49. 49. 軽くまとめ• 結局 canvas に反映しちゃえば、あとは canvas に対する操作と何ら変わらない• Chrome に限れば CSS filter も使えるの で表現の幅が広がる (&canvas なら楽できる)• 後は既存の手法とのいいとこ取り
    50. 50. 本日のレシピ• 1. getUserMedia で映像と音が取れるか 検証• 2. 今までのHTML技術との組み合わせ• 3. Tipsとか• 4. まとめ
    51. 51. 3. Tipsとか
    52. 52. navigator.getUserMedia は 別名で呼べない• TypeError: Illegal invocation ってエラー• navigator.getUserMedia を別変数で参照し て呼んでもダメ• プレフィックスの違いを吸収したいと きは、関数呼び出しをまるごと返す
    53. 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. 54. 毎フレームの処理が重くなりがち、requestAnimationFrame を使った方が よさげ• これは WebRTC に限った話じゃないの で、「requestAnimationFrame」でぐぐる とたくさん出てくる
    55. 55. 毎フレームの処理が重くなりがち、requestAnimationFrame を使った方が よさげ var requestAnimationFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(callback, element) { setTimeout(callback, 1000 / 60); }; })();
    56. 56. LocalMediaStream→video→canvasのとき、必ずしもvideoはDOMツリーに 入れなくともよい• 今回、特に入力映像をそのまま表示す る必要がなかったので、video タグは 設置してない• canvas タグだけあればOK
    57. 57. なぜ映像は取れて、 音だけ使えないのか?• ゆくゆくは WebRTC と WebAudioAPI と の統合が図られているから、かも? (英語ちょっと自信ない。。)• このへんとか参考になるかも http://www.html5rocks.com/en/tutorials/ getusermedia/intro/#toc-webaudio-api
    58. 58. 必ずしもJavaScriptで 解決しなくてもよい• ガタガタ揺らすエフェクトは、 JavaScript で CSS の position プロパティ いじるとか、斜めなら canvas 内の ピクセルいじるしかない• 今なら CSS animation 内で transform を 使うだけで揺らせる(斜めにも)
    59. 59. 本日のレシピ• 1. getUserMedia で映像と音が取れるか 検証• 2. 今までのHTML技術との組み合わせ• 3. Tipsとか• 4. まとめ
    60. 60. 4. まとめ
    61. 61. 4. まとめ• WebRTC の可能性• Web がネイティブになる世界• リアルタイム性
    62. 62. WebRTC の可能性• デバイスへのアクセスが一般化すると、 Webアプリで展開できる種類も増える• スマートフォン(iOS, Android, WindowsPhone)にWebRTCが普及し 出したころが本当のスタートかも
    63. 63. Web がネイティブになる世界• デバイスとかの機能を Web API で呼ぶ といった、インターフェースが徐々に Web ベースになってきてる• そのうちネイティブはブラウザエンジ ンだけになって、やがて Web がネイ ティブになる世界(例 : FirefoxOSとか)
    64. 64. リアルタイム性• パーソナライズ(個々のユーザーに最 適化)されたものを提供するには、 その場で作ってその場で返すリアルタ イム性が大事• 単一なものではなく、自分ならではの 何かが欲しい人たち向け
    65. 65. リアルタイム性• 誰もキャプチャしてエフェクトつけて YouTubeにアップとかしない(2, 3人居たけど)• でもその場でできるなら、 ちょっとやってみようかなって気になる• WebRTC 試してみよう! 変身コンテンツとか作ってみよう!
    66. 66. ありがとうございました!

    ×