SlideShare a Scribd company logo
WebRTC 
A front-end perspective 
Opera Software 
Fronteers 
2014 
@shwetank
About me 
Shwetank Dixit 
Opera Software 
Fronteers 
2014 
@shwetank 
Developer Relations, Opera Software
http://www.thehindu.com/news/national/other-states/using-pcos-in-mumbai-show-id-proof/article4241422.ece
Source: https://www.flickr.com/photos/rambow/858719954
Source: https://www.flickr.com/photos/rambow/858717314 Source: https://www.flickr.com/photos/rambow/858719954
WebRTC: A front-end perspective
WebRTC: A front-end perspective
What is 
WebRTC? 
Real Time 
Peer-to-Peer 
Communication
WebRTC: A front-end perspective
but … 
So far I’ve seen very 
few web people 
talking about it
Whats the biggest barrier to WebRTC adoption?* 
Lack of Awareness 
Not supported by MS 
Not supported by Apple 
Other 
0% 5.5% 11% 16.5% 22% 
* WebRTC World Outlook Survey 2014
WebRTC is for 
but … Web Developers
Mediastream
Mediastream 
RTCPeerConnection
Mediastream 
RTCPeerConnection 
RTCDataChannel
mediaStream 
+ 
` ` 
Device Camera Microphone
getUserMedia 
+ 
` ` 
Device Camera Microphone
Sqwiggle
gUM + CSS(Filters, Masks, Blend Modes) 
Create interesting visual effects from 
camera output in real-time using CSS
gUM + Web Audio 
Sound powered actions 
and navigation
WebRTC: A front-end perspective
World’s first webcam 
http://en.wikipedia.org/wiki/Trojan_Room_coffee_pot
What can you achieve with gUM? 
- Motion Detection (Baby Monitors, Security Cam) 
- Hotspots 
- Gesture Recognition 
- Emotion Recognition 
- Sound Detection and Visualisation 
- Voice / Sound Activated Controls 
- Capture video (Kind of) (whammy.js, gifshot)
gUM: Current way to do it 
navigator.getUserMedia* 
*with prefixes
gUM: Broken Error Handling 
Exceptions are not caught by the current API. 
Promises can fix this. 
Based on: http://lists.w3.org/Archives/Public/public-media-capture/2014Sep/0171.html
gUM: Current Way 
var failure = function(reason){ 
log("Failed to show camera: " + reason.message); 
} 
! 
navigator.getUserMedia(constraints, function(stream) { 
try { 
$video.src = window.URL.createObjectURL(stream); 
$video.play(); 
} catch(e) { failure(e); } //failure must tolerate non-MediaStreamError 
}, failure); 
Based on: http://lists.w3.org/Archives/Public/public-media-capture/2014Sep/0171.html
gUM: In the future ? 
navigator.mediaDevices.getUserMedia
gUM: In the future ? Promises Proposal 
navigator.mediaDevices.getUserMedia(constraints) 
.then( function(stream) { 
videoElement.src = window.URL.createObjectURL(stream); 
videoElement.play(); 
}).catch(function (reason){ 
log(“Failed to show camera: ” +reason.message); 
}); 
Based on: http://lists.w3.org/Archives/Public/public-media-capture/2014Sep/0171.html
Debate 
This is still up for debate. 
Some are eager to just ship v1.0 and add support for 
promises in gUM at a later stage. 
! 
Based on: http://lists.w3.org/Archives/Public/public-media-capture/2014Oct/0003.html
gUM: Other concerns 
Impossible for a gUM app to 
use the device flash for low-light 
! 
Use (auto) zoom 
Use (auto) focus
gUM: Other concerns 
“If you look further into this API then it 
doesn’t offer any advanced features 
that you expect in a good camera app: 
focus, flash, zoom ` 
etc. It is clear that 
…(getUserMedia).. has been designed 
for use in P2P applications and not as a 
dedicated camera experience.” 
- Paul Kinlan
Mediastream Image-Capture 
! 
Will provide a deeper level of control 
for taking photos 
! 
w3.org/TR/image-capture/
Mediastream Image-Capture 
White Balance 
ISO 
Red-Eye Reduction 
Exposure 
Brightness 
Contrast 
` 
Saturation 
Sharpness 
Zoom 
takePhoto()
Mediastream Image-Capture 
Focus? Flash? ¯_(ツ)_/¯
Getting permission is not easy 
Some users don’t seem to 
notice the permissions dialog 
in certain browsers
Getting permission is not easy 
Some users don’t seem to 
notice the permissions dialog 
in certain browsers
Some users don’t seem to 
notice the permissions dialog 
in certain browsers
Some users don’t seem to 
notice the permissions dialog 
in certain browsers
Some users don’t seem to 
notice the permissions dialog 
in certain browsers
Getting permission is not easy 
Permissions dialogs are different on 
different platforms and browsers … 
` 
especially mobile
WebRTC: A front-end perspective
HTTPS helps … 
If the app is on HTTPS, then the 
browser will remember the last 
granted permission.
RTCPeerConnection
WebRTC: A front-end perspective
WebRTC: A front-end perspective
webrtcglossary.com
RTCPeerConnection
ICE - Interactive Connectivity Establishment 
* May or may not wax a chump like a candle.
STUN 
Whats my 
external IP Address? 
Your external 
IP Address is x.x.x.x
TURN around… 
Total eclipse of the (p2p) call …
TURN 
Basically relays stuff from one 
party to the other.
Big Fat TURN Server
TURN 
Basically relays stuff from one 
party to the other. 
In this case, connection won’t 
be p2p, but at least the 
connection will be made!
TURN 
Basically relays stuff from one 
party to the other. 
In this case, connection won’t 
be p2p, but at least the 
connection will be made! 
Generally speaking, a TURN server will 
include a STUN server too.
Free ICE Project 
github.com/DamonOehlman/freeice 
(List of free STUN/TURN servers to use in your projects)
The WebRTC Signalling Process 
WebSocket || XHR || SIP || Carrier Pigeon
Session Description (SDP) 
v=0 
o=- 680121471469462884 2 IN IP4 127.0.0.1 
s=- 
t=0 0 
a=group:BUNDLE audio video 
a=msid-semantic: WMS GUKF430Khp9jEQiPrdYe0LbTAALiNAKAIfl2 
Audio Lines 
m=audio 54278 RTP/SAVPF 111 103 104 0 8 106 105 13 126 
c=IN IP4 180.6.6.6 
a=rtcp:54278 IN IP4 180.6.6.6 
! 
ICE Candidates 
a=candidate:4022866446 1 udp 2113937151 192.168.0.197 36768 typ host generation 0 
a=candidate:4022866446 2 udp 2113937151 192.168.0.197 36768 typ host generation 0 
a=candidate:2706108158 1 tcp 1509957375 192.168.0.197 0 typ host generation 0 
a=candidate:2706108158 2 tcp 1509957375 192.168.0.197 0 typ host generation 0 
a=candidate:1853887674 1 udp 1845501695 46.2.2.2 36768 typ srflx raddr 192.168.0.197 rport 36768 generation 0 
a=candidate:1853887674 2 udp 1845501695 46.2.2.2 36768 typ srflx raddr 192.168.0.197 rport 36768 generation 0 
a=candidate:2157334355 1 udp 33562367 180.6.6.6 54278 typ relay raddr 46.2.2.2 rport 38135 generation 0 
a=candidate:2157334355 2 udp 33562367 180.6.6.6 54278 typ relay raddr 46.2.2.2 rport 38135 generation 0
The WebRTC Signalling Process 
WebSocket || XHR || SIP || Carrier Pigeon 
Creates Offer 
local description
The WebRTC Signalling Process 
WebSocket || XHR || SIP || Carrier Pigeon 
Receives Offer 
local description
The WebRTC Signalling Process 
WebSocket || XHR || SIP || Carrier Pigeon 
Receives Offer 
remote description 
local description
The WebRTC Signalling Process 
WebSocket || XHR || SIP || Carrier Pigeon 
Creates and 
sends Answer 
local description 
local description 
remote description
The WebRTC Signalling Process 
WebSocket || XHR || SIP || Carrier Pigeon 
Receives Answer 
local description 
local description 
remote description
The WebRTC Signalling Process 
WebSocket || XHR || SIP || Carrier Pigeon 
Receives Answer 
local description 
local description 
remote description 
remote description
The WebRTC Signalling Process 
WebSocket || XHR || SIP || Carrier Pigeon 
Connectivity 
Checks 
local description 
local description 
remote description 
remote description
The WebRTC Signalling Process 
WebSocket || XHR || SIP || Carrier Pigeon 
P2P Connection Established
Libraries
WebRTC: A front-end perspective
WebRTC: A front-end perspective
WebRTC: A front-end perspective
Bandwidth Numbers 
! 
720p : 1-2 Mbps // VP8 at 30fps 
360p : 0.5 - 1 Mbps // VP8 at 30fps 
180p : 0.1 - 0.5 Mbps // VP8 at 30fps 
Audio : .06 - 0.51 Mbps // Opus
Debugging 
opera://webrtc-internals 
chrome://webrtc-internals 
about:webrtc 
! 
The getStats() method 
! 
callstats.io 
!
Data Channels 
Once RTCPeerConnection is 
established, we can use Data Channels 
to transfer data P2P. 
Data can be text or binary data
Whats the advantage? 
Data Channels provide a 
* High Performance 
* P2P 
* Low Latency 
Connection to others
Working with Data 
datachannel 
.onopen // Data Channel opened 
.onclose // Data Channel closed 
.onerror // Error occurred 
.onmessage // New message arrived 
.send() // Send a message
DataChannels can work 
exactly like WebSockets if 
you want, but they don’t 
have to …
SCTP // Transport Protocol 
DTLS // Encryption 
UDP
notable options 
ordered 
send data packets in ordered fashion or not 
! 
maxRetransmitTime 
Max time to try to send a failed message 
! 
maxRetransmits 
Max number of tries to deliver failed message before it 
gives up
In the wild 
Peerflix 
PeerCDN 
WebTorrent
In the wild 
Peerflix 
@mafintosh 
! 
PeerCDN 
WebTorrent 
@feross
IsWebTRwToCR MeaoddyeYest.com
WebRTC: A front-end perspective
WebRTC: A front-end perspective
WebRTC: A front-end perspective
ORTC 
- WebRTC 1.1 (ORTC) 
- SDP exchange not required 
- Advanced stuff like simulcast 
- More low level than WebRTC 
- Shim for WebRTC to work on top of ORTC 
- Important goal is compatibility. Existing 
apps should not be affected
Communication
Opera Software 
Cheers! 
@shwetank 
Fronteers 
2014 
shwetankd@opera.com

More Related Content

What's hot

Intro to Telegraf
Intro to TelegrafIntro to Telegraf
Intro to Telegraf
InfluxData
 
Edge architecture ieee international conference on cloud engineering
Edge architecture   ieee international conference on cloud engineeringEdge architecture   ieee international conference on cloud engineering
Edge architecture ieee international conference on cloud engineering
Mikey Cohen - Hiring Amazing Engineers
 
Trucks on a Graph: How JB Hunt Uses Neo4j
Trucks on a Graph: How JB Hunt Uses Neo4jTrucks on a Graph: How JB Hunt Uses Neo4j
Trucks on a Graph: How JB Hunt Uses Neo4j
Neo4j
 
The RED Method: How to monitoring your microservices.
The RED Method: How to monitoring your microservices.The RED Method: How to monitoring your microservices.
The RED Method: How to monitoring your microservices.
Grafana Labs
 
CNCF Online - Data Protection Guardrails using Open Policy Agent (OPA).pdf
CNCF Online - Data Protection Guardrails using Open Policy Agent (OPA).pdfCNCF Online - Data Protection Guardrails using Open Policy Agent (OPA).pdf
CNCF Online - Data Protection Guardrails using Open Policy Agent (OPA).pdf
LibbySchulze
 
Observability in the world of microservices
Observability in the world of microservicesObservability in the world of microservices
Observability in the world of microservices
Chandresh Pancholi
 
End to End Processing of 3.7 Million Telemetry Events per Second using Lambda...
End to End Processing of 3.7 Million Telemetry Events per Second using Lambda...End to End Processing of 3.7 Million Telemetry Events per Second using Lambda...
End to End Processing of 3.7 Million Telemetry Events per Second using Lambda...
DataWorks Summit/Hadoop Summit
 
Squirreling Away $640 Billion: How Stripe Leverages Flink for Change Data Cap...
Squirreling Away $640 Billion: How Stripe Leverages Flink for Change Data Cap...Squirreling Away $640 Billion: How Stripe Leverages Flink for Change Data Cap...
Squirreling Away $640 Billion: How Stripe Leverages Flink for Change Data Cap...
Flink Forward
 
Taming the ever-evolving Compliance Beast : Lessons learnt at LinkedIn [Strat...
Taming the ever-evolving Compliance Beast : Lessons learnt at LinkedIn [Strat...Taming the ever-evolving Compliance Beast : Lessons learnt at LinkedIn [Strat...
Taming the ever-evolving Compliance Beast : Lessons learnt at LinkedIn [Strat...
Shirshanka Das
 
Elastic stack Presentation
Elastic stack PresentationElastic stack Presentation
Elastic stack Presentation
Amr Alaa Yassen
 
A Practical Enterprise Feature Store on Delta Lake
A Practical Enterprise Feature Store on Delta LakeA Practical Enterprise Feature Store on Delta Lake
A Practical Enterprise Feature Store on Delta Lake
Databricks
 
Enterprise Data Classification and Provenance
Enterprise Data Classification and ProvenanceEnterprise Data Classification and Provenance
Enterprise Data Classification and Provenance
DataWorks Summit/Hadoop Summit
 
Spark Summit EU talk by Bas Geerdink
Spark Summit EU talk by Bas GeerdinkSpark Summit EU talk by Bas Geerdink
Spark Summit EU talk by Bas Geerdink
Spark Summit
 
Intelligently Collecting Data at the Edge – Intro to Apache MiNiFi
Intelligently Collecting Data at the Edge – Intro to Apache MiNiFiIntelligently Collecting Data at the Edge – Intro to Apache MiNiFi
Intelligently Collecting Data at the Edge – Intro to Apache MiNiFi
DataWorks Summit
 
Source Code Analysis with SAST
Source Code Analysis with SASTSource Code Analysis with SAST
Source Code Analysis with SAST
Blueinfy Solutions
 
Splunk: Druid on Kubernetes with Druid-operator
Splunk: Druid on Kubernetes with Druid-operatorSplunk: Druid on Kubernetes with Druid-operator
Splunk: Druid on Kubernetes with Druid-operator
Imply
 
Understand your system like never before with OpenTelemetry, Grafana, and Pro...
Understand your system like never before with OpenTelemetry, Grafana, and Pro...Understand your system like never before with OpenTelemetry, Grafana, and Pro...
Understand your system like never before with OpenTelemetry, Grafana, and Pro...
LibbySchulze
 
GStreamer-VAAPI: Hardware-accelerated encoding and decoding on Intel hardware...
GStreamer-VAAPI: Hardware-accelerated encoding and decoding on Intel hardware...GStreamer-VAAPI: Hardware-accelerated encoding and decoding on Intel hardware...
GStreamer-VAAPI: Hardware-accelerated encoding and decoding on Intel hardware...
Igalia
 
Adopting Open Telemetry as Distributed Tracer on your Microservices at Kubern...
Adopting Open Telemetry as Distributed Tracer on your Microservices at Kubern...Adopting Open Telemetry as Distributed Tracer on your Microservices at Kubern...
Adopting Open Telemetry as Distributed Tracer on your Microservices at Kubern...
Tonny Adhi Sabastian
 
Why apache Flink is the 4G of Big Data Analytics Frameworks
Why apache Flink is the 4G of Big Data Analytics FrameworksWhy apache Flink is the 4G of Big Data Analytics Frameworks
Why apache Flink is the 4G of Big Data Analytics Frameworks
Slim Baltagi
 

What's hot (20)

Intro to Telegraf
Intro to TelegrafIntro to Telegraf
Intro to Telegraf
 
Edge architecture ieee international conference on cloud engineering
Edge architecture   ieee international conference on cloud engineeringEdge architecture   ieee international conference on cloud engineering
Edge architecture ieee international conference on cloud engineering
 
Trucks on a Graph: How JB Hunt Uses Neo4j
Trucks on a Graph: How JB Hunt Uses Neo4jTrucks on a Graph: How JB Hunt Uses Neo4j
Trucks on a Graph: How JB Hunt Uses Neo4j
 
The RED Method: How to monitoring your microservices.
The RED Method: How to monitoring your microservices.The RED Method: How to monitoring your microservices.
The RED Method: How to monitoring your microservices.
 
CNCF Online - Data Protection Guardrails using Open Policy Agent (OPA).pdf
CNCF Online - Data Protection Guardrails using Open Policy Agent (OPA).pdfCNCF Online - Data Protection Guardrails using Open Policy Agent (OPA).pdf
CNCF Online - Data Protection Guardrails using Open Policy Agent (OPA).pdf
 
Observability in the world of microservices
Observability in the world of microservicesObservability in the world of microservices
Observability in the world of microservices
 
End to End Processing of 3.7 Million Telemetry Events per Second using Lambda...
End to End Processing of 3.7 Million Telemetry Events per Second using Lambda...End to End Processing of 3.7 Million Telemetry Events per Second using Lambda...
End to End Processing of 3.7 Million Telemetry Events per Second using Lambda...
 
Squirreling Away $640 Billion: How Stripe Leverages Flink for Change Data Cap...
Squirreling Away $640 Billion: How Stripe Leverages Flink for Change Data Cap...Squirreling Away $640 Billion: How Stripe Leverages Flink for Change Data Cap...
Squirreling Away $640 Billion: How Stripe Leverages Flink for Change Data Cap...
 
Taming the ever-evolving Compliance Beast : Lessons learnt at LinkedIn [Strat...
Taming the ever-evolving Compliance Beast : Lessons learnt at LinkedIn [Strat...Taming the ever-evolving Compliance Beast : Lessons learnt at LinkedIn [Strat...
Taming the ever-evolving Compliance Beast : Lessons learnt at LinkedIn [Strat...
 
Elastic stack Presentation
Elastic stack PresentationElastic stack Presentation
Elastic stack Presentation
 
A Practical Enterprise Feature Store on Delta Lake
A Practical Enterprise Feature Store on Delta LakeA Practical Enterprise Feature Store on Delta Lake
A Practical Enterprise Feature Store on Delta Lake
 
Enterprise Data Classification and Provenance
Enterprise Data Classification and ProvenanceEnterprise Data Classification and Provenance
Enterprise Data Classification and Provenance
 
Spark Summit EU talk by Bas Geerdink
Spark Summit EU talk by Bas GeerdinkSpark Summit EU talk by Bas Geerdink
Spark Summit EU talk by Bas Geerdink
 
Intelligently Collecting Data at the Edge – Intro to Apache MiNiFi
Intelligently Collecting Data at the Edge – Intro to Apache MiNiFiIntelligently Collecting Data at the Edge – Intro to Apache MiNiFi
Intelligently Collecting Data at the Edge – Intro to Apache MiNiFi
 
Source Code Analysis with SAST
Source Code Analysis with SASTSource Code Analysis with SAST
Source Code Analysis with SAST
 
Splunk: Druid on Kubernetes with Druid-operator
Splunk: Druid on Kubernetes with Druid-operatorSplunk: Druid on Kubernetes with Druid-operator
Splunk: Druid on Kubernetes with Druid-operator
 
Understand your system like never before with OpenTelemetry, Grafana, and Pro...
Understand your system like never before with OpenTelemetry, Grafana, and Pro...Understand your system like never before with OpenTelemetry, Grafana, and Pro...
Understand your system like never before with OpenTelemetry, Grafana, and Pro...
 
GStreamer-VAAPI: Hardware-accelerated encoding and decoding on Intel hardware...
GStreamer-VAAPI: Hardware-accelerated encoding and decoding on Intel hardware...GStreamer-VAAPI: Hardware-accelerated encoding and decoding on Intel hardware...
GStreamer-VAAPI: Hardware-accelerated encoding and decoding on Intel hardware...
 
Adopting Open Telemetry as Distributed Tracer on your Microservices at Kubern...
Adopting Open Telemetry as Distributed Tracer on your Microservices at Kubern...Adopting Open Telemetry as Distributed Tracer on your Microservices at Kubern...
Adopting Open Telemetry as Distributed Tracer on your Microservices at Kubern...
 
Why apache Flink is the 4G of Big Data Analytics Frameworks
Why apache Flink is the 4G of Big Data Analytics FrameworksWhy apache Flink is the 4G of Big Data Analytics Frameworks
Why apache Flink is the 4G of Big Data Analytics Frameworks
 

Viewers also liked

Upperside WebRTC conference - WebRTC intro
Upperside WebRTC conference - WebRTC introUpperside WebRTC conference - WebRTC intro
Upperside WebRTC conference - WebRTC intro
Victor Pascual Ávila
 
Programmation evénementielle
Programmation evénementielleProgrammation evénementielle
Programmation evénementielle
Kokou Gaglo
 
Mise en place d’une plateforme de formation IMS
Mise en place d’une plateforme de formation IMSMise en place d’une plateforme de formation IMS
Mise en place d’une plateforme de formation IMS
Kokou Gaglo
 
Firefox Extension Development
Firefox Extension DevelopmentFirefox Extension Development
Firefox Extension Development
phamvanvung
 
Estudo 01
Estudo 01Estudo 01
Quick dive into WebVR
Quick dive into WebVRQuick dive into WebVR
Quick dive into WebVR
Janne Aukia
 
JavaScript Web Workers
JavaScript Web WorkersJavaScript Web Workers
JavaScript Web Workers
Tobias Pfeiffer
 
WebVR with Three.js!
WebVR with Three.js!WebVR with Three.js!
WebVR with Three.js!
誠人 堀口
 
Web vr creative_vr
Web vr creative_vrWeb vr creative_vr
Web vr creative_vr
Oscar Marin Miro
 
WebRTC - On Standards, Identity and Telco Strategy
WebRTC - On Standards, Identity and Telco StrategyWebRTC - On Standards, Identity and Telco Strategy
WebRTC - On Standards, Identity and Telco Strategy
Jose de Castro
 
WebVR - JAX 2016
WebVR -  JAX 2016WebVR -  JAX 2016
WebVR - JAX 2016
Carsten Sandtner
 
Javascript the New Parts
Javascript the New PartsJavascript the New Parts
Javascript the New Parts
Federico Galassi
 
Introduction to The VR Web
Introduction to The VR WebIntroduction to The VR Web
Introduction to The VR Web
Liv Erickson
 
20160713 webvr
20160713 webvr20160713 webvr
20160713 webvr
Noritada Shimizu
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
Hoat Le
 
JavaScript and Web Standards Sitting in a Tree
JavaScript and Web Standards Sitting in a TreeJavaScript and Web Standards Sitting in a Tree
JavaScript and Web Standards Sitting in a Tree
Jenn Lukas
 
Photo and photo
Photo and photoPhoto and photo
Photo and photo
arreeluckdang
 
Web Front End - (HTML5, CSS3, JavaScript) ++
Web Front End - (HTML5, CSS3, JavaScript) ++Web Front End - (HTML5, CSS3, JavaScript) ++
Web Front End - (HTML5, CSS3, JavaScript) ++
ubshreenath
 
WebRTC Reborn - Cloud Expo / WebRTC Summit
WebRTC Reborn - Cloud Expo / WebRTC SummitWebRTC Reborn - Cloud Expo / WebRTC Summit
WebRTC Reborn - Cloud Expo / WebRTC Summit
Dan Jenkins
 

Viewers also liked (20)

Serveur http
Serveur httpServeur http
Serveur http
 
Upperside WebRTC conference - WebRTC intro
Upperside WebRTC conference - WebRTC introUpperside WebRTC conference - WebRTC intro
Upperside WebRTC conference - WebRTC intro
 
Programmation evénementielle
Programmation evénementielleProgrammation evénementielle
Programmation evénementielle
 
Mise en place d’une plateforme de formation IMS
Mise en place d’une plateforme de formation IMSMise en place d’une plateforme de formation IMS
Mise en place d’une plateforme de formation IMS
 
Firefox Extension Development
Firefox Extension DevelopmentFirefox Extension Development
Firefox Extension Development
 
Estudo 01
Estudo 01Estudo 01
Estudo 01
 
Quick dive into WebVR
Quick dive into WebVRQuick dive into WebVR
Quick dive into WebVR
 
JavaScript Web Workers
JavaScript Web WorkersJavaScript Web Workers
JavaScript Web Workers
 
WebVR with Three.js!
WebVR with Three.js!WebVR with Three.js!
WebVR with Three.js!
 
Web vr creative_vr
Web vr creative_vrWeb vr creative_vr
Web vr creative_vr
 
WebRTC - On Standards, Identity and Telco Strategy
WebRTC - On Standards, Identity and Telco StrategyWebRTC - On Standards, Identity and Telco Strategy
WebRTC - On Standards, Identity and Telco Strategy
 
WebVR - JAX 2016
WebVR -  JAX 2016WebVR -  JAX 2016
WebVR - JAX 2016
 
Javascript the New Parts
Javascript the New PartsJavascript the New Parts
Javascript the New Parts
 
Introduction to The VR Web
Introduction to The VR WebIntroduction to The VR Web
Introduction to The VR Web
 
20160713 webvr
20160713 webvr20160713 webvr
20160713 webvr
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
 
JavaScript and Web Standards Sitting in a Tree
JavaScript and Web Standards Sitting in a TreeJavaScript and Web Standards Sitting in a Tree
JavaScript and Web Standards Sitting in a Tree
 
Photo and photo
Photo and photoPhoto and photo
Photo and photo
 
Web Front End - (HTML5, CSS3, JavaScript) ++
Web Front End - (HTML5, CSS3, JavaScript) ++Web Front End - (HTML5, CSS3, JavaScript) ++
Web Front End - (HTML5, CSS3, JavaScript) ++
 
WebRTC Reborn - Cloud Expo / WebRTC Summit
WebRTC Reborn - Cloud Expo / WebRTC SummitWebRTC Reborn - Cloud Expo / WebRTC Summit
WebRTC Reborn - Cloud Expo / WebRTC Summit
 

Similar to WebRTC: A front-end perspective

DevCon5 (July 2014) - Intro to WebRTC
DevCon5 (July 2014) - Intro to WebRTCDevCon5 (July 2014) - Intro to WebRTC
DevCon5 (July 2014) - Intro to WebRTC
Crocodile WebRTC SDK and Cloud Signalling Network
 
WebRTC on Mobile
WebRTC on MobileWebRTC on Mobile
WebRTC on Mobile
Buşra Deniz, CSM
 
WebRTC Reborn SignalConf 2016
WebRTC Reborn SignalConf 2016WebRTC Reborn SignalConf 2016
WebRTC Reborn SignalConf 2016
Dan Jenkins
 
Twilio Signal 2016 WebRTC Reborn
Twilio Signal 2016 WebRTC RebornTwilio Signal 2016 WebRTC Reborn
Twilio Signal 2016 WebRTC Reborn
Twilio Inc
 
WebRTC 101 - How to get started building your first WebRTC application
WebRTC 101 - How to get started building your first WebRTC applicationWebRTC 101 - How to get started building your first WebRTC application
WebRTC 101 - How to get started building your first WebRTC application
Dan Jenkins
 
[1C2]webrtc 개발, 현재와 미래
[1C2]webrtc 개발, 현재와 미래[1C2]webrtc 개발, 현재와 미래
[1C2]webrtc 개발, 현재와 미래
NAVER D2
 
WebRTC Seminar Report
WebRTC  Seminar ReportWebRTC  Seminar Report
WebRTC Seminar Report
srinivasa teja
 
WebRTC Tutorial by Dean Bubley of Disruptive Analysis & Tim Panton of Westhaw...
WebRTC Tutorial by Dean Bubley of Disruptive Analysis & Tim Panton of Westhaw...WebRTC Tutorial by Dean Bubley of Disruptive Analysis & Tim Panton of Westhaw...
WebRTC Tutorial by Dean Bubley of Disruptive Analysis & Tim Panton of Westhaw...
Dean Bubley
 
DevCon 5 (July 2013) - WebSockets
DevCon 5 (July 2013) - WebSocketsDevCon 5 (July 2013) - WebSockets
DevCon 5 (July 2013) - WebSockets
Crocodile WebRTC SDK and Cloud Signalling Network
 
WebRTC Reborn Hackference
WebRTC Reborn HackferenceWebRTC Reborn Hackference
WebRTC Reborn Hackference
Dan Jenkins
 
[workshop] The Revolutionary WebRTC
[workshop] The Revolutionary WebRTC[workshop] The Revolutionary WebRTC
[workshop] The Revolutionary WebRTC
Giacomo Vacca
 
WebRTC ... GWT & in-browser computation
WebRTC ... GWT & in-browser computationWebRTC ... GWT & in-browser computation
WebRTC ... GWT & in-browser computation
JooinK
 
FIWARE Global Summit - Real-time Media Stream Processing Using Kurento
FIWARE Global Summit - Real-time Media Stream Processing Using KurentoFIWARE Global Summit - Real-time Media Stream Processing Using Kurento
FIWARE Global Summit - Real-time Media Stream Processing Using Kurento
FIWARE
 
WebRTC, another Web?
WebRTC, another Web?WebRTC, another Web?
WebRTC, another Web?
Hui Fan
 
WebRTC Reborn - Full Stack
WebRTC Reborn  - Full StackWebRTC Reborn  - Full Stack
WebRTC Reborn - Full Stack
Dan Jenkins
 
DevCon5 (July 2014) - Acision SDK
DevCon5 (July 2014) - Acision SDKDevCon5 (July 2014) - Acision SDK
DevCon5 (July 2014) - Acision SDK
Crocodile WebRTC SDK and Cloud Signalling Network
 
Http/2 - What's it all about?
Http/2  - What's it all about?Http/2  - What's it all about?
Http/2 - What's it all about?
Andy Davies
 
WebRTC Reborn Over The Air
WebRTC Reborn Over The AirWebRTC Reborn Over The Air
WebRTC Reborn Over The Air
Dan Jenkins
 
WebRTC standards update - November 2014
WebRTC standards update - November 2014WebRTC standards update - November 2014
WebRTC standards update - November 2014
Victor Pascual Ávila
 
VozDigital DevFest 31/10/14
VozDigital DevFest 31/10/14VozDigital DevFest 31/10/14
VozDigital DevFest 31/10/14
javier_fernandez_seco
 

Similar to WebRTC: A front-end perspective (20)

DevCon5 (July 2014) - Intro to WebRTC
DevCon5 (July 2014) - Intro to WebRTCDevCon5 (July 2014) - Intro to WebRTC
DevCon5 (July 2014) - Intro to WebRTC
 
WebRTC on Mobile
WebRTC on MobileWebRTC on Mobile
WebRTC on Mobile
 
WebRTC Reborn SignalConf 2016
WebRTC Reborn SignalConf 2016WebRTC Reborn SignalConf 2016
WebRTC Reborn SignalConf 2016
 
Twilio Signal 2016 WebRTC Reborn
Twilio Signal 2016 WebRTC RebornTwilio Signal 2016 WebRTC Reborn
Twilio Signal 2016 WebRTC Reborn
 
WebRTC 101 - How to get started building your first WebRTC application
WebRTC 101 - How to get started building your first WebRTC applicationWebRTC 101 - How to get started building your first WebRTC application
WebRTC 101 - How to get started building your first WebRTC application
 
[1C2]webrtc 개발, 현재와 미래
[1C2]webrtc 개발, 현재와 미래[1C2]webrtc 개발, 현재와 미래
[1C2]webrtc 개발, 현재와 미래
 
WebRTC Seminar Report
WebRTC  Seminar ReportWebRTC  Seminar Report
WebRTC Seminar Report
 
WebRTC Tutorial by Dean Bubley of Disruptive Analysis & Tim Panton of Westhaw...
WebRTC Tutorial by Dean Bubley of Disruptive Analysis & Tim Panton of Westhaw...WebRTC Tutorial by Dean Bubley of Disruptive Analysis & Tim Panton of Westhaw...
WebRTC Tutorial by Dean Bubley of Disruptive Analysis & Tim Panton of Westhaw...
 
DevCon 5 (July 2013) - WebSockets
DevCon 5 (July 2013) - WebSocketsDevCon 5 (July 2013) - WebSockets
DevCon 5 (July 2013) - WebSockets
 
WebRTC Reborn Hackference
WebRTC Reborn HackferenceWebRTC Reborn Hackference
WebRTC Reborn Hackference
 
[workshop] The Revolutionary WebRTC
[workshop] The Revolutionary WebRTC[workshop] The Revolutionary WebRTC
[workshop] The Revolutionary WebRTC
 
WebRTC ... GWT & in-browser computation
WebRTC ... GWT & in-browser computationWebRTC ... GWT & in-browser computation
WebRTC ... GWT & in-browser computation
 
FIWARE Global Summit - Real-time Media Stream Processing Using Kurento
FIWARE Global Summit - Real-time Media Stream Processing Using KurentoFIWARE Global Summit - Real-time Media Stream Processing Using Kurento
FIWARE Global Summit - Real-time Media Stream Processing Using Kurento
 
WebRTC, another Web?
WebRTC, another Web?WebRTC, another Web?
WebRTC, another Web?
 
WebRTC Reborn - Full Stack
WebRTC Reborn  - Full StackWebRTC Reborn  - Full Stack
WebRTC Reborn - Full Stack
 
DevCon5 (July 2014) - Acision SDK
DevCon5 (July 2014) - Acision SDKDevCon5 (July 2014) - Acision SDK
DevCon5 (July 2014) - Acision SDK
 
Http/2 - What's it all about?
Http/2  - What's it all about?Http/2  - What's it all about?
Http/2 - What's it all about?
 
WebRTC Reborn Over The Air
WebRTC Reborn Over The AirWebRTC Reborn Over The Air
WebRTC Reborn Over The Air
 
WebRTC standards update - November 2014
WebRTC standards update - November 2014WebRTC standards update - November 2014
WebRTC standards update - November 2014
 
VozDigital DevFest 31/10/14
VozDigital DevFest 31/10/14VozDigital DevFest 31/10/14
VozDigital DevFest 31/10/14
 

Recently uploaded

Portugal Dreamin 24 - How to easily use an API with Flows
Portugal Dreamin 24  - How to easily use an API with FlowsPortugal Dreamin 24  - How to easily use an API with Flows
Portugal Dreamin 24 - How to easily use an API with Flows
Thierry TROUIN ☁
 
2023. Archive - Gigabajtos selfpublisher homepage
2023. Archive - Gigabajtos selfpublisher homepage2023. Archive - Gigabajtos selfpublisher homepage
2023. Archive - Gigabajtos selfpublisher homepage
Zsolt Nemeth
 
Cyber Security Course & Guide. X.GI. pdf
Cyber Security Course & Guide. X.GI. pdfCyber Security Course & Guide. X.GI. pdf
Cyber Security Course & Guide. X.GI. pdf
RohitRoshanBengROHIT
 
Chennai Girls Call ServiCe X00XXX00XX Tanisha Best High Class Chennai Available
Chennai Girls Call ServiCe X00XXX00XX Tanisha Best High Class Chennai AvailableChennai Girls Call ServiCe X00XXX00XX Tanisha Best High Class Chennai Available
Chennai Girls Call ServiCe X00XXX00XX Tanisha Best High Class Chennai Available
shamrisumri
 
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
ffg01100
 
High Profile Girls Call ServiCe Chennai XX00XXX00X Tanisha Best High Class Ch...
High Profile Girls Call ServiCe Chennai XX00XXX00X Tanisha Best High Class Ch...High Profile Girls Call ServiCe Chennai XX00XXX00X Tanisha Best High Class Ch...
High Profile Girls Call ServiCe Chennai XX00XXX00X Tanisha Best High Class Ch...
shamrisumri
 
UMN degree offer diploma Transcript
UMN degree offer diploma TranscriptUMN degree offer diploma Transcript
UMN degree offer diploma Transcript
cenocb
 
Iot-Internet-of-Things_Industrial revolution 4.0-ppt.pptx
Iot-Internet-of-Things_Industrial revolution 4.0-ppt.pptxIot-Internet-of-Things_Industrial revolution 4.0-ppt.pptx
Iot-Internet-of-Things_Industrial revolution 4.0-ppt.pptx
DeepakKumar862274
 
Book dating , international dating phgra
Book dating , international dating phgraBook dating , international dating phgra
Book dating , international dating phgra
thomaskurtha9
 
@Girls @Call Chennai 🛬 XXXXXXXXXX 🛬 available 24*7 cash payment book now pay ...
@Girls @Call Chennai 🛬 XXXXXXXXXX 🛬 available 24*7 cash payment book now pay ...@Girls @Call Chennai 🛬 XXXXXXXXXX 🛬 available 24*7 cash payment book now pay ...
@Girls @Call Chennai 🛬 XXXXXXXXXX 🛬 available 24*7 cash payment book now pay ...
shamrisumri
 
How Salesforce Development in the UK is Driving Digital Transformation
How Salesforce Development in the UK is Driving Digital TransformationHow Salesforce Development in the UK is Driving Digital Transformation
How Salesforce Development in the UK is Driving Digital Transformation
Sweet Potato Tec
 
workbook and project U5 1ºsecundaria.pdf
workbook and project U5 1ºsecundaria.pdfworkbook and project U5 1ºsecundaria.pdf
workbook and project U5 1ºsecundaria.pdf
anya2024forgya
 
Build a Professional Resume using Canva , Tanapat Limsaiprom
Build a Professional Resume using Canva , Tanapat LimsaipromBuild a Professional Resume using Canva , Tanapat Limsaiprom
Build a Professional Resume using Canva , Tanapat Limsaiprom
TanapatLimsaiprom1
 
Ontology for the semantic enhancement, database definition and management and...
Ontology for the semantic enhancement, database definition and management and...Ontology for the semantic enhancement, database definition and management and...
Ontology for the semantic enhancement, database definition and management and...
Edward Blurock
 
Web development Platform Constraints.pptx
Web development Platform Constraints.pptxWeb development Platform Constraints.pptx
Web development Platform Constraints.pptx
ssuser2f6682
 
Megalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor TerpercayaMegalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor Terpercaya
Megalive99
 
AWS Networking Basic , tanapat limsaiprom
AWS Networking Basic , tanapat limsaipromAWS Networking Basic , tanapat limsaiprom
AWS Networking Basic , tanapat limsaiprom
ธนาพัฒน์ ลิ้มสายพรหม
 
Network Layer and its protocols mod .pptx
Network Layer and its protocols mod .pptxNetwork Layer and its protocols mod .pptx
Network Layer and its protocols mod .pptx
cossykin19
 
Trading Strategy for London silver bullet
Trading Strategy for London silver bulletTrading Strategy for London silver bullet
Trading Strategy for London silver bullet
OkgatoSemadi1
 
202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影
202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影
202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影
ffg01100
 

Recently uploaded (20)

Portugal Dreamin 24 - How to easily use an API with Flows
Portugal Dreamin 24  - How to easily use an API with FlowsPortugal Dreamin 24  - How to easily use an API with Flows
Portugal Dreamin 24 - How to easily use an API with Flows
 
2023. Archive - Gigabajtos selfpublisher homepage
2023. Archive - Gigabajtos selfpublisher homepage2023. Archive - Gigabajtos selfpublisher homepage
2023. Archive - Gigabajtos selfpublisher homepage
 
Cyber Security Course & Guide. X.GI. pdf
Cyber Security Course & Guide. X.GI. pdfCyber Security Course & Guide. X.GI. pdf
Cyber Security Course & Guide. X.GI. pdf
 
Chennai Girls Call ServiCe X00XXX00XX Tanisha Best High Class Chennai Available
Chennai Girls Call ServiCe X00XXX00XX Tanisha Best High Class Chennai AvailableChennai Girls Call ServiCe X00XXX00XX Tanisha Best High Class Chennai Available
Chennai Girls Call ServiCe X00XXX00XX Tanisha Best High Class Chennai Available
 
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
 
High Profile Girls Call ServiCe Chennai XX00XXX00X Tanisha Best High Class Ch...
High Profile Girls Call ServiCe Chennai XX00XXX00X Tanisha Best High Class Ch...High Profile Girls Call ServiCe Chennai XX00XXX00X Tanisha Best High Class Ch...
High Profile Girls Call ServiCe Chennai XX00XXX00X Tanisha Best High Class Ch...
 
UMN degree offer diploma Transcript
UMN degree offer diploma TranscriptUMN degree offer diploma Transcript
UMN degree offer diploma Transcript
 
Iot-Internet-of-Things_Industrial revolution 4.0-ppt.pptx
Iot-Internet-of-Things_Industrial revolution 4.0-ppt.pptxIot-Internet-of-Things_Industrial revolution 4.0-ppt.pptx
Iot-Internet-of-Things_Industrial revolution 4.0-ppt.pptx
 
Book dating , international dating phgra
Book dating , international dating phgraBook dating , international dating phgra
Book dating , international dating phgra
 
@Girls @Call Chennai 🛬 XXXXXXXXXX 🛬 available 24*7 cash payment book now pay ...
@Girls @Call Chennai 🛬 XXXXXXXXXX 🛬 available 24*7 cash payment book now pay ...@Girls @Call Chennai 🛬 XXXXXXXXXX 🛬 available 24*7 cash payment book now pay ...
@Girls @Call Chennai 🛬 XXXXXXXXXX 🛬 available 24*7 cash payment book now pay ...
 
How Salesforce Development in the UK is Driving Digital Transformation
How Salesforce Development in the UK is Driving Digital TransformationHow Salesforce Development in the UK is Driving Digital Transformation
How Salesforce Development in the UK is Driving Digital Transformation
 
workbook and project U5 1ºsecundaria.pdf
workbook and project U5 1ºsecundaria.pdfworkbook and project U5 1ºsecundaria.pdf
workbook and project U5 1ºsecundaria.pdf
 
Build a Professional Resume using Canva , Tanapat Limsaiprom
Build a Professional Resume using Canva , Tanapat LimsaipromBuild a Professional Resume using Canva , Tanapat Limsaiprom
Build a Professional Resume using Canva , Tanapat Limsaiprom
 
Ontology for the semantic enhancement, database definition and management and...
Ontology for the semantic enhancement, database definition and management and...Ontology for the semantic enhancement, database definition and management and...
Ontology for the semantic enhancement, database definition and management and...
 
Web development Platform Constraints.pptx
Web development Platform Constraints.pptxWeb development Platform Constraints.pptx
Web development Platform Constraints.pptx
 
Megalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor TerpercayaMegalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor Terpercaya
 
AWS Networking Basic , tanapat limsaiprom
AWS Networking Basic , tanapat limsaipromAWS Networking Basic , tanapat limsaiprom
AWS Networking Basic , tanapat limsaiprom
 
Network Layer and its protocols mod .pptx
Network Layer and its protocols mod .pptxNetwork Layer and its protocols mod .pptx
Network Layer and its protocols mod .pptx
 
Trading Strategy for London silver bullet
Trading Strategy for London silver bulletTrading Strategy for London silver bullet
Trading Strategy for London silver bullet
 
202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影
202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影
202254.com香蕉影视,在线观看《我才不要和你做朋友呢》在线观看最新电影,香蕉影视在线观看《我才不要和你做朋友呢》在线观看高清电影
 

WebRTC: A front-end perspective

  • 1. WebRTC A front-end perspective Opera Software Fronteers 2014 @shwetank
  • 2. About me Shwetank Dixit Opera Software Fronteers 2014 @shwetank Developer Relations, Opera Software
  • 5. Source: https://www.flickr.com/photos/rambow/858717314 Source: https://www.flickr.com/photos/rambow/858719954
  • 8. What is WebRTC? Real Time Peer-to-Peer Communication
  • 10. but … So far I’ve seen very few web people talking about it
  • 11. Whats the biggest barrier to WebRTC adoption?* Lack of Awareness Not supported by MS Not supported by Apple Other 0% 5.5% 11% 16.5% 22% * WebRTC World Outlook Survey 2014
  • 12. WebRTC is for but … Web Developers
  • 16. mediaStream + ` ` Device Camera Microphone
  • 17. getUserMedia + ` ` Device Camera Microphone
  • 19. gUM + CSS(Filters, Masks, Blend Modes) Create interesting visual effects from camera output in real-time using CSS
  • 20. gUM + Web Audio Sound powered actions and navigation
  • 22. World’s first webcam http://en.wikipedia.org/wiki/Trojan_Room_coffee_pot
  • 23. What can you achieve with gUM? - Motion Detection (Baby Monitors, Security Cam) - Hotspots - Gesture Recognition - Emotion Recognition - Sound Detection and Visualisation - Voice / Sound Activated Controls - Capture video (Kind of) (whammy.js, gifshot)
  • 24. gUM: Current way to do it navigator.getUserMedia* *with prefixes
  • 25. gUM: Broken Error Handling Exceptions are not caught by the current API. Promises can fix this. Based on: http://lists.w3.org/Archives/Public/public-media-capture/2014Sep/0171.html
  • 26. gUM: Current Way var failure = function(reason){ log("Failed to show camera: " + reason.message); } ! navigator.getUserMedia(constraints, function(stream) { try { $video.src = window.URL.createObjectURL(stream); $video.play(); } catch(e) { failure(e); } //failure must tolerate non-MediaStreamError }, failure); Based on: http://lists.w3.org/Archives/Public/public-media-capture/2014Sep/0171.html
  • 27. gUM: In the future ? navigator.mediaDevices.getUserMedia
  • 28. gUM: In the future ? Promises Proposal navigator.mediaDevices.getUserMedia(constraints) .then( function(stream) { videoElement.src = window.URL.createObjectURL(stream); videoElement.play(); }).catch(function (reason){ log(“Failed to show camera: ” +reason.message); }); Based on: http://lists.w3.org/Archives/Public/public-media-capture/2014Sep/0171.html
  • 29. Debate This is still up for debate. Some are eager to just ship v1.0 and add support for promises in gUM at a later stage. ! Based on: http://lists.w3.org/Archives/Public/public-media-capture/2014Oct/0003.html
  • 30. gUM: Other concerns Impossible for a gUM app to use the device flash for low-light ! Use (auto) zoom Use (auto) focus
  • 31. gUM: Other concerns “If you look further into this API then it doesn’t offer any advanced features that you expect in a good camera app: focus, flash, zoom ` etc. It is clear that …(getUserMedia).. has been designed for use in P2P applications and not as a dedicated camera experience.” - Paul Kinlan
  • 32. Mediastream Image-Capture ! Will provide a deeper level of control for taking photos ! w3.org/TR/image-capture/
  • 33. Mediastream Image-Capture White Balance ISO Red-Eye Reduction Exposure Brightness Contrast ` Saturation Sharpness Zoom takePhoto()
  • 34. Mediastream Image-Capture Focus? Flash? ¯_(ツ)_/¯
  • 35. Getting permission is not easy Some users don’t seem to notice the permissions dialog in certain browsers
  • 36. Getting permission is not easy Some users don’t seem to notice the permissions dialog in certain browsers
  • 37. Some users don’t seem to notice the permissions dialog in certain browsers
  • 38. Some users don’t seem to notice the permissions dialog in certain browsers
  • 39. Some users don’t seem to notice the permissions dialog in certain browsers
  • 40. Getting permission is not easy Permissions dialogs are different on different platforms and browsers … ` especially mobile
  • 42. HTTPS helps … If the app is on HTTPS, then the browser will remember the last granted permission.
  • 48. ICE - Interactive Connectivity Establishment * May or may not wax a chump like a candle.
  • 49. STUN Whats my external IP Address? Your external IP Address is x.x.x.x
  • 50. TURN around… Total eclipse of the (p2p) call …
  • 51. TURN Basically relays stuff from one party to the other.
  • 52. Big Fat TURN Server
  • 53. TURN Basically relays stuff from one party to the other. In this case, connection won’t be p2p, but at least the connection will be made!
  • 54. TURN Basically relays stuff from one party to the other. In this case, connection won’t be p2p, but at least the connection will be made! Generally speaking, a TURN server will include a STUN server too.
  • 55. Free ICE Project github.com/DamonOehlman/freeice (List of free STUN/TURN servers to use in your projects)
  • 56. The WebRTC Signalling Process WebSocket || XHR || SIP || Carrier Pigeon
  • 57. Session Description (SDP) v=0 o=- 680121471469462884 2 IN IP4 127.0.0.1 s=- t=0 0 a=group:BUNDLE audio video a=msid-semantic: WMS GUKF430Khp9jEQiPrdYe0LbTAALiNAKAIfl2 Audio Lines m=audio 54278 RTP/SAVPF 111 103 104 0 8 106 105 13 126 c=IN IP4 180.6.6.6 a=rtcp:54278 IN IP4 180.6.6.6 ! ICE Candidates a=candidate:4022866446 1 udp 2113937151 192.168.0.197 36768 typ host generation 0 a=candidate:4022866446 2 udp 2113937151 192.168.0.197 36768 typ host generation 0 a=candidate:2706108158 1 tcp 1509957375 192.168.0.197 0 typ host generation 0 a=candidate:2706108158 2 tcp 1509957375 192.168.0.197 0 typ host generation 0 a=candidate:1853887674 1 udp 1845501695 46.2.2.2 36768 typ srflx raddr 192.168.0.197 rport 36768 generation 0 a=candidate:1853887674 2 udp 1845501695 46.2.2.2 36768 typ srflx raddr 192.168.0.197 rport 36768 generation 0 a=candidate:2157334355 1 udp 33562367 180.6.6.6 54278 typ relay raddr 46.2.2.2 rport 38135 generation 0 a=candidate:2157334355 2 udp 33562367 180.6.6.6 54278 typ relay raddr 46.2.2.2 rport 38135 generation 0
  • 58. The WebRTC Signalling Process WebSocket || XHR || SIP || Carrier Pigeon Creates Offer local description
  • 59. The WebRTC Signalling Process WebSocket || XHR || SIP || Carrier Pigeon Receives Offer local description
  • 60. The WebRTC Signalling Process WebSocket || XHR || SIP || Carrier Pigeon Receives Offer remote description local description
  • 61. The WebRTC Signalling Process WebSocket || XHR || SIP || Carrier Pigeon Creates and sends Answer local description local description remote description
  • 62. The WebRTC Signalling Process WebSocket || XHR || SIP || Carrier Pigeon Receives Answer local description local description remote description
  • 63. The WebRTC Signalling Process WebSocket || XHR || SIP || Carrier Pigeon Receives Answer local description local description remote description remote description
  • 64. The WebRTC Signalling Process WebSocket || XHR || SIP || Carrier Pigeon Connectivity Checks local description local description remote description remote description
  • 65. The WebRTC Signalling Process WebSocket || XHR || SIP || Carrier Pigeon P2P Connection Established
  • 70. Bandwidth Numbers ! 720p : 1-2 Mbps // VP8 at 30fps 360p : 0.5 - 1 Mbps // VP8 at 30fps 180p : 0.1 - 0.5 Mbps // VP8 at 30fps Audio : .06 - 0.51 Mbps // Opus
  • 71. Debugging opera://webrtc-internals chrome://webrtc-internals about:webrtc ! The getStats() method ! callstats.io !
  • 72. Data Channels Once RTCPeerConnection is established, we can use Data Channels to transfer data P2P. Data can be text or binary data
  • 73. Whats the advantage? Data Channels provide a * High Performance * P2P * Low Latency Connection to others
  • 74. Working with Data datachannel .onopen // Data Channel opened .onclose // Data Channel closed .onerror // Error occurred .onmessage // New message arrived .send() // Send a message
  • 75. DataChannels can work exactly like WebSockets if you want, but they don’t have to …
  • 76. SCTP // Transport Protocol DTLS // Encryption UDP
  • 77. notable options ordered send data packets in ordered fashion or not ! maxRetransmitTime Max time to try to send a failed message ! maxRetransmits Max number of tries to deliver failed message before it gives up
  • 78. In the wild Peerflix PeerCDN WebTorrent
  • 79. In the wild Peerflix @mafintosh ! PeerCDN WebTorrent @feross
  • 84. ORTC - WebRTC 1.1 (ORTC) - SDP exchange not required - Advanced stuff like simulcast - More low level than WebRTC - Shim for WebRTC to work on top of ORTC - Important goal is compatibility. Existing apps should not be affected
  • 86. Opera Software Cheers! @shwetank Fronteers 2014 shwetankd@opera.com