DEV Community 👩‍💻👨‍💻

Cover image for How to Integrate Webcam using JavaScript
Stackfindover
Stackfindover

Posted on • Updated on

How to Integrate Webcam using JavaScript

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:

My best Tutorial

ZOOM Image Like Map Style

Custom QR Code Generator

How to make website like CodePen

Oldest comments (2)

Collapse
 
cristoferk profile image
CristoferK

cool!

Collapse
 
agrafikr profile image
agrafikr • Edited on

index mising jquery:
"Uncaught ReferenceError: $ is not defined"
or wrote:
start(); // $(function () { start(); });

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs