WebRTC training about JavaScript promises and an update about WebRTC interoperability, API compatibility and IMTC tests. Part of the monthly WebRTC live Q&A sessions by Alex Gouailard, Dan Burnett and Amir Zmora (Slides on JavaScript promises carry a specific Copyright as detailed on slides themselves)

1. WebRTC Standards &
Implementation Q&A
Amir Zmora
TheNewDialTone
Dan Burnett
StandardsPlay
Alex Gouaillard
WebRTC by Dr Alex / Citrix

2. Watch video recording of this session
http://ccst.io/e/webrtcstandards5

3. Session sponsored by
WebRTC.ventures is a custom design and development shop dedicated to building WebRTC based applications
for web and mobile. We have built end-to-end broadcast solutions for events and entertainment clients,
telehealth solutions for multiple clients, live support tools, as well as communication tools for a variety of other
applications. WebRTC.ventures is a recognized development partner of TokBox and has also built native
WebRTC solutions

4. Session sponsored by
Blacc Spot Media is comprised of a collaborative team of designers, developers and thought leaders specializing
in Web-Real Time Communications (WebRTC). Blacc Spot Media was founded in April 2011 with the goal of
creating innovative solutions using new technologies such as WebRTC. Our team works on strategic projects
developing custom applications, enterprise platforms and mobile applications for a wide array of clients.

5. We use CrowdCast….It’s WebRTC

6. WebRTCStandards.info
Sponsored by

7. About Us
• Amir Zmora • Dan Burnett • Alex Gouaillard

8. Save The Date: July 18
Register Now: http://ccst.io/e/webrtcstandards6
Next Session

9. JavaScript Promises in WebRTC
(Excerpted from WebRTC 101, Copyright 2015-
2016 Digital Codex LLC, Used with Permission)

10. Single-threaded programming
• Great for fast calls
• Fails for blocking calls
a = a+1;
a = getHugeFileFromInternet();
Copyright 2015-2016 Digital Codex LLC,
Used with Permission

11. How to suspend/resume execution?
• Events
• Possibly multiple listeners called multiple times
• But event might occur before listeners added!
• Callbacks
• Typically called once, but guaranteed
var btn = document.querySelector('.btn');
btn.addEventListener('onclick', function() {
// do something cool
});
var ms = getUserMedia(successCB, failureCB);
Copyright 2015-2016 Digital Codex LLC,
Used with Permission

12. What are they?
• New feature defined in Promises/A+
• https://promisesaplus.com
• Planned for ES 6
• http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
• Supported today by all browsers in some form
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
Copyright 2015-2016 Digital Codex LLC,
Used with Permission

13. No, really, what are they?
• Promise: An object that eventually will either be fulfilled with a value or rejected with a
reason
• Constructor takes function with resolve (fulfill) and reject callbacks
• Async code goes inside
• Promise has 'then' method that registers fulfill and/or reject handlers
Copyright 2015-2016 Digital Codex LLC,
Used with Permission

14. Making promises
function pleaseWait(duration) {
var p = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("I waited");
}, duration);
};
return p;
}
pleaseWait(5)
.then(function(x) {
console.log("promise fulfulled: " + x);
})
.catch(function(y) {
console.log("promise rejected: " + y);
});
Copyright 2015-2016 Digital Codex LLC,
Used with Permission

15. Making promises
function pleaseWait(duration) {
var p = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("I waited");
}, duration);
};
return p;
}
pleaseWait(5)
.then(function(x) {
console.log("promise fulfulled: " + x);
})
.catch(function(y) {
console.log("promise rejected: " + y);
});
Copyright 2015-2016 Digital Codex LLC,
Used with Permission

16. Chaining promises
• If your resolve/reject fct returns a promise it can be chained
pleaseWait(5)
.then(logSomethingAndReturnPromise)
.then(function() {
return pleaseWait(10);
})
.then(function() {
console.log("all done");
})
.catch(function(y) {
console.log("failed somewhere: " + y);
});
Watch out for tricky special cases!
Copyright 2015-2016 Digital Codex LLC,
Used with Permission

17. Promises in WebRTC
• Originally all async API calls used callbacks plus immediate errors
• All async APIs have changed to use Promises instead
• but not fully implemented yet
Copyright 2015-2016 Digital Codex LLC,
Used with Permission

18. getUserMedia()
• Different from the rest we'll see in that old syntax remains
• Old syntax
• New (additional) syntax
var ms =
navigator.getUserMedia(constraints, successCB, failureCB);
var msPromise =
navigator.mediaDevices.getUserMedia(constraints);
Copyright 2015-2016 Digital Codex LLC,
Used with Permission

19. createOffer/Answer()
• Old syntax
• New (replacement) syntax
pc.createOffer(successCB, failureCB, offerOptions);
pc.createAnswer(successCB, failureCB);
var offerPromise = pc.createOffer(offerOptions);
var answerPromise = pc.createAnswer();
Copyright 2015-2016 Digital Codex LLC,
Used with Permission

20. setLocal/RemoteDescription()
• Old syntax
• New (replacement) syntax
pc.setLocalDescription(localSDP, successCB, failureCB);
pc.setRemoteDescription(remoteSDP, successCB, failureCB);
var undefinedPromise = pc.setLocalDescription(localSDP);
var undefinedPromise = pc.setRemoteDescription(remoteSDP);
Copyright 2015-2016 Digital Codex LLC,
Used with Permission

21. addIceCandidate()
• Old syntax
• New (replacement) syntax
pc.addIceCandidate(candidate, successCB, failureCB);
var undefinedPromise = pc.addIceCandidate(candidate);
Copyright 2015-2016 Digital Codex LLC,
Used with Permission

22. Promise(ing) resources
• Jake Archibald's Tutorial
• http://www.html5rocks.com/en/tutorials/es6/promises/
• Balint Erdi Tutorial
• http://www.toptal.com/javascript/javascript-promises
• About those special cases
• http://javascriptplayground.com/blog/2015/02/promises/
• Mozilla Promise page
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
Copyright 2015-2016 Digital Codex LLC,
Used with Permission

23. Interoperability vs. Compatibility

24. Codecs
Security
Connectivity
APIs
ORTC
Things that go over the wire Developer Interfaces

25. The SIP Case Study
• Defines: Procedures, Syntax, Media related stuff…
• No standard APIs
Is It Interoperable?
• In theory: YES
• Reality: Vendor specific implementations… One of the reasons we have SBCs in the
middle

26. Why WebRTC is Different
• Defines APIs
• Nothing to do with signaling
• Not so many implementations
• Embedded in browsers
• Services are mainly closed islands
• Typically exiting the island through SIP GWs

27. Interoperability, Compatibility and Backwards
Compatibility are still important for WebRTC
• Browser versions
• Mobile SDKs
• Private compilations of WebRTC into clients or server functions
See a post on this topic
https://thenewdialtone.com/webrtc-api-compatibility/

28. WebRTC Interoperability Tests at IMTC

29. Browsers before WebRTC
Did not need to test against each others.
Stand alone, in-browser, in-tab, testing of web app was enough.

30. JS API (Specification) testing
• Use case: I want to test if a given browser supports spec X.
• Scope: within a browser.
• Owner: W3C – “test the web forward”, Browser testing & tools WG

31. Browsers Interoperability (JS API)
• Use Case: I want to write a web app based on Media Device and WebRTC/ORTC APIs
that works (does not generate JS error) whatever the browser, the browser revision,
version, Operating system, …
• Scope: all browsers, all OS, one browser at a time.
• Owner: Unclear. Adapter.js and appRTC are behind a google CLA, but have many
external contributors.

32. Browsers Interoperability (On the wire)
• Use Case: I want to test my web application communicating with itself running on two
different browsers, on two different OSes: e.g. chrome on Mac against edge on win 10.
• Scope: Two browsers communicating, possibly running on two separate
machines/instances with different OSes, for all possible pairs of [browsers] x [OSes].
• Owner: Unclear. Specs are IETF’s. Google as some tests Cr x FF. NTT has some tests
Cr x FF. IMTC took the lead and sponsor the development of a testing framework.
• There are three simplifications of this use case:
• single page tests (two PC objects in the same page)
• tab-to-tab (two PC objects in different page, but in the same browser)
• browser to browser (two PCs object in different browsers, running on the same
machine/instance)

33. Browsers Interoperability (On the wire)
• Mozilla developed steeplechase, but is limited in testing resource to run it through all the
OSes and versions. Moreover most of the existing tests are written to run in isolation, and
cannot be reused for interoperability testing between two browsers.
• For interoperability between two browsers, you also need an app, with a signaling server
to be able to test. Google has been testing interop between chrome and firefox through
appRTC.
• Testing the network part is a challenge on its own, and specific tools have been or are
being developed to address those:
• NTT’s NAT combinations browser to browser tests (ETA: April 2016)
• Mozilla NAT server written in python

34. Interop. between browser & !browser (On the wire)
• Use Case: I want to test my web app running in a browser, against the corresponding
native app, or against a gateway/media server, which would understand the same
signaling format, and use the same signaling transport protocol.
• Scope: Browser to non-browser, for each pair of [browser] x [device||server]
• Owner: unclear, Multiple.
The specifications are slightly different for non-browser clients, e.g. for ICE, MTI codecs,
and so on. Tests expectation need to be adapted.

35. WebRTC stack testing (native, IoT, …)
• Use Case: I want to use a webrtc implementation in my native app (desktop or mobile). I
possibly want to modify part of the code, but still run the “standard” tests on it, either to
check if it is still safe to use, and or to report bugs to the stack owner using their own
tests for reproducibility.
• Scope: Native apps’ webrtc lib
• Owner: respective webrtc stack owners.

36. IMTC WebRTC Testing
• Interop testing is not in the scope of W3C nor IETF, IMTC fills that gap
• Already developed an automated interop. Testing framework for multiple OS,
Browser, version, plugins. Limited to 1:1.
• Next steps (Q3/Q4):
• extend to more OS and more Browsers
• extend to multi party calls
• Support simulcast

37. IMTC WebRTC
Testing – infoViz
• http://www.slideshare.net/alexpiwi5/2016-q1-webrtc-testing-state-of-the-art

39. Save The Date: July 18
Register Now: http://ccst.io/e/webrtcstandards6
Next Session

40. Session sponsored by
WebRTC.ventures is a custom design and development shop dedicated to building WebRTC based applications
for web and mobile. We have built end-to-end broadcast solutions for events and entertainment clients,
telehealth solutions for multiple clients, live support tools, as well as communication tools for a variety of other
applications. WebRTC.ventures is a recognized development partner of TokBox and has also built native
WebRTC solutions

41. Session sponsored by
Blacc Spot Media is comprised of a collaborative team of designers, developers and thought leaders specializing
in Web-Real Time Communications (WebRTC). Blacc Spot Media was founded in April 2011 with the goal of
creating innovative solutions using new technologies such as WebRTC. Our team works on strategic projects
developing custom applications, enterprise platforms and mobile applications for a wide array of clients.

42. Thank You
Amir Zmora
TheNewDialTone
Dan Burnett
StandardsPlay
Alex Gouaillard
WebRTC by Dr Alex