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

  • 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>

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">

<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="">
<link href="" rel="stylesheet">

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

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

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

for (var i = 0; i < tracks.length; i++) {
var track = tracks[i];
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(); });


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:

Hii i'm Rahul Jangir, a tech geek, designing enthusiast and an online expert could be a graduate in technology who is addicted to front-end development.