-1

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:

  • How can the video view be having a different source
  • 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.

see also https://github.com/zauberzeug/nicegui/discussions/1503

Wolfgang Fahl
  • 15,016
  • 11
  • 93
  • 186
  • If i understood correctly, you want to show a video, but the source of video can change from the frontend. Moreover, you wish to show data over the video as well, somewhat like rendering data over the video. Is the understanding correct? – Shreyesh Desai Aug 30 '23 at 06:44
  • yes - this is close to what is intended – Wolfgang Fahl Aug 30 '23 at 15:43

1 Answers1

1

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.

Shreyesh Desai
  • 569
  • 4
  • 19
  • Sounds good but doesn't seem to be compatible with the video_stream class I provided - may be there's something wrong with that class or the range_header handling in the streaming? Please not how an mp4 stream looks different then a JPEG Image stream – Wolfgang Fahl Aug 30 '23 at 16:01
  • I tried implementing this with https://github.com/WolfgangFahl/nicetrack/commit/171c4e99625e40a6f22f090e38e68daa92bf49e6 - the binding is currently commented out. Somehow nothing is display via the interactive image while the video_url itself works. – Wolfgang Fahl Aug 31 '23 at 06:10