How to Capture Image and Take Selfie Picture From Webcamera and Save it as PNG File in Browser Using Vanilla Javascript Full Project For Beginners

How to Capture Image and Take Selfie Picture From Webcamera and Save it as PNG File in Browser Using Vanilla Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be capturing image and take selfie picture from webcamera and save it as png file in browser using vanilla javascript. All the full source code of the application is shown below.

 

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<video id="player" controls autoplay></video>
<button id="capture">Capturar</button>
<canvas id="snapshot" width=320 height=240></canvas>

 

 

 

Now make a script.js file and copy paste the following code

 

 

script.js

 

 

var player = document.getElementById('player');
  var snapshotCanvas = document.getElementById('snapshot');
  var captureButton = document.getElementById('capture');

  var handleSuccess = function(stream) {
    // Attach the video stream to the video element and autoplay.
    player.srcObject = stream;
  };

  captureButton.addEventListener('click', function() {
    var context = snapshot.getContext('2d');
    // Draw the video frame to the canvas.
    context.drawImage(player, 0, 0, snapshotCanvas.width,
        snapshotCanvas.height);
    console.log(context.canvas.toDataURL());
  });

  navigator.mediaDevices.getUserMedia({video: true})
      .then(handleSuccess);

 

READ  Build a Domain Age Checker SEO Tool in HTML5 Javascript and PHP 7 Full Web App Tutorial 2020

 

 

And now if you open the index.html file inside the browser you will see the below screenshot

 

 

 

 

Leave a Reply