Recording video with dynamic overlay

I’m creating an app that requires recording a video with an overlay (the overlay should really be inside the video file, not placed above it in the DOM). The overlay is very dynamic, for example showing the current GPS speed, time, etc and updating every 100ms.

I’m currently using GetUserMedia, which is loaded into a video element, which has its frames drawn into a canvas every x milliseconds. The overlay is also drawn in the canvas on each frame update. I then record the whole canvas.

This methods works reliably, but has three major problems:

  • It lags (1080p is terrible, 720p is watchable but still not perfect)
  • Video quality is poor for some reason (not related to resolution).
  • Audio is echoey and has some weird noises

My question is, how would you go about doing this? Any reliable way other than GetUserMedia?

Thank you in advance, have a great day/night!