JSFiddle - React, Tailwind, and code Playground

by Pranab Dey

HTML

<!-- <video class="video"></video>
  <button class="front" onclick="stop();getVideo('user')">Front</button>
  <button class="front" onclick="stop();getVideo('environment')">Back</button> -->

<button onclick="stop();gum('user')">Front</button>
<button onclick="stop();gum('environment')">Back</button>
<div id="div"></div><br>
<video id="video" height="320" autoplay></video>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

CSS

#video{
  width: 300px;
  height: 200px;
  border: 1px solid red;
}

JavaScript

// var player = document.querySelector(".video");

// function getVideo(mode){
//   console.log(mode);
//   navigator.mediaDevices.getUserMedia({
//     video: {
//       facingMode: {
//         exact: mode
//       }
//     },
//     audio: false
//   }).then(mediaStream=>{
//     player.srcObject = mediaStream;
//     // player.play();
//   }).catch(err=>`Error name is ${err.name}
// and Error msg is: ${err.message}`)
// }

// getVideo('user');

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


var gum = mode => 
  navigator.mediaDevices.getUserMedia({video: {facingMode: {exact: mode}}})
  .then(stream => (video.srcObject = stream))
  .catch(e => log(e));

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