Sample Solution

In this example below you will see how to do a Sample Solution with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by agunay, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright agunay ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Sample Solution</title>
  
  
  
  
  
</head>

<body>

  <div id="root">

</div>

<!-- <script>
  var camera = document.getElementById('camera');
  var frame = document.getElementById('frame');

  camera.addEventListener('change', function(e) {
    var file = e.target.files[0]; 
    // Do something with the image file.
    frame.src = URL.createObjectURL(file);
  });
</script> -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/agunay/sample-solution-vZxZbr */
(function() {
  var root = document.getElementById('root');
  
  if (iOS()) {
    root.innerHTML += '<input type="file" accept="image/*" capture="user">';
    
    var input = document.querySelector('input[type=file]');
    
    input.onchange = function () {
      var file = input.files[0];
      upload(file);
    };
  }
  
  else {
    root.innerHTML += '<video id="player" controls autoplay></video>' +
                      '<button id="capture">Capture</button>' +
                      '<canvas id="snapshot" width=320 height=240></canvas>';
    
    var player = document.getElementById('player'); 
    var snapshotCanvas = document.getElementById('snapshot');
    var captureButton = document.getElementById('capture');
    
    captureButton.addEventListener('click', function() {
      var context = snapshot.getContext('2d');
      context.drawImage(player, 0, 0, snapshotCanvas.width, 
          snapshotCanvas.height);
    });

    navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
      player.srcObject = stream;
    }).catch(function(err) {
      console.log(err);
    });
  }
})();

function iOS() {
  var userAgent = navigator.userAgent;
  
  return /iPad|iPhone|iPod/.test(userAgent) ? true : false;
}

function upload() {
  //TODO
}

Comments