Learn more about Russian war crimes in Ukraine.

Browser webcam hello world

Just below this paragraph, you can see yourself! In this post I show how webpages can access the webcam, then stream it to a <video> element.

Here’s the code that achieves this:

<!-- First, a video element to stream the webcam to ... -->
<video id="webcam" width="400"></video>
// ... then some JavaScript to access the webcam stream 
// and attach it to the video element.
const vidEl = document.getElementById("webcam");
navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } })
  .then(stream => {
    vidEl.srcObject = stream;
    vidEl.play();
  })
  .catch((err) => console.log("error getting webcam", err));

When this page loaded, it prompted you for permission to access your webcam. This happened when the page called navigator.mediaDevices.getUserMedia(...), which returns a Promise<MediaStream>. When you respond to the permission request, the promise resolves (or rejects, if you deny permission).

The <video> element, as an HTMLMediaElement, has a srcObject property which can be any MediaStream. By assigning the webcam stream to the <video> element’s input, we display the webcam.

Finally, to start using the source, you must call .play() on the <video> element.

What can computers do? What are the limits of mathematics? And just how busy can a busy beaver be? This year, I’m writing Busy Beavers, a unique interactive book on computability theory. You and I will take a practical and modern approach to answering these questions — or at least learning why some questions are unanswerable!

It’s only $19, and you can get 50% off if you find the discount code ... Not quite. Hackers use the console!

After months of secret toil, I and Andrew Carr released Everyday Data Science, a unique interactive online course! You’ll make the perfect glass of lemonade using Thompson sampling. You’ll lose weight with differential equations. And you might just qualify for the Olympics with a bit of statistics!

It’s $29, but you can get 50% off if you find the discount code ... Not quite. Hackers use the console!

More by Jim

Tagged #programming. All content copyright James Fisher 2019. This post is not associated with my employer. Found an error? Edit this page.