bvibber / ogv.js

JavaScript media player using Ogg/Vorbis/Theora/Opus/WebM libs compiled with Emscripten
https://brooke.vibber.net/misc/ogv.js/demo/
Other
1.2k stars 101 forks source link

Support custom frameSink implementation #611

Open scarletsky opened 2 years ago

scarletsky commented 2 years ago

OGVPlayer is using YUVCanvas to draw frame data into canvas. This works great when the canvas is appended to dom.

However when the canvas is as the use of another webgl context texture data, it will be slow. This is because the gl.texImage2D API is slow in some browser(like safari). If we support custom frameSink implementation, we can improve the performance by draw the framedata into the FBO in another webgl context !

before:

  1. framedata -> draw into ogv canvas
  2. call gl.texImage2D in another webgl with ogv canvas
  3. use the texture

after:

  1. framedata -> draw into another webgl FBO (custom frameSink)
  2. use the texture

To implement this feature is very simple:

_setupVideo() {
        // ...
-   this._frameSink = YUVCanvas.attach(this._canvas, canvasOptions);
+   this._frameSink = this._options.frameSink || YUVCanvas.attach(this._canvas, canvasOptions);
}