<label for="file">Upload Video</label>
<input type="file" accept=".mp4, .mkv, .mpeg4" id="file" class="video-input">
<button class="capture-btn">Capture</button>
<div class="source-vid"></div>
<div class="result"></div>
const btn = document.querySelector(".capture-btn");
const inputEl = document.querySelector(".video-input");
const vidEl = document.querySelector(".source-vid");
const resultEl = document.querySelector(".result");
inputEl.addEventListener("change", (e) => {
vidEl.innerHTML = `<video autoplay controls muted loop style="width: 100%"><source src="${URL.createObjectURL(
e.target.files[0]
)}" type="${e.target.files[0].type}"></source></video>`;
});
btn.addEventListener("click", () => {
const video = document.querySelector("video");
if (video) {
const canvas = document.createElement("canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas
.getContext("2d")
.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
const generatedImage = canvas.toDataURL("image/png");
resultEl.innerHTML = `<img src="${generatedImage}" style="width: 100%" />`;
}
});
Live demo here.