How to update WebRTC for iOS11 Safari

Yesterday at WWDC, Apple announced support for WebRTC in iOS11 Safari. A welcome feature for many web developers who have long sought for this API to be used across all platforms. Along with this announcement comes the getUserMedia API to iOS. You can finally access the camera in browser on iOS!

What do you need in order to update your current Android or desktop apps in order for this to work? A couple minor changes.

1. Navigator.getUserMedia has changed into a promise API.

Old

navigator.getUserMedia(constraints, function success(MediaStream){}, function fail() {})

New

navigator.mediaDevices.getUserMedia(constraints).then(function(MediaStream){}).catch(function(err){})
2. Update how video src media stream is assigned to video.

Old

video.src = window.URL.createObjectURL(MediaStream)

New

video.srcObject = MediaStream
3. Add attributes to HTML video object

Old

<video autoplay>

New

<video autoplay playsinline>

That’s it! Now your getUserMedia implementation should work as it did before across Android, Chrome and now Safari.

WebRTC

Ping me on Twitter with any questions.

Thanks for reading.

=.+.+.=

30 May 2017