ui.video with changing sources (extra: overlay feature)

[WolfgangFahl]

I'd like to add support for a video that is synchronized with the track and map display in http://nicetrack.bitplan.com see #66 #907.
I have implemented a VideoStream class to make sure that the range header is respected see https://github.com/WolfgangFahl/nicetrack/blob/main/nicetrack/video_stream.py but this might be redundant to the implementation mentioned in #907.

Also I'd love start with a ui.video element with no source specified when starting and changing the source depending on which example is selected. I assume video display is only sensible in local mode and the streaming should be effective. Currently the implementation simply creates a new ui.video which does not show the intended behavior yet. So basically i'd love to know:

1. How can the video view be having a different source
2. How can the streaming be done from a given starting position and initiated e.g. immediately to bring down loading time and provide a truly responsive behavior?

As an extra it would be great to have an overlay feature so that the telemetry data of my nicetrack app can be displayed right on the video. This would probably benefit quite a few other video usecases and give nicegui another boost as being a most productive gui framework.

[WolfgangFahl]

Is this also related to #1282?

[shreyesh0610]

I think Interactive Image would do the trick based on what I understood.

class StreamURL:
    def __init__(self):
        self.stream_url = ''
        self.svg_content = ''

streamURL = StreamURL()

ui.interactive_image(
    # source = streamURL.stream_url, #instead of providing here, binded below. Binding takes care of updating feed if URL changes
    events=['click', 'mousedown', 'mouseup'], 
    cross=True
).bind_source_from(streamURL, 'stream_url').bind_content(streamURL, 'svg_content')

Updating the stream_url will change source of interactive image as well since its binded.
And for overlaying your telemetry data, you can use pure <svg> or other html tags like <circle>, <line>, <polygon> to draw or render overlaying data. Hope this helps.