Javascript Tutorial to Capture Selfie From Webcam and Download it as PNG File in Browser Using WebRTC API Full Project For Beginners

 

 

Welcome folks today in this blog post we will be capturing selfie from webcam and download it as png file in browser using webrtc api. 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

 

 

 

<div id="container">
  <h1>Save the camera's picture to a file</h1>
  <video id="player" autoplay></video>
  <button id="capture-button" title="Take a picture"></button>
</div>
<canvas id="output"></canvas>

 

 

 

And now make a style.css file and copy paste the following code

 

 

style.css

 

 

@import url('https://fonts.googleapis.com/css?family=Sarala');
 body {
     width: 100vw;
     height: 100vh;
     background-color: #282c34;
     display: flex;
     align-items: center;
     justify-content: center;
}
 h1 {
     color: #fff;
     font-family: Sarala, Arial, sans-serif;
     font-size: 22px;
     text-transform: uppercase;
     text-align: center;
     margin-bottom: 30px;
}
 #container {
     max-width: 80vw;
     max-height: 80vh;
     position: relative;
}
 #player {
     width: 100%;
     border: 2px solid #111;
     box-shadow: 0 0 50px #111;
}
 #capture-button {
     display: block;
     position: absolute;
     width: 50px;
     height: 50px;
     bottom: 20px;
     left: 50%;
     margin-left: -25px;
     border-radius: 50%;
     background-color: #f00;
     border: 2px solid #fff;
     cursor: pointer;
     transition: all 0.15s ease-in-out;
     opacity: 0.5;
     outline: none;
}
 #capture-button:hover {
     transform: scale(1.1);
}
 #capture-button:active {
     background-color: #0f0;
}
 #output {
     display: none;
}

 

See also  Node.js Tutorial to Convert Markdown to React Component Using markdown-react-js Library in Javascript Full Project For Beginners

 

 

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

 

 

script.js

 

 

const player = document.getElementById('player');
const captureButton = document.getElementById('capture-button');
const outputCanvas = document.getElementById('output');
const context = outputCanvas.getContext('2d');

navigator.mediaDevices
  .getUserMedia({ video: true })
  .then((stream) => {
    player.srcObject = stream;
  }).catch(error => {
    console.error('Can not get an access to a camera...', error);
  });

captureButton.addEventListener('click', () => {
  // Get the real size of the picture
  const imageWidth = player.offsetWidth;
  const imageHeight = player.offsetHeight;
  
  // Make our hidden canvas the same size
  outputCanvas.width = imageWidth;
  outputCanvas.height = imageHeight;
  
  // Draw captured image to the hidden canvas
  context.drawImage(player, 0, 0, imageWidth, imageHeight);
  
  // A bit of magic to save the image to a file
  const downloadLink = document.createElement('a');
  downloadLink.setAttribute('download', `capture-${new Date().getTime()}.png`);
  outputCanvas.toBlob((blob) => {
    downloadLink.setAttribute('href', URL.createObjectURL(blob));
    downloadLink.click();
  });
});

Leave a Reply