WebRTC Conference Japan 2015のLTスライド資料です。

1. Network Play On WebRTC DataChannel
Network play on
WebRTC DataChannel
WebRTC Conference Japan 2015
@sugimoto1981

2. •Yoshiaki Sugimoto
•CyberAgent inc.
•Frontend Developer
Self Introduction

3. WebRTC DataChannel

4. What we can do with this?
Sample is...

5. WebRTC + Tetris

6. •DataChannelでプレイ状態を相互に送り合う
•Offer/Answer = 対戦申し込み
•スコアなどは特に関係なし（表示のみ）
•音は鳴りません…
WebRTC + Tetris

7. Let’s Play!
http://tetris.wnotes.net
（2015/02/06まで）

8. •Canvas.toDataURL() -> DataChannel.send()
(必要に応じてChunk化)
•相手側は受け取ったBase64 Imageを表示
•何だかんだSignalingで色々やらないといけない
WebRTC + Tetris

9. •ChromeではCandidateイベントが発火するタイミ
ングが掴めず、DataChannelがopenしないことが
•SDP/Candidate関連メソッドの第二・第三引数は
必須になるらしい (Firefox 36.0a2, in the future)
I was in trouble ...

10. Please try on your own!
https://github.com/ysugimoto/WebRTetris/tree/develop
•Node.js ( for signaling server )
•PHP ( Twitter authenticate if you need )

11. Thanks!
https://flic.kr/p/g2Gqwf / https://flic.kr/p/4S917J / https://flic.kr/p/9meANC / https://flic.kr/p/iDYA2k
http://www.slideshare.net/yoshiakisugimoto9/webrtc-slide