Network Play On WebRTC DataChannel

Network play on WebRTC DataChannel

WebRTC Conference Japan 2015@sugimoto1981

•Yoshiaki Sugimoto

•CyberAgent inc.

•Frontend Developer

Self Introduction

WebRTC DataChannel

What we can do with this?

Sample is...

WebRTC + Tetris

•DataChannelでプレイ状態を相互に送り合う

•Offer/Answer = 対戦申し込み

•スコアなどは特に関係なし（表示のみ）•音は鳴りません…

WebRTC + Tetris

Let’s Play!

http://tetris.wnotes.net（2015/02/06まで）

•Canvas.toDataURL() -> DataChannel.send()(必要に応じてChunk化)

•相手側は受け取ったBase64 Imageを表示

•何だかんだSignalingで色々やらないといけない

WebRTC + Tetris

•ChromeではCandidateイベントが発火するタイミングが掴めず、DataChannelがopenしないことが

•SDP/Candidate関連メソッドの第二・第三引数は必須になるらしい (Firefox 36.0a2, in the future)

I was in trouble ...

Please try on your own!

https://github.com/ysugimoto/WebRTetris/tree/develop

•Node.js ( for signaling server )

•PHP ( Twitter authenticate if you need )

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