How To Use Canvas To Capture Video Screenshot And Web Page Screenshot

This example will show you how to use Html5 canvas to capture the video screenshot and an entire web page screenshot.

Table of Contents

1. How To Use Html5 Canvas To Capture Video Screenshot.

Add Html <video>, <canvas>, and <img> element on the web page.

<video id="video1" controls ></video>
<canvas id="canvas1"></canvas>
<img id="captureVideoImage" />

Get the video, canvas, and image elements in the javascript.

video = document.getElementById(videoId);
canvas = document.getElementById(canvasId);
videoImage = document.getElementById(videoImageId);

Get the canvas 2d context object.

canvasContext = canvas.getContext('2d');

Call the canvas context object’s drawImage method to draw the video current screenshot to the canvas object.
```
canvasContext.drawImage(video, 0, 0, canvas.width, canvas.height);
```

Convert the canvas content to a base64 encoded image string.
```
const imgBase64String = canvas.toDataURL("image/png");
```
Assign the above base64 image string to an Html image element to display it.
```
videoImage.src = imgBase64String;
```

2. How To Capture The Current Browser Entire Web Page Screenshot Use Html2canvas.

The html2canvas js library provides the method to capture the current web browser’s entire web page.

If you want to use it, you should first go to the html2canvas official site to download or install it.
Run the command npm install –save html2canvas or yarn add html2canvas to install it.
Or you can download the html2canvas.js or html2canvas.min.js by open & save the js file link to your local computer.

Then you need to import the html2canvas.min.js file into your Html web page source code.

<script type="text/javascript" src="../../../javascript/html2canvas.min.js" charset="utf-8"></script>

Then you can call the html2canvas(document.body).then((canvas) => { …… }) function to capture the current web page screenshot to a canvas.
```
html2canvas(document.body).then((canvas) => {
      
    ......
        
});
```
Call the canvas.toDataURL(“image/png”); method to get the canvas image string.
```
const base64imageString = canvas.toDataURL("image/png");
```

Assign the base64 encoded image string to an Html <img> element.
```
webpageImage.src = base64imageString;
```

3. How To Use Canvas To Capture Video Screenshot And Web Page Screenshot Example.

There are 3 buttons ( Play Video, Capture Video Screenshots, and Capture Web Page Screenshots Use Html2Canvas ) on this example page.
When you click the Play Video button, it will play a video below the button.

During the video playing process, when you click the Capture Video Screenshots, it will capture the playing video screenshot and display the screenshot on an image beside the video.
When you click the Capture Web Page Screenshots Use Html2Canvas button, it will capture the current entire web page screenshot and display the screenshot on an image beside the video.
The example contains 2 source files, they are html5-canvas-capture-video-webpage-screenshots.html, and html5-canvas-capture-video-webpage-screenshots.js.

html5-canvas-capture-video-webpage-screenshots.html.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>How To Use Canvas To Capture Html Web Page & Video Screenshots</title>
<script type="text/javascript" src="../../../javascript/html2canvas.min.js" charset="utf-8"></script>
<script type="text/javascript" src="html5-canvas-capture-video-webpage-screenshots.js" charset="utf-8"></script>
<style>

.block{
  display:block;
  margin-top:10px;
}

</style>
</head>
<body onload="init()">
<h3>How To Use Canvas To Capture Html Web Page & Video Screenshots.</h3>
<div>
  <div class="block">
    <input type="button" value="Play Video" onclick="playVideo()"/>
    <input type="button" value="Capture Video Screenshots" onclick="captureVideo()"/>
    <input type="button" value="Capture Web Page Screenshots Use Html2Canvas" onclick="captureWebPageUseHtml2Canvas()" />
  </div>

  <div class="block">
    <video id="video1" controls ></video>
    <canvas id="canvas1"></canvas>
    <img id="captureVideoImage" />
    <img id="captureWebpageImage" />
  </div>

</div>
</body>
</html>

html5-canvas-capture-video-webpage-screenshots.js.

const videoId = 'video1';

const videoImageId = 'captureVideoImage';

const webpageImageId = 'captureWebpageImage';

const canvasId = 'canvas1';

var video;

var videoImage;

var webpageImage;

var canvas;

var canvasContext;


function init(){

    // init the html video element.
    video = document.getElementById(videoId);
    video.style.display = 'none';

    // init the html canvas element.
    canvas = document.getElementById(canvasId);
    canvas.style.display = 'none';

    canvasContext = canvas.getContext('2d');

    // init the captured video image element.
    videoImage = document.getElementById(videoImageId);
    videoImage.style.display = 'none';

     // init the captured webpage image element.
    webpageImage = document.getElementById(webpageImageId);
    webpageImage.style.display = 'none';


}


function playVideo(){

    video.style.display = 'inline';
    
    video.src = 'http://localhost:8000/video/play_video_test.mp4';
    //video.src = 'file:///Users/songzhao/Documents/WorkSpace/dev2qa.com-example-code/PythonExampleProject/video/play_video_test.mp4';
    
    video.play();

}



function captureVideo(){
    

    var ratio = window.devicePixelRatio || 1;

    canvasContext.scale(ratio, ratio);

    var videoWidth = video.offsetWidth;

    var videoHeight = video.offsetHeight;

    canvas.width = videoWidth * ratio;

    canvas.height = videoHeight * ratio;

    canvas.style.display = 'none';

    canvasContext.drawImage(video, 0, 0, canvas.width, canvas.height)

    const imgBase64String = canvas.toDataURL("image/png");

    videoImage.style.display = 'inline';

    videoImage.width = video.clientWidth;

    videoImage.height = video.clientHeight;

    videoImage.src = imgBase64String;

}



function captureWebPageUseHtml2Canvas(){

    html2canvas(document.body).then((canvas) => {

        const base64imageString = canvas.toDataURL("image/png");
        //window.location.href = base64image;

        webpageImage.style.display = 'inline';

        //webpageImage.width = window.innerWidth - video.clientWidth;
        webpageImage.width = 1000;

        webpageImage.height = video.clientHeight;

        webpageImage.border = '1px solid #ffffff';

        console.log('web page image width : ' + webpageImage.width);

        console.log('web page image height : ' + webpageImage.height);

        webpageImage.src = base64imageString;

    });

}

4. Example Demo Video.

Below is this example demo video.

1. How To Use Html5 Canvas To Capture Video Screenshot.

2. How To Capture The Current Browser Entire Web Page Screenshot Use Html2canvas.

3. How To Use Canvas To Capture Video Screenshot And Web Page Screenshot Example.

4. Example Demo Video.

Leave a Comment Cancel Reply