My goal is for my HTML/JS Windows Store app to do this: 1) render a video element that is previewing from the device/attached camera, 2) overlay DOM elements/controls; could be simple elements like DIVs with text/img or might be complex third
party controls like animated SVG based graphs, charts, gauges, etc. 3) and
here's the kicker, encode what you see to a video file.
The first two requirements are easy and look fantastic, but how do I get that great looking, real time 1080p imagery encoded to a file? I've looked at writing an MFT in C++ to overlay the video, looked at drawing frames to a canvas and encoding
to WebM, but the hang up is always the overlay because it isn't a bitmap, it's a collection of dynamic DOM elements. Surely there is a way, I know there are others trying to do this.
Finally for bonus points, how can this all be done regardless of the screen resolution of the device it's running on (e.g. device display is less than 1080p, but it would be desirable to render the video + overlay @ 1080p resolution for the sake of the
video encode, then scale it back to fit the display).
Good thing I'm not asking for much, eh? Any, and I do many ANY help or direction, would be greatly appreciated. I'm going in circles with this and only getting more and more confused as to how to approach it.