Рендеринг первого кадра видео через текстуру WebGL на Canvas после загрузки - PullRequest
Новая
       69

Рендеринг первого кадра видео через текстуру WebGL на Canvas после загрузки

0 голосов
/ 12 марта 2020

Я рендерил текстуру видео на холст, используя WebGL. Первый кадр должен отображаться после загрузки видео. Видео не обязательно воспроизводится (просто показывает первый кадр) и не находится в дереве DOM.

video.preload по умолчанию оставлено (это, вероятно, должно быть установлено на auto?)

Мой первый подход приводит к чему-то вроде этого (оставив все, что связано с WebGL, так как я думаю, что это здесь не актуально, но в целом выглядит примерно так, как в этом руководстве: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL): 

video.addEventListener('loadeddata', () => {
    requestAnimationFrame(() => renderToCanvas());
});

, но кажется, что данные видеоизображения не загружены и WebGL по крайней мере Firefox и Chrome (Desktop и Android) приводит к следующим предупреждениям, а не к отображаемой текстуре:

Chrome: 

WebGL: INVALID_VALUE: tex(Sub)Image2D: video visible size is empty

[.WebGL-0x3c74af309800]RENDER WARNING: texture bound to texture unit 0 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)?

Firefox: 

Error: WebGL warning: drawArraysInstanced: TEXTURE_2D at unit 0 is incomplete: The dimensions of `level_base` are not all positive.

Замена 'loadeddata' на 'canplay' приводит к той же ошибке.

Мой нынешний довольно хакерский обходной путь, который приводит к желаемому результату без предупреждений, следующий: 

video.addEventListener('loadeddata', () => {
    if (video.currentTime === 0)
        video.currentTime = 0;
}

video.addEventListener('seeked', () => {
    requestAnimationFrame(() => renderToCanvas());
});

Есть ли лучший способ? Я пропустил событие, которое предназначено именно для этой цели?

...