taking a snapshot of video canvas-CodePudding

React beginner, here i can take a snapshot (html2canvas) of an image when you click 'Generate Image on Canvas' it generates an image and then by clicking 'take a snapshot' it takes snapshot of that image, my question is how to do the same thing with a video ? i mean generate a video and then by cliking snapshot button, it should take a snapshot of that video like it does with normal img. Any idea ?

try it here:

CodePudding user response：

It would work in the same manner as how you would take a snapshot of an image, but in this case you would pass a HTMLVideoElement reference to the drawImage function.

const video = document.querySelector('video');
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
const button = document.querySelector('button');

const captureScreenShot = () => {
  const { videoWidth, videoHeight } = video;
  canvas.width = videoWidth;
  canvas.height = videoHeight;
  context.drawImage(video, 0, 0, videoWidth, videoHeight);
};

button.addEventListener('click', captureScreenShot);

.container {
  display: flex;
  height: 250px;
  width: 500px;
  background-color: #d0d0d0;
  border: 3px solid #d0d0d0;
  gap: 3px;
}

.container video,
.container canvas {
  width: 250px;
  height: 250px;
  background-color: #f0f0f0;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<button>Create snapshot</button>
<div >
  <video controls autoplay>
    <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4"/>
  </video>

  <canvas width="250" height="250"></canvas>
</div>

CodePudding user response：

So far I have found this https://github.com/videojs/video.js/issues/6395 you can have a look at it :) I am sure you will find the solution.