1

I have a webpage which has html elements and video tag. I want to capture a screenshot of the page using only javascript/jquery/third party plugins.

I have tried HTML2Canvas, which works for html element. It does not capture video tag.

I have tried canvas code for capturing video tag, using this code:

function drawImage() {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  var width = $('#video').outerWidth();
  var height = $('#video').outerHeight();
  canvas.width = width;  canvas.height = height;
  var elemVideo = document.getElementById('video');
  context.drawImage(elemVideo, 0, 0, width, height);
  var dataURL = canvas.toDataURL();

  var image = new Image();
  image.src = dataURL;

  $('body').append(image); 
}

This code takes a screenshot of the video.

Is it possible to take a screen capture for the whole screen without using any backend service?

Community
  • 1
  • 1
Rahul Sagore
  • 1,588
  • 2
  • 26
  • 47

1 Answers1

0

Here is something you can try.

Build a hidden rendering element (like a mirror DOM) - it's kind of like what a lot of the HTML5 gaming libraries do.

The rendering element is hidden. Duplicate the page contents into the rendering element.

Then use your code to render the video and replace the video tag with your video image in the rendering element. Then use HTLM2Canvas on that rendering element only, as HTML2Canvas allows you to screenshot just a part of a page.

tremor
  • 3,068
  • 19
  • 37