Access WebCam using JavaScript [Updated]

In this post, we are going to learn to access WebCam using Javascript. We will use getUserMedia to access WebCam and show the video in our webpage.

Full Source Code to Access WebCam using JavaScript

<center style="margin-top:4%;">
 <h1 style="margin-bottom:10px;">Access WebCam using JavaScript</h1>
 <video id="video" autoplay>Not supported in your browser</video>
</center>
<script>
 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
 if(navigator.getUserMedia){
  navigator.getUserMedia({video:true},handleVideo,videoError);
 }
 function handleVideo(stream){
  document.querySelector('#video').srcObject = stream;
 }
 function videoError(e){
  alert('Something is wrong');
 }
</script>

 

Refer This Video for Complete Guidance

Recommended For You

About the Author: Ritesh Ghimire

Ritesh is a Computer Engineer, Web Developer and an active cricket follower.