Hello, WebRTC on Safari 11

WebRTC finally comes to Safari

Image for post
Image for post

This morning I woke up and the web as we know it has drastically changed for the better. WebRTC’s dream of ubiquitous p2p realtime communications for the open web became real. As part of Apple’s amazing WWDC feast this year, they have served up support for WebRTC in Safari 11. Fuck. Yes. Now there will no doubt be plenty of excellent articles on this subject in the coming days, weeks, and months but I just wanted to share the demo app I put together. Seeing is believing.

If you have upgraded to the iOS 11 developer beta or macOS developer beta, just go here and allow access to your camera as you would any other WebRTC demo. This is especially amazing on mobile. If you visit from mobile, click the video to switch from the user facing camera to environment facing camera.

If you’ve worked with WebRTC before, there aren’t many major changes but I personally have not handled the camera choice before so here’s a breakdown of the code I wrote for this demo.

First create a <video> dom element and give it the following attributes.

Next setup your WebRTC constraints, including which way the video will be facing. In this case, I want it facing the user.

Then fire up getUserMedia by passing the constraints and listening for a success callback. If all goes well, pass that stream as the src on your video dom element.

Finally, append the video dom element to your body.

Just for fun… here’s a snippet of code that would flip from the front and back facing camera’s on a mobile phone by clicking the video.

I think I speak for most web developers when I say thank you for the team at Apple for making this open standard a priority. Now it’s our turn to impress them with interesting creations. Good luck everyone!

Written by

I develop websites for rock 'n' roll bands and get paid in sex and drugs. Previously Silva Artist Management, SoundCloud, and Songkick. Currently: Available

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store