The goal is simple: I have a WebGL animation that I'd like to capture and overlay some text on the captured stream.

It is very much analogous to the WebGL Text example on WebGL Fundamentals, including how the text contents rapidly updates.

Everything looks great in browser, but I'm looking for the ability for users to be able to download their animation with the text overlay through the use of capturing the canvas's stream via the Media Streams API (MediaRecorder and MediaStream).

Unfortunately, capturing the WebGL canvas omits the HTML text overlay.

I tried placing the text within another canvas's 2d context, capturing that stream, and adding another video track, but multiple video tracks don't seem implemented by browsers.

Is there an easy fix? Or will I be forced to render text via glyph textures, as the text changes often.

On a technical level, I only every need to render text that is 10 characters in length and will consist of only digits and dashes. In case it matters, WebGL2 only is fine.