How to Integrate Real-time Webcam on a Web Page Using Javascript

Most websites nowadays offer real-time webcam integration for profile picture upload or any other account verification step.

This tutorial will teach us how to use Vanilla JavaScript to add a webcam to a web page. So let's get this ball rolling.

A webcam is a type of video camera that sends or transfers a picture or video progressively in real time to or through a computer network such as the Internet. Webcams can be utilized during a video meeting between two people with live sound and video talks.

JavaScript is a scripting or programming language that allows you to add advanced functionality to your web pages.

Please type the command below to launch Visual Studio Code from the terminal.

Then execute:

Create a directory and initialize npm by typing the following command:

Using the commands below, we'll create the script.js and index.html files.

We will setup a simple html base template as show below:

Although we have added the necessary classes, our application does not appear to be aesthetically pleasing. Instead, let us import the bootstrap CDN and jquery as shown below:

Adding bootstrap js CDN and JQuery

To gain the user's permission to use the webcam with video track options, we'll use navigator.mediaDevices.getUserMedia. We will specify video: true to indicate that we only want to use the webcam and not the audio.

The function getUserMedia() delivers a promise that resolves when the user grants permission to view the webcam and rejects it when the user denies it. As a result, we used .then and .catch to deal with the promise.

To access and display the camera output in the video tag, let's write the function called startCam as shown below:

Before Implementing the stopCam function, let's test our startCam function. To do that, let us refer to the startCam function on page load using jquery as shown below:

Let's proceed to index.js to update our button with the text Click Here to Start Cam with onClick attribute using the snippet below:

Testing our application, we should see a request to accept turning ON our webcam on your browser. We can see how Powerful Javascript is to turn to integrate webcam in our web page.

We have seen how super easy it is to integrate a webcam in our web page using javascript, but what about turning the cam OFF? Of course, we should do that with ease, just like we did for turning the webcam ON. Let's stop the video tracks and turn off the webcam when the button stop is clicked.

Let's proceed to index.js to update our button with the text Click Here to Stop Cam with onClick attribute using the snippet below:

Congratulations! We should successfully run our application, start and stop the Web Cam, as shown below.

Kindly click here to check the complete code on GitHub.

In this tutorial, we learned about How to integrate WebCam using Javascript on a web page.

Happy coding!

I'd love to connect with you at Twitter | LinkedIn | GitHub

See you in my next blog article. Take care!!!