Stream Webcam Video with WebRTC

Catch sneaky ninjas using Javascript & HTML 5

Posted by Nate Eckerson on September 02, 2019 · 1 min read

WebRTC is an API that enables audio, video and data transfer from within your browser. The creators of WebRTC intend for it to be a standardized way for browsers to transfer data, and perform teleconferencing without installing plugins, or other software.

In this tutorial, I demonstrate how to use the API to display video from a webcam (with the intent of defending a fridge from ice-cream stealing ninjas, but I’m sure you can think of other purposes).

Check out the links below for more usage scenarios, including capturing still frames from the video, allowing users to select different camera resolutions, CSS filters and more!

Resources

Taking Still Photos with WebRTC
WebRTC getUserMedia Sample Code
Stream API Browser Support

I made this presentation in Keynote, my favorite software for creating basic text and graphic animations.