Access WebCam using JavaScript [Updated]

1 min read

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