### WebRTC + Ember
#### Lessons and an Opinionated Approach
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
### 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
### 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));