JSFiddle - React, Tailwind, and code Playground

by emanuelbsilva

HTML

<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<div class="video-container"></div>
<button class="snapshot">PIC</button>

CSS

.camera {
  width: 100%;
  height: 100%;
}

.video-container {
  width: 200px;
  height: 200px;
}

JavaScript

function hasUserMedia() {
  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

function loadCamera($container) {

  if (hasUserMedia()) {
    navigator.getUserMedia = navigator.getUserMedia ||
      navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
      navigator.msGetUserMedia;
    navigator.getUserMedia({
      video: true,
      audio: true
    }, function(stream) {
      var $el = $('<div><video class="camera" style="width: 100%, height: 100%;"></video></div>');
      $container.html($el);
      console.log($el);
      console.log(stream);
      var video = $el.find('video')[0];

      video.srcObject = stream;
      video.play();

    }, function(err) {});
  } else {
    alert("Sorry, your browser does not support getUserMedia.");
  }

}


function setLocalField(name, value){
	dot.pageModel.getSessionContainer().then(function(sc){
  	let id = sc.getFields().findWhere({name}).id;
    sc.set(id, value);
  });
}

function takeScreenshot() {
  var video = $('video.camera')[0];
  const canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0);
  setLocalField('picture', canvas.toDataURL('image/webp'));
}


loadCamera($('.video-container'), $('button.snapshot'));