And Expanding the Web’s reach as a Camera and Microphone Platform

I’ve been following WebRTC’s evolution on iOS ever since Apple brought support to Safari in the summer of 2017. I use WebRTC in my web work to gain access to the user’s camera or microphone and integrate those media streams into unique marketing campaigns. While that 2017 moment was huge for the open framework, there were still gaps in accessibility on iOS. These issues mainly had to do with the browsers within popular social apps such as Twitter, Facebook, and Instagram. The problem also existed in non-Safari browser apps such as Chrome. 😥

As I discussed in a Behemoth case study, pretty much all social apps keep web browsing within their application by way of a browser layer provided by iOS. (Why send you away when they can keep serving your ads 🙃) I don’t do much iOS development but it is clear there are two primary ways to bring up a browser window within a native application: SFSafariViewController and WKWebView. In 2017, neither of these options supported the framework so all of the key social apps (and non-Safari browsers) could not run WebRTC powered applications.

Last year, iOS 13 ushered in the arrival of WebRTC to the SFSafariViewController so all of a sudden Twitter’s in-app browser was able to run these types of apps. I was pumped and commented then that we were just waiting for the WKWebView domino to fall. 🤞🏻 Well, the time has come. In iOS 14.3, WKWebView now supports WebRTC and with the exception of those users who haven’t upgraded to 14.3, you should be able to use it confidently. Thanks to all the developers working on iOS that made this happen.

I thought I would use this moment to highlight a couple of WebRTC projects from the past to help inspire future hacking on the framework. There were so many to choose from but here are a few of my favorites and their corresponding case studies.

Inspiration

Behemoth

For Behemoth, we used WebRTC to gain access to the microphone and had fans recite a satanic prayer in order to stream a song. We used IBM Watson to make sure they were saying the correct words.

David Bowie

For David Bowie, we used WebRTC to gain access to the user’s camera and had them take a photo of the moon in order to unlock a new video of “Space Oddity.” We used the Google Vision API to make sure the moon was present in the captured photo.

A Quiet Place

For A Quiet Place, we used WebRTC to gain access to the microphone and detect how safe your current location is. We did this by using Web Audio to calculate the average loudness of your location and requiring you to stay quiet for 30 seconds.

Where to Get Started with WebRTC

CodePen Tutorial

When WebRTC came to iOS home screen apps (another milestone,) I actually wrote a tutorial on creating a simple camera on CodePen.IO. This tutorial takes you through the bare minimum of what I think is a solid camera application and comes with a CodePen you can fork.