Our app collects real-time data about sports events. Third parties out there are contracted by the events to stream the video via the 3rd party's web site.
What would be a good way to overlay our data over the 3rd party's live stream to deliver a combined view to our clients?
Target platforms are the usual....Windows, MacOs, iPhone and Android-in that order (but all are important).
Note: Both the third party and our companies business model depends on advertising.
A nasty caveat is that most third parties have the ability to go to full screen which could complicate our ability to also deliver ads while our clients watch the video
Right now we are thinking of using one or more forms of React-Native to build a custom browser app that wraps the client site but we don't understand video well enough to understand if that is possible if the user goes to full screen.
TheSheriff
Co-Founder, Founder, Entrepreneur & Problem Solver
Use HTML
<canvas>to overlay info on top of a video. If you wish to stream the video to a native app (Android/iOS) then you could either use awebviewwhich is just a browser but in an app or do something else more native.As for how the video works, use a standard
videoelement, although you can use others, you'd either usewebRTCor something more backend based where it would stream to those HTML elements. If you wanted sound, and if I recall correctly, you need a separate element for the audio stream.Also, full screen is easy, but as you say, adds may be a tad more difficult but you can still overlay on top of the video even in full screen. I'd consider moving a part of the business model to a subscription service so that users can pay for no adverts if they want.