1. WebRTCで遊んでみた
∼ 冬休み自由研究(笑) ∼
Mick Kubo(@komarineko)
1

2. きっかけ
• 無職→某IT関連現場でお仕事→何か満たされない
• 最近勉強もできてない→焦り
HTML５だ！(笑)
いまごろになってお恥ずかしい...
2

3. なんでWebRTCなの?
• なんかおもしろいことやってみようと調べたら...
• ERICSSONの”Bowser – The World’s First WebRTC-
Enabled Mobile Browser”
https://labs.ericsson.com/blog/bowser-the-world-s-first-webrtc-enabled-mobile-
browser
• 株式会社ミクシイのあんどうやすしさんのスライド
https://docs.google.com/presentation/d/
1MkvmX6Gvb1cRATdwF4RFBtol8NgdnblwlwikDnFhT10/present#slide=id.p
• ひゃ ーっおもしろそーっ！
3

4. WebRTCとは
• http://dev.w3.org/2011/webrtc/editor/webrtc.html
• getUserMedia、mediaStream、peerConnection...
• UstreamとかSkype要らねーじゃんwww
4

5. WebRTC(涙)
• 仕様策定中なので...
仕様がころころ変わる。当然実装も...
getUserMediaのパラメータ、webkitPeerConnection→webkitRTCPeerConnection
• 実装されているブラウザが少ない...
Chrome、Firefox(ナイトリー)
EricssonのBowserもRTCPeerConnectionには未対応
5

6. デモやります
• 最初におことわり
Mac版のChrome 24でしか動作確認していません...
6

7. デモ1
• ビデオチャットっぽい何か...
デモページ : http://komarineko.net:10080/
ソース : https://github.com/coredumpcat/WebRTC-Demo-01
(マルチユーザーチャットを目指して作ったのですが、発表当日は大失敗し
ました...)
7

8. デモ2
• 監視カメラっぽい何か... のログ表示ページ
デモページ : http://komarineko.net:3000/
ソース : https://github.com/coredumpcat/WebRTC-Demo-02
Webカメラの映像を、動画の差分を使って動体確認(識別はおろか認識です
ら無い(笑))した結果を表示しています。
8

9. デモ3
• 最後に、実用的ではありませんが...
デモページ : http://komarineko.net:10088/
ソース : https://github.com/coredumpcat/WebRTC-Demo-03
デモ2と同じビデオソースを、peerConnectionを使って相手のブラウザの
faviconに表示します。
1から作るのが面倒くさかった(信州ふうに表現すると”ズクが無かった”)の
で、デモ1を改変して実装しました。
参考にしたサイト :
“Webカメラの画像をリアルタイムにFaviconに反映させる実験サイト”
http://paulkaplan.me/Experiments/Favicon/favicon.html
“Hey look over here!”
http://paulkaplan.me/Experiments/Favicon/favicon.html
9

10. 次回予告
NSEG鉄道部活動報告
∼ いや、冗談ですって(笑) ∼
Mick Kubo(@komarineko)
10