Your SlideShare is downloading. ×
WebRTCでドラゴンボールごっこ
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

6,073
views

Published on

WebRTCの検証がてら、簡単なコンテンツを作ってみました。 …

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

Published in: Technology

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,073
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 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. ありがとうございました!