Browser webpage JavaScript implements video screenshots and downloads, base64 image downloads, video tags, hls.js, flv.js and webrtc and other methods to capture and download videos.

Preface

Base64 downloading has been implemented in the previous chapter: the browser webpage JavaScript implements Base64 conversion to images and downloads .
In the past, screenshots were generally taken in the background, and the front-end could directly obtain ready-made images. Modern browser web pages can do more and more things, so you can directly take screenshots of videos on the web page. This chapter will explain how to achieve this. Screenshot of JavaScript webpage video and download the principle and code implementation.

Web page screenshot implementation principle

1. Create a canvas drawing board
2. Draw the current playback picture of the video tag to the canvas drawing board
3. Use the canvas characteristics to convert the current canvas drawing board picture into a base64 image
4. Create an a tag
5. Use the characteristics of the a tag to assign the base64 image to A tag enables downloading screenshots
6. Delete a tag

Function code implementation

The implementation is divided into two parts, one is the video screenshot, and the second part is the image download.

Screenshot implementation

var canvas = document.createElement('canvas')