Use case

We are working on an application that has the need to render video elements into the canvas when targeting the browser. Currently it is possible to render an HTML video element, but in our case that is not sufficient. Unfortunately, there is no good way currently to accomplish this with Flutter.

Video textures aren't uncommon. Most WebGL libraries such as Pixi.js support them directly, since the browser already makes it fairly easy to turn any MediaElement directly into a texture. In fact, Skia CanvasKit itself has examples of using video textures in the browser and already supports them, but the implementation is locked inside internal classes in the web platform implementation so they can't be used.

We were able to create a hack using Javascript to get directly at the internal properties like skCanvas (canvas[Object.getOwnPropertySymbols(canvas)[0]].skCanvas), bypass Flutter, and render the video into skCanvas using javascript again (window.flutterCanvasKit.MakeLazyImageFromTextureSource )to create the video texture.

Proposal

Of course, it doesn't have to be this hacky. There are two paths that could make this kind of thing trivial:

1. Allow SkCanvas / CanvasKit packages to be imported and referenced directly by casting Canvas to CkCanvas in a CustomPainter.

2. iOS and Android support the Texture widget to allow apps to integrate with external texture sources. Allowing dart code to get access to the html canvas context and a basic texture registry implementation that parallels what is available on iOS and Android would allow applications to do whatever they need, as long as they can get it into a webGL texture and register it.

Either or both of these things being supported would be great and bring the web renderer more in line with the capabilities of the mobile / desktop renderers.