insights in building real-time experiences with webrtc · 3 how big is ? 800.000+ users in 72...

Insights in building real-time experiences with WebRTC

@VictorSanchezvictor@mashme.tv

2

What is ?

Social video-collaboration platformBased in the cloud

Integrates many toolsStartup spin-off from UPM

3

How big is ?

800.000+ users in 72 countries

137.000+ meeting rooms

1.250.000 shared elements in 2014

4

Take a look at

DEMO TIME

5

The concept for

? E [ ¿ * …

Synchronization

6

Screen sharing VS

your bad upload connection goes here

frustrating experiences are delivered here

7

Screen sharing VSB

Bupload the document to our CDN

B B B

CDN

everyone downloads the same content

8

Sync inB

BJSON.stringify(go to slide 3);

B B B

watching slide 3 in 200ms or less

WebSockets and/or WebRTC Data Channel

9

Collaboration === CollisionsB

BJSON.stringify(go to slide 3);

B B B

JSON.stringify(go to slide 4);?? ?? ??

10

Operational Transformations

Source: http://en.wikipedia.org/wiki/Operational_transformation

11

Google Wave Operational Transformations

Source: http://www.waveprotocol.org/whitepapers/operational-transform

12

Managing operations in

? Eyoutube_playyoutube_stopyoutube_jump

map_zoommap_pan

……

…

> 100 events

Architecture

Frontend instance

13

Architecture for

CDN

MCU

Real-time channel

browser client

Non-relational DB

Relational DB

Frontend instance

14

Architecture for

Room A

Frontend instanceRoom B

Relatively small instances to serve a few roomsRelatively small MCUs to serve a few roomsMemcache and/or REDIS to reduce DB pressure

15

Why small instances in

+ Allow to cache many DB requests (for example room content, participants, history, …)+ If a small instance or MCU fail casualties are minimal (a few rooms)

+ No need for complex configuration- difficult to monitor

+ Fast recovery and traffic spikes adaptation

- difficult to adapt for very dynamic rooms

16

How do we pays the bills at

Frontend instance

Javascript ( 95.000 lines of code)HTML5CSS3

Python ( 5000 lines of code)

This is a very complex distributed brain This is a “silly” router

$0 $something

Javascript ( 95.000 lines of code)HTML5 ( 47.000 lines of code)CSS3 (29.000 lines of code)

17

How do we pays the bills at

MCU

Real-time channel

$MONEY

- Most expensive infrastructure- Knowing your traffic helps A LOT.

What we are building now…

18

The future at

Javascript ( 95.000 lines of code)HTML5 ( 47.000 lines of code)CSS3 (29.000 lines of code)

NOW

Modules & Closures

JavascriptHTML5CSS3

THE FUTURE

WebComponents

18

The future at

NOW THE FUTURE

? ¿ [ *

Room profiles

?[ *

¿?¿

Custom rooms

18

The future at

NOW THE FUTURE

MCU

Real-time

dead by scale change MCU

Real-time

room migrationMCU groups

Questions?

Thank youcontact@mashme.tv

www.mashme.tv @mashmetv

facebook.com/MashMeTV Calle Cronos, 20. 28037 (Madrid)