Вот несколько способов сделать снимок экрана видео с помощью JavaScript:

1. Canvas API: вы можете создать элемент холста, нарисовать видеокадр на холсте, а затем использовать метод toDataURL, чтобы получить снимок экрана в качестве URL-адреса данных.

const video = document.querySelector('video');
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
const screenshot = canvas.toDataURL();

2. HTML5 Canvas и MediaStream: если вы захватываете видео с веб-камеры пользователя, вы можете использовать метод captureStreamдля создания MediaStream из видеоэлемента. Затем вы можете использовать метод getImageDataдля извлечения данных пикселей из видеокадра и создания изображения.

const video = document.querySelector('video');
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const screenshot = new ImageData(imageData.width, imageData.height);
screenshot.data.set(imageData.data);
context.putImageData(screenshot, 0, 0);
const screenshotURL = canvas.toDataURL();

3. Использование элемента видео со свойством currentTime. Вы можете создать элемент видео, установить атрибут srcдля видеофайла и использовать currentTimeсвойство для поиска нужного кадра. Затем вы можете захватить кадр, нарисовав видео на холсте.

const video = document.createElement('video');
video.src = 'path/to/video.mp4';
video.addEventListener('loadeddata', () => {
  video.currentTime = desiredTimeInSeconds;
  const canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
  const screenshot = canvas.toDataURL();
});