index.html

<!DOCTYPE html> 
<html lang="en">
<head>
    <title>HTML5 Webcam Demo - Opera 12 alpha</title> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=yes">
    <style type="text/css">
      video { 
         position:absolute;
         left:100px;
         top:100px;         
         border-radius:20px;
         box-shadow: 10px 10px 10px rgba(68,68,68,0.6);
      }
   </style>
   <script>
    window.onload = function() {
      var video = document.getElementById('sourcevid');
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
      if (navigator.getUserMedia) {
          navigator.getUserMedia('video', successCallback, errorCallback);
          function successCallback(stream) {
	      if(window.webkitURL){
		   video.src = window.webkitURL.createObjectURL(stream);
		   console.log('video stream for Chrome success!');
	      }else{
		   video.src = stream;
		   console.log('video stream for Opera12 success!');
	      }	
          }
          function errorCallback(error) {
              console.error('An error occurred: [CODE ' + error.code + ']');
              return;
          }
      }
      else {
        alert('No support for getUserMedia in your browser')
      }
   }
  </script>
</head>
<body>   
  <video id="sourcevid" autoplay="true">NO SUPPORT FOR VIDEO </video>
</body>
</html>
 