65
browser as a broadcast medium tech for post space age developers

Browser as a broadcast medium

Embed Size (px)

DESCRIPTION

@kaosbeat explaining how we made a 2nd screen app from idea to implementation and then took it further by making tools to be used in the TV studio on top of that, using the same technology. Node.js, redis, EC2, RoR, ...

Citation preview

Page 1: Browser as a broadcast medium

browser as a broadcast

mediumtech for post space age developers

Page 2: Browser as a broadcast medium

wiebenekikwho am i

@kaosbeat

+kasper jordaens

Page 3: Browser as a broadcast medium

media space age

mediaburn by ant farm

Page 4: Browser as a broadcast medium

TV ≠ interactive

Page 5: Browser as a broadcast medium

Laidback = fine

Page 6: Browser as a broadcast medium

Moose + Cat = ???

Page 7: Browser as a broadcast medium

broadcasters falling behind

Page 8: Browser as a broadcast medium

context change

Page 9: Browser as a broadcast medium

whats the problem

Page 10: Browser as a broadcast medium

INTERACTIVE TV?

Page 11: Browser as a broadcast medium

MIR from wikipedia

plugin madness

Page 12: Browser as a broadcast medium

what broadcasters want

Page 13: Browser as a broadcast medium

that’s not a moon

Page 14: Browser as a broadcast medium

that’s not a moonTHe future of TV is the browser

Page 15: Browser as a broadcast medium
Page 16: Browser as a broadcast medium

so we startedbrainstorming

Page 17: Browser as a broadcast medium

the cycling race*

* de koers

Page 18: Browser as a broadcast medium
Page 19: Browser as a broadcast medium

APPS! APPS! APPS!

Page 20: Browser as a broadcast medium

also tested on humans*

* ook getest op mensen

Page 21: Browser as a broadcast medium

21

diabetes test

h$p://ogomquiz.appspot.com/

Page 22: Browser as a broadcast medium

22diabetes test

Page 23: Browser as a broadcast medium

14%

30307  (61%)

25%peak LOAD

Page 24: Browser as a broadcast medium

24

kill the server

Page 25: Browser as a broadcast medium
Page 26: Browser as a broadcast medium

26

3%4%

1%1%

59%

15%

9%

1%6%

1%

iPad (1347)iPhoneiPodAndroidWindows/IEWindows/ FirefoxWindows ChromeWindows/ otherMacintoshothers

Page 27: Browser as a broadcast medium

EYEWITNESS test

h$p://ogomface.appspot.com/

Page 28: Browser as a broadcast medium
Page 29: Browser as a broadcast medium

7 min 14 min 21 min 28 min 35 min 42 min 49 min

Page 30: Browser as a broadcast medium

4. villasquare

Page 31: Browser as a broadcast medium

launched without apps

Page 32: Browser as a broadcast medium

32

Page 33: Browser as a broadcast medium

Apps! Apps! Apps!

Page 34: Browser as a broadcast medium
Page 35: Browser as a broadcast medium

35

ON AIR

Page 36: Browser as a broadcast medium

super hero

Page 37: Browser as a broadcast medium

35.000 messages

Page 38: Browser as a broadcast medium

600 messages/episode

Page 39: Browser as a broadcast medium

war room

Page 40: Browser as a broadcast medium

ready for launch

Page 41: Browser as a broadcast medium

DEMO

Page 42: Browser as a broadcast medium
Page 43: Browser as a broadcast medium
Page 44: Browser as a broadcast medium
Page 45: Browser as a broadcast medium

15 kilobytes of fame

Page 46: Browser as a broadcast medium

war room

super hero

on air

Page 47: Browser as a broadcast medium

INTERACTIVE TV FOR ALL VIEWERS

Page 48: Browser as a broadcast medium

tools to the rescue

Page 49: Browser as a broadcast medium

sockets: persistent low overhead connections

Page 50: Browser as a broadcast medium

1. prototype

2. SKELETON

3. REALTIME

4. SCALING

Page 51: Browser as a broadcast medium

1. prototype

Page 52: Browser as a broadcast medium

first prototype

h$p://media-­‐square.appspot.com/

Page 53: Browser as a broadcast medium

1. prototype

2. SKELETON

Page 54: Browser as a broadcast medium

we knew excellentrails developers

Page 55: Browser as a broadcast medium

1. prototype

2. SKELETON

3. REALTIME

Page 56: Browser as a broadcast medium

RedisPub/Sub

On Air App Villa.een.be ...

subscribe

Node.jsSocket.io

publish

InputHandling

Activity

Page 57: Browser as a broadcast medium

1. prototype

2. SKELETON

3. REALTIME

4. SCALING

Page 58: Browser as a broadcast medium
Page 59: Browser as a broadcast medium
Page 60: Browser as a broadcast medium

view

MODEL

comclient

{ view

MODEL

comclient

view

MODEL

comclient

PUT

change model

broadcast

save

the magic

Page 61: Browser as a broadcast medium

61

lessons learned

Page 62: Browser as a broadcast medium

Team

Page 63: Browser as a broadcast medium

friends

Page 64: Browser as a broadcast medium

Teamco-produced with

Page 65: Browser as a broadcast medium

POST space age galaxy exploring

~=[,,_,,]:3http://www.slideshare.net/vrtmedialab