How to Integrate Webcam using JavaScript

April 3, 2021

Rahul

Hello, guys In this tutorial we will try to solve the below mention query. and also we will share a simple JavaScript code snippet through which you can easily integrate your webcam into a web page.

Common Query

How to access webcam in html5 using JavaScript
How to access webcam using JavaScript
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.

<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

<!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 https-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.

* {
  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 Output: Watch Now

Leave a Comment Cancel reply