How to Integrate Webcam using JavaScript
Tags: html, css, javascript, tutorial
Published: 2021-04-03 15:49:59

***Hello, guys In this tutorial we will try to solve the below mention query. and also we will share a simple <a href="https://blog.stackfindover.com/what-is-javascript/">JavaScript</a> code snippet through which you can easily integrate your webcam into a web page.***

###Common Query###
1. How to access webcam in html5 using JavaScript
2. How to access webcam using JavaScript
3. How to Integrate Webcam using JavaScript

First, we need to create an HTML DOM structure using the following code snippet. To integrate webcam into webpage we will use HTML `<video>` tag.

```html
<video id="video" width="100%" height="100%" autoplay></video>
```

####Integrate Webcam using JavaScript step by step####
First, we need to create two files **index.html** and **style.css** then we need to do code for it.

###Integrate Webcam Step:1###
**Add below code inside index.html**
```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>How to Integrate Webcam using JavaScript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
</head>

<body>
    <div class="webcam">
        <div class="video-outer">
            <video id="video" height="100%" width="100%" autoplay></video>
        </div>

        <div class="webcam-start-stop">
            <a href="#!" class="btn-start" onclick="start()">Start</a>
            <a href="#!" class="btn-stop" onclick="StopWebCam()">Stop</a>
        </div>
    </div>


    <script>
        var StopWebCam = function () {
            var stream = video.srcObject;
            var tracks = stream.getTracks();

            for (var i = 0; i < tracks.length; i++) {
                var track = tracks[i];
                track.stop();
            }
            video.srcObject = null;
        }

        var start = function () {
            var video = document.getElementById("video"),
                vendorURL = window.URL || window.webkitURL;

            if (navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia({ video: true })
                    .then(function (stream) {
                        video.srcObject = stream;
                    }).catch(function (error) {
                        console.log("Something went wrong");
                    });
            }
        }
        $(function () { start(); });
    </script>
</body>

</html>
```
###Integrate Webcam Step:2###
Then we need to add code for **style.css** which code I provide in the below screen.

```css
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Oswald', sans-serif;
}
body {
  height: 100vh;
  width: 100vw;
  background: #f2f4f6;
  overflow: hidden;
}
.webcam-start-stop {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 5px 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.webcam-start-stop > a {
  text-decoration: unset;
  color: #000;
  background: #fff;
  padding: 10px 20px;
}
```
###Integrate Webcam Video Output:###
{% youtube 2ZI3CIIEneo %}

###Integrate Webcam Codepen Output:###
{% codepen https://codepen.io/stack-findover/pen/PoWLjKg %}

###My best Tutorial###
> <a href="https://blog.stackfindover.com/zoom-image-point-with-mouse-wheel/">ZOOM Image Like Map Style</a>

> <a href="https://blog.stackfindover.com/how-to-generate-qr-code-using-javascript/">Custom QR Code Generator</a>

> <a href="https://blog.stackfindover.com/how-to-make-a-website-like-codepen/">How to make website like CodePen</a>