Uncaught (in promise) DOMException: An attempt was made to use an object that is not, or is no longer, usable

Viewed 391

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.

0 Answers
Related