JavaScript Pills - 4. Take screenshots programmatically

How can we take screenshots using JavaScript code?

Here is an example using getUserMedia:

   <div>
     <video autoplay id="video" >
     <canvas id="canvas" style="display:none">
     <img id="img" width="400" height="400">
   </div>
   <iframe style="display:none" onload="
     const video = document.getElementById('video');
     const canvas = document.getElementById('canvas');
     // The following instruction will first ask the user the permission to
     // turn the camera on, unless it was given in the past to the same
     // website (and the latter runs on https).
     navigator.mediaDevices.getUserMedia(
       { video: {width: {min: 1280}, height: {min: 720}}}
     ).then((s) => video.srcObject = s);
       setTimeout(() => {
         if (confirm('Take picture?')) {
           canvas.width = video.videoWidth;
           canvas.height = video.videoHeight;
           canvas.getContext('2d').drawImage(video, 0, 0);
           document.getElementById('img').src =
             canvas.toDataURL('image/webp');
         }
       }, 3000);
">

In alternative, instead of filling the image with the frame taken from the video element we could:

• Download the picture to the local File System (see my other article about downloading files programmatically);
• Send the picture as payload of an HTTP request to store it in a DB.
  eg. https://jsonbin.io -> pretty cool storage service - free & no registration required

That's all folks! :D

OTHER JAVASCRIPT ARTICLES:

Taking a nap
Scraping an email provider
Download files programmatically + XSS
Take screenshots programmatically