A Pen by Cyril F

Thumbnail
This awesome code was written by cyrilf, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright cyrilf ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Cyril F</title>
  
  
  
  
  
</head>

<body>

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Camy</title>
    <style>
      video { border: 1px solid #ccc; display: block; margin: 0 0 20px 0; }
      #canvas { margin-top: 20px; border: 1px solid #ccc; display: block; }
    </style>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/cyrilf/a-pen-by-cyril-f-WvvWGG */
window.addEventListener('DOMContentLoaded', function() {

  var videoOptions = {
    'video': true
  };

  var errCallback = function(error) {
    console.log('Video feed error: ', error.code);
  };

  // Put video listeners into place
  if(navigator.getUserMedia) { // Standard
    navigator.getUserMedia(videoOptions, function(stream) {
      userMediaCallback(stream);
    }, errCallback);
  } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
    navigator.webkitGetUserMedia(videoOptions, function(stream){
      stream = window.webkitURL.createObjectURL(stream);
      userMediaCallback(stream);
    }, errCallback);
  } else if(navigator.mozGetUserMedia) { // WebKit-prefixed
    navigator.mozGetUserMedia(videoOptions, function(stream){
      stream = window.URL.createObjectURL(stream);
      userMediaCallback(stream);
    }, errCallback);
  }

  function userMediaCallback(videoSrc) {
    var video = document.createElement('video');
    video.id = 'webcam-feed';
    video.width = 640;
    video.height = 480;
    video.setAttribute('autoplay', 'autoplay');
    document.body.appendChild(video);

    var snapButton = document.createElement('input');
    snapButton.id = 'snap';
    snapButton.type = 'button';
    snapButton.value = 'Take picture';
    snapButton.onclick = snapButtonClicked;
    document.body.appendChild(snapButton);

    var saveButton = document.createElement('input');
    saveButton.id = 'save';
    saveButton.type = 'button';
    saveButton.value = 'Save';
    saveButton.onclick = saveButtonClicked;
    document.body.appendChild(saveButton);

    var canvas = document.createElement('canvas');
    canvas.id = 'picture-snap';
    canvas.width = 640;
    canvas.height = 480;
    document.body.appendChild(canvas);

    var context = canvas.getContext('2d');

    video.src = videoSrc;
    video.play();

    function snapButtonClicked() {
      context.drawImage(video, 0, 0, 640, 480);
    }

    function saveButtonClicked() {
      convertCanvasToImage(canvas, function imageSaved(image) {
        document.body.appendChild(image);
      });
    }

    function convertCanvasToImage(canvas, callback) {
      var image = new Image();
      image.onload = function() {
        callback(image);
      };
      image.src = canvas.toDataURL('image/png');
    }
  }
}, false);

Comments