Microsoft Edge support for the WebRTC samples

tl;dr download the Windows 10 preview and test the WebRTC getUserMedia samples in the Microsoft Edge browser!

The WebRTC samples that are made available by Google's WebRTC team on GitHub are a tremendously useful resource for starting with WebRTC. They are so useful that this year my favorite answer on the discuss-webrtc mailing list has been "there is a sample for that".

The samples are grouped into three categories: - getUserMedia samples which show how to use the getUserMedia API to access the microphone and camera, - RTCPeerConnection samples which demonstrate the use of the RTCPeerConnection API to establish a peer-to-peer connection (usually within a single page), and - RTCDataChannel samples which demonstrate the higher-level data channel API to send and receive data and files.

The demos make use of adapter.js to hide all of the current implementation differences from the developer. The aim is to allow developers to write spec-compliant code that works in any browser. For example, the getUserMedia API is currently available as navigator.webkitGetUserMedia in Chrome and navigator.mozGetUserMedia in Firefox. Also, Jan-Ivar Bruaroey from Mozilla added some code which transforms the new spec-compliant syntax to acquire camera resolutions to the older syntax still used by Chrome.

Last month, the Microsoft Edge team announced support for getUserMedia in their browser. Wouldn't it be awesome if the getUserMedia demos would work in Edge, too?

Since Edge does not use prefixes, there was little to be shimmed. The only difference that needed to be supported was implementing a way to attach media streams to <video> elements. This is done with the helper function attachMediaStream(). Getting those changes added to adapter.js was pretty easy, along with a bugfix resulting from a pull request on one of the Microsoft Edge demos.

With those changes merged, I attempted to make the samples work with Edge. The biggest problem was that none of the getUserMedia samples actually used adapter.js -- they were designed to be simple and self-explanatory. But now, using adapter.js instead of trying to shim just the required bits in each demo made more sense. This did not take long actually and there were just a few lines of code that needed to be changed.

As a result, all getUserMedia demos work in Edge now as well. And Firefox. And Chrome. Without changes. That's pretty significant.

Thanks to Bernard Aboba, Harald Alvestrand, Jan-Ivar Bruaroey and Shijun Sun for helping with these changes.

Enjoy this post? We'd love to invite you to join our mailing list, &you, where we connect with our community and share the latest we're learning.

You might also enjoy reading: