Lessons from the experimental edge of technology
summary
Builds a two-player face-throwing game (inspired by Faceball) that ships live at Google I/O using WebRTC audio video peer-to-peer data, web-rtc.io and Node/Express for simple room discovery. Encounters: simultaneous connect race that a single-page app fixes, massive mobile bandwidth from default 640×480 video until reduced to 160×? and client-side state to send only tilt changes, and rendering stalls when two canvases plus two videos drop frame rate to ~7 fps then recover to ~50 fps on Nexus 4 after removing one video and splitting static vs dynamic canvases.
AI-written summary · about
chapters (34)
- 0:00Intro
- 0:49The Experiment
- 3:59RealTime Communication
- 5:16WebRTC
- 6:51JavaScript libraries
- 8:06New technology
- 8:32Proof of concept
- 9:43Creative room
- 10:06Remote connections
- 10:26Event listeners
- 11:01Streaming
- 11:30Libraries
- 12:11PeertoPeer
- 12:58Down the Wire
- 13:37Only Serve What You Need
- 15:36TCP Reliable Connections
- 16:24WebSockets
- 16:57Orientation events
- 18:02Game mechanics
- 18:30Multipage website
- 19:35Analogy
- 20:55Single Page App
- 23:34Graphics
- 23:53Detail
- 25:21Rendering
- 25:59Rendering too much
- 26:27Fixing frame rates
- 27:00Realtime rendering
- 27:22Useful tips
- 27:43Hardest part
- 28:12Submission
- 28:23Lessons
- 29:41WebRTC is ready
- 30:24Conclusion
related talks
32mThe browser kicked me out (of the CPU): Making a three.js WebGL mobile game
18mdotJS 2012 - Christian Amor Kvalheim
21mWebRTC - A tale of Beekeeping
29mJavaScript and Game Development
26m#javascript Audio/Video Streaming: #WebRTC APIs 101 explained
36mJSConf 2015 Kyle Tyacke
58mRealtime Communication with WebRTC
33mFun With Websockets