Webcam Video

by Pranab Dey

HTML

<canvas class="canvas"></canvas>
  <video class="player"></video>
	<button class="flip-front">Flip Camera</button>

CSS

.player{
  border:1px solid red;
  width: 300px;
  height: 200px;
  background: red;
  transform: rotateY(180deg);
}
.canvas{
  border: 1px solid red;
  transform: rotateY(180deg);
}
.back{
  transform: rotatey(0deg);
}
.flip-front{
  display: none;
}
@media screen and (max-width: 768px){
  .flip-front{
    display: block;
  }
}

JavaScript

var video = document.querySelector(".player");
var canvas = document.querySelector(".canvas");
var ctx = canvas.getContext('2d');
var el = true;
var flipFront = document.querySelector(".flip-front");
/* var flipBack = document.querySelector(".flip-back"); */

flipFront.onclick = function(){
	el=!el;
  stop();
  getVideo(el);
}

function getVideo(el){
  navigator.mediaDevices.getUserMedia({
    video: {
			/* facingMode: {
			        exact: el?'user':'environment'
			      } */
            facingMode: el?'user':'environment'
		},
    audio: false
  }).then(d=>{
  	(el===false)?video.classList.add("back"):video.classList.remove("back");
    video.srcObject = d;
    video.play();
  })
  .catch(err=>{
  	var msg = 'Either your video cam is missing OR not working properly. Please check.';
  	(err.name==='NotFoundError')?alert('Error name: '+err.name+'\nError msg: '+msg):alert('Error name: '+err.name+'\nError msg: '+err.message);
  });
}

getVideo(el);
setInterval(function(){
  ctx.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
},16);

var stop = () => video.srcObject && video.srcObject.getTracks().map(t => t.stop());