### WebRTC + Ember #### Lessons and an Opinionated Approach ![webrtc](images/webrtc.svg) ![ember](images/ember.png) Created by [Xander Dumaine](https://www.xdumaine.com) / [@xanderdumaine](https://twitter.com/xanderdumaine) released under [cc by-nc 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)
### What is WebRTC? A collection of standardized APIs for establishing voice, video, and data connections between peers. ```javascript getUserMedia({ audio: true, video: true }) RTCPeerConnection RTCDataChannel ```
#### Changing the Native API Paradigm Highly complex, discrete and continuous event based, stateful objects ![flow](https://cloud.githubusercontent.com/assets/833911/12866579/8860910e-cca0-11e5-8458-32f403172459.png)
### Gotcha! #### Quirks and obstacles for #### Ember apps with WebRTC - Rerendered DOM - Ember apps are long lived - Discrete event based APIs - Complex State and State Transitions - Permissions - Humans

HTML5 Video Quirk

Chrome Bug
### Layers of concern - Session Manager - Normalizes browser APIs and native events - Service - Create Session Manager - Manage signaling channel connection - Tie session state and state transitions to application - Acts as event bus and gateway - Components - Render/Interact - Manage UI state (!)
#### Ember.Evented ##### Service as event bus ```javascript Ember.Component.extend({ init() { this.get('myService') .on('someEvent', this.someHandler.bind(this)); }, someHandler(evt) { // handle evt in component } }); Ember.Service.extend(Ember.Evented, { foo(evt) { this.trigger('someEvent', evt); } }); ```
#### Ember.Evented ##### Service as event bus + gateway ```javascript Ember.Component.extend({ init() { this.get('myService') .on('someEvent', this.someHandler.bind(this)); }, someHandler(person, evt) { // handle person and evt in component } }); Ember.Service.extend(Ember.Evented, { foo(evt) { this.get('store').findRecord('person', evt.personId) .then((person) => { this.trigger('someEvent', person, evt); }); } }); ```

Thank You.


        				crowd.on('question', (q) => xander.answer(q));