I'm using seekToNextFrame which is an experimental mozilla thing: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seekToNextFrame
I'm using this to go over all the frames, sometimes, near the last frames of the video I get an error:
Uncaught (in promise) DOMException: An attempt was made to use an object that is not, or is no longer, usable
const video_src = "600_frames_in_120fps.mp4";
let canvas,
ctx,
video;
async function process_frame(e) {
const video = e.target;
const bitmap = await createImageBitmap(video);
ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
if (!video.ended) {
video.seekToNextFrame();
}
}
async function init() {
if (!HTMLMediaElement.prototype.seekToNextFrame) {
// TODO display error in body
console.log(
`[ERROR] HTMLMediaElement seekToNextFrame not supported;
are you using firefox?`);
return;
}
canvas = document.createElement('canvas');
document.body.append(canvas);
ctx = canvas.getContext("2d");
video = document.createElement('video');
video.src = video_src;
video.volume = 0; // required for play() to work
document.body.append(video);
video.addEventListener("seeked", process_frame);
await video.play();
video.currentTime = 0; // trigger seeked
}
init();
console.log did not gave any undefined.
For me it smells like a bug similar to:
InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
But I could be wrong.