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;;
  .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.

Tagged #programming.

Similar posts

More by Jim

Want to build a fantastic product using LLMs? I work at Granola where we're building the future IDE for knowledge work. Come and work with us! Read more or get in touch!

This page copyright James Fisher 2019. Content is not associated with my employer. Found an error? Edit this page.