# 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.
### What is a WebCam
A [webcam](https://en.wikipedia.org/wiki/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.
### What is Javascript
JavaScript is a scripting or programming language that allows you to add advanced functionality to your web pages.
#### To begin, we should first set up our project.
Please type the command below to launch Visual Studio Code from the terminal.
Then execute:
```bash
code.
```
> **Note**: If you don't have Visual Studio Code installed, you won't be able to use `code .`
#### Step 1 - Create a directory
Create a directory and initialize `npm` by typing the following command:
- Windows power shell
```bash
mkdir jwebcam-with-javascript-demo
cd webcam-with-javascript-demo
npm init -y
```
- Linux
```bash
mkdir webcam-with-javascript-demo
cd webcam-with-javascript-demo
```
#### Step 2 - Create files
Using the commands below, we'll create the `script.js` and `index.html` files.
```bash
touch index.html script.js
```
### Step 3 - Setting up Index.html
We will setup a simple html base template as show below:
```html
How to Integrate Real-time Webcam on a Web Page Using Javascript
How to Integrate Real-time Webcam on a Web Page Using Javascript
```
### Step 4 - Referencing Script.js, Jquery, Bootstrap JS, and CSS CDN
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:
```HTML
// ...
// ...
```
Adding bootstrap js CDN and JQuery
```HTML
// ...
// ...
```
### Step 5 - Integrating Webcam on the Web Page With Javascript
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:
```Javascript
// Start Cam function
const startCam = () => {
//Initialize video
const video = document.getElementById("video");
// validate video element
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices
.getUserMedia({ video: true })
.then((stream) => {
video.srcObject = stream;
})
.catch(function(error) {
console.log("Something went wrong!");
});
}
};
```
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:
```Javascript
// ...
$(() => {
startCam();
});
```
### Step 6 - Adding OnClick Functionality
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:
```html