DEV Community

loading...
Cover image for How to Integrate Webcam using JavaScript

How to Integrate Webcam using JavaScript

stackfindover profile image Stackfindover ・2 min read

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

  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.

<video id="video" width="100%" height="100%" autoplay></video>
Enter fullscreen mode Exit fullscreen mode

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 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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Integrate Webcam Video Output:

Integrate Webcam Codepen Output:

We will update soon:)

My best Tutorial

ZOOM Image Like Map Style

Custom QR Code Generator

How to make website like CodePen

Discussion (0)

pic
Editor guide