WebRTC Look Ma, no Flash!

The same “About Me” as last time

Gilmore Davidson, JS developer at Atlassian (Bonfire, JIRA Mobile)
SydJS junkie and occasional site updater
@iamnotyourbroom
github.com/gilmoreorless

OMG! WebRTC WTF

webrtc.org

RTC = Real Time Communication
Webcam, microphone, peer-to-peer connections
Think “Skype in the browser”

WebRTC Browser Support

NOTE: Very likely to be out of date by the time you read this.

Desktop

	Opera	Chrome	Firefox	IE
Webcam	12	18 (webkit, with flag) 21 (webkit, no flag)	18 (moz, with flag) 20 (moz, no flag)	via Chrome Frame
Microphone		24 (webkit, with flag)
PeerCommunication		23 (webkit)	20 (moz)	via Chrome Frame

Mobile

Android	iOS	Windows Phone
Opera Mobile 12 Bowser	Bowser	Good luck

What I’ll be rambling about

Webcam
Microphone
PeerCommunication (headache)
Web Audio API (not WebRTC, but fun)

Large code examples
Live coding
Craploads of demos

Basic webcam feed

navigator.getUserMedia({video: true}) create stream source <video> <canvas>

Old canvas tricks, new dynamic src

Crouching tiger, hidden canvas

A more practical example

User avatar picker for Confluence.

(YET ANOTHER DEMO)

Augmented Reality

Surely someone was going to ask, right?

JSARToolkit
Port of a port of a port of a port
C -> Java -> Flash -> JS… Here be dragons

Why WebRTC > Flash

Open standards – no proprietry plugins
Defined standard for peer-to-peer (eventually)
WebGL AR
DOM interaction

Where it fails (so far)

Canvas needs blend modes
P2P transport/codec wars – Google vs Microsoft
Cross browser support – Apple; we’re waiting

~~Canvas needs blend modes~~ They’re coming!

Basic microphone feed

navigator.getUserMedia({audio: true}) create stream source Web Audio API

Web Audio API

www.w3.org/TR/webaudio/

Low-level audio manipulation in the browser
Very, very fun
Good list of Web Audio examples
Moog Google Doodle
Chris Wilson’s web audio demos
Audio graph visualiser

Check... check... 1... 2...

getUserMedia() + Web Audio API = Microphone shenanigans

Creepy music

Combine powers

Webcam + Microphone + Audio API

Time to make a game

Image courtesy Brendan Eich