Oh-video-card restream frigate not work

DrScr3w · December 1, 2023, 7:22am

Platform information:
- Hardware: VM under proxmox (4 Cores / 6GB RAM)
- OS: Debian 12
- OH: 4.0.4 Branch: Latest
- Java Runtime Environment: openJDK 17.0.9

Problem:
The problem is that the Birdeye stream from frigate is not displayed in the MainUI. It loads and loads and at some point the message is displayed. “The media could not be loaded, either because the server or network failed or because the format is not supported.” I had already tried the other formats in the frigsteServer Thing. Since the stream works with the direct URL call from frigate, I suspect that it is due to ffmpeg or the oh vm.

Information:

The frigateServer Thing receives the URL for the Birdeye view and the URL is also accessible in the browser and the stream is also displayed when the URL is called up.

UID: mqtt:frigateServer:mqttbroker:FrigateBridge
label: Frigate Bridge
thingTypeUID: mqtt:frigateServer
configuration:
  ffDASHPackageCommands: -seg_duration 1 -streaming 1
  serverClientID: ""
  ffDASHTranscodeCommands: -acodec copy -vcodec copy
  enableAPIForwarder: true
  ffMJPEGTranscodeCommands: -q:v 5 -r 2 -vf scale=640:-2 -update 1
  ffHLSStartProducerOnLoad: true
  ffmpegLocation: /usr/bin/ffmpeg
  enableStream: true
  ffTempDir: ""
  streamWhitelist: DISABLE
  ffMJPEGStartProducerOnLoad: false
  ffHLSTranscodeCommands: -acodec copy -vcodec copy
  ffMinFramesToStart: 10
  serverURL: http://nvr:5000/
  ffDASHStartProducerOnLoad: false
  ffKeepalivesBeforeExit: 2
  serverKeepAlive: 5
bridgeUID: mqtt:broker:mqttbroker

ffmpeg is installed on the OH VM.

I must have followed all the steps in the instructions.

* For the 'birdseye' view:
  * Ensure this is turned on in Frigate by having 'restream: true' in the 'birdseye' section of the Frigate config.
  * On the server 'thing', ensure 'enableStream' is on and that the ffmpeg binary path is correct in 'ffmpegLocation'.
  * If the stream is available, the channel 'fgBirdseyeURL' should contain a URL to point a UI widget at to display the Frigate birdseye view.
  * The birdseye view is quite a good mechanism to look at all cameras in openHAB while minimizing CPU and network load.

And the widget is integrated with the code

component: oh-video-card
config:
  url: =items.Frigate_Bridge_Birdseye_stream_URL.state+".m3u8"

DrScr3w · December 5, 2023, 6:57am

no one has any ideas? maybe @jgow ?

jgow · December 21, 2023, 4:52pm

If you can see the rtsp stream directly from vfrigate, then the two places where there may be an issue are firstly with ffmpeg (do you have a recent version?), and then possibly the viewer and/or its interaction with the http server. I see this problem sometimes when viewing with some web browsers; it is currently working here on Firefox.

I note you are trying to access the HLS stream - have you tried the mjpeg or DASH streams?

If you still have issues, could you please post the portion of your log file from when the binding is started? Look for entries containing ‘ffmpeg’ As you have ffHLSStartProducerOnLoad set true, the ffmpeg process should be started when the binding is taken online. You should thus see running ffmpeg processes - if these are running check the ffmpeg output directory for the stream content. If the stream content is present, this largely would rule out ffmpeg as the source of the issue.

DrScr3w · December 21, 2023, 7:11pm

I don’t think it’s a problem with Frigate or ffmpeg on the OH instance. It is a frontend problem, i.e. a problem with the video widget.

I can open all streams from Frigate, I can also open the restream URL that OH Frigate Binding generates.
http://oh:8080/frigateSVR/mqtt:frigateServer:mqttbroker:FrigateBridge/birdseye

And then I can also see in the OH log that the stream is started via OH.

2023-12-21 12:37:00.869 [INFO ] [ernal.servlet.streams.StreamTypeBase] - waiting 1000ms for stream to appear
2023-12-21 12:37:01.869 [INFO ] [ernal.servlet.streams.StreamTypeBase] - waiting for ffmpeg; frame count 1 fps 0.0
2023-12-21 12:37:01.870 [INFO ] [ernal.servlet.streams.StreamTypeBase] - waiting 1000ms for stream to appear
2023-12-21 12:37:02.870 [INFO ] [ernal.servlet.streams.StreamTypeBase] - waiting for ffmpeg; frame count 8 fps 7.1
2023-12-21 12:37:02.870 [INFO ] [ernal.servlet.streams.StreamTypeBase] - waiting 1000ms for stream to appear
2023-12-21 12:37:03.870 [INFO ] [ernal.servlet.streams.StreamTypeBase] - waiting for ffmpeg; frame count 9 fps 4.0
2023-12-21 12:37:03.871 [INFO ] [ernal.servlet.streams.StreamTypeBase] - waiting 1000ms for stream to appear
2023-12-21 12:37:04.871 [INFO ] [ernal.servlet.streams.StreamTypeBase] - ffmpeg stream confirmed started; frame count 10 fps 3.0
2023-12-21 12:37:04.871 [INFO ] [ernal.servlet.streams.StreamTypeBase] - stream is running (MJPEGStream)
2023-12-21 12:37:04.871 [INFO ] [ernal.servlet.streams.StreamTypeBase] - hitcount = 2, stream continuing
2023-12-21 12:37:14.881 [INFO ] [ernal.servlet.streams.StreamTypeBase] - stream is running (MJPEGStream)
2023-12-21 12:37:14.883 [INFO ] [ernal.servlet.streams.StreamTypeBase] - hitcount = 7, stream continuing

DrScr3w · December 21, 2023, 7:14pm

I have currently entered the following in the page

component: oh-grid-row
config: {}
slots:
  default:
    - component: oh-grid-col
      config: {}
      slots:
        default:
          - component: oh-video-card
            config:
              item: Frigate_Bridge_Birdseye_stream_URL

matt1 · December 21, 2023, 10:19pm

What web browser are you using and have you tried others to test with? If some said you may need to experiment with a different stream type or browser to help narrow the issue down. Once the cause is narrowed down, the you can look for a fix because your looking in the right place. Diagnose first.

DrScr3w · December 22, 2023, 6:13am

I have tested it in Chrome, Edge and Chromium. The mentioned streams work in all of them.
When using the restream URL generated in OH, the OH log also shows that FFMPEG is started.
Only the moment I embed this URL in the oh-video-card, nothing happens.

When I check the MainUI page I see this section.
Yes, it says, “Sorry, your browser does not support embedded videos.”, but no, as I said, everything works in the same browser when the URL is called up directly

<div class="oh-video-card card-content"><div class="player"><div id="vjs_video_3" class="video-js vjs-fluid vjs-paused vjs_video_3-dimensions vjs-workinghover vjs-v7 vjs-user-active vjs-error vjs-controls-disabled" tabindex="-1" role="region" lang="en-de" aria-label="Video Player"><video class="vjs-tech" id="vjs_video_3_html5_api" tabindex="-1" role="application">
  Sorry, your browser doesn't support embedded videos.
</video><div class="vjs-poster vjs-hidden" tabindex="-1" aria-disabled="false"></div><div class="vjs-text-track-display" aria-live="off" aria-atomic="true"><div style="position: absolute; inset: 0px; margin: 1.5%;"></div></div><div class="vjs-loading-spinner" dir="ltr"><span class="vjs-control-text">Video Player is loading.</span></div><button class="vjs-big-play-button" type="button" title="Play Video" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Play Video</span></button><div class="vjs-control-bar" dir="ltr"><button class="vjs-play-control vjs-control vjs-button" type="button" title="Play" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Play</span></button><div class="vjs-volume-panel vjs-control vjs-volume-panel-horizontal"><button class="vjs-mute-control vjs-control vjs-button" type="button" title="Mute" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Mute</span></button><div class="vjs-volume-control vjs-control vjs-volume-horizontal"><div tabindex="0" class="vjs-volume-bar vjs-slider-bar vjs-slider vjs-slider-horizontal" role="slider" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" aria-label="Volume Level" aria-live="polite" aria-valuetext="100%"><div class="vjs-mouse-display"><div class="vjs-volume-tooltip" aria-hidden="true"></div></div><div class="vjs-volume-level"><span class="vjs-control-text"></span></div></div></div></div><div class="vjs-current-time vjs-time-control vjs-control"><span class="vjs-control-text" role="presentation">Current Time&nbsp;</span><span class="vjs-current-time-display" aria-live="off" role="presentation">0:00</span></div><div class="vjs-time-control vjs-time-divider" aria-hidden="true"><div><span>/</span></div></div><div class="vjs-duration vjs-time-control vjs-control"><span class="vjs-control-text" role="presentation">Duration&nbsp;</span><span class="vjs-duration-display" aria-live="off" role="presentation">0:00</span></div><div class="vjs-progress-control vjs-control"><div tabindex="0" class="vjs-progress-holder vjs-slider vjs-slider-horizontal" role="slider" aria-valuenow="0.00" aria-valuemin="0" aria-valuemax="100" aria-label="Progress Bar" aria-valuetext="0:00 of -:-"><div class="vjs-load-progress"><span class="vjs-control-text"><span>Loaded</span>: <span class="vjs-control-text-loaded-percentage">0%</span></span></div><div class="vjs-mouse-display"><div class="vjs-time-tooltip" aria-hidden="true"></div></div><div class="vjs-play-progress vjs-slider-bar" aria-hidden="true" style="width: 0%;"><div class="vjs-time-tooltip" aria-hidden="true" style="right: 0px;">0:00</div></div></div></div><div class="vjs-live-control vjs-control vjs-hidden"><div class="vjs-live-display" aria-live="off"><span class="vjs-control-text">Stream Type&nbsp;</span>LIVE</div></div><button class="vjs-seek-to-live-control vjs-control" type="button" title="Seek to live, currently behind live" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Seek to live, currently behind live</span><span class="vjs-seek-to-live-text" aria-hidden="true">LIVE</span></button><div class="vjs-remaining-time vjs-time-control vjs-control"><span class="vjs-control-text" role="presentation">Remaining Time&nbsp;</span><span aria-hidden="true">-</span><span class="vjs-remaining-time-display" aria-live="off" role="presentation">0:00</span></div><div class="vjs-custom-control-spacer vjs-spacer ">&nbsp;</div><div class="vjs-playback-rate vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"><div class="vjs-playback-rate-value" id="vjs-playback-rate-value-label-vjs_video_3_component_323">1x</div><button class="vjs-playback-rate vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-disabled="false" title="Playback Rate" aria-haspopup="true" aria-expanded="false" aria-describedby="vjs-playback-rate-value-label-vjs_video_3_component_323"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Playback Rate</span></button><div class="vjs-menu"><ul class="vjs-menu-content" role="menu"></ul></div></div><div class="vjs-chapters-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"><button class="vjs-chapters-button vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-disabled="false" title="Chapters" aria-haspopup="true" aria-expanded="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Chapters</span></button><div class="vjs-menu"><ul class="vjs-menu-content" role="menu"><li class="vjs-menu-title" tabindex="-1">Chapters</li></ul></div></div><div class="vjs-descriptions-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"><button class="vjs-descriptions-button vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-disabled="false" title="Descriptions" aria-haspopup="true" aria-expanded="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Descriptions</span></button><div class="vjs-menu"><ul class="vjs-menu-content" role="menu"><li class="vjs-menu-item vjs-selected" tabindex="-1" role="menuitemradio" aria-disabled="false" aria-checked="true"><span class="vjs-menu-item-text">descriptions off</span><span class="vjs-control-text" aria-live="polite">, selected</span></li></ul></div></div><div class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"><button class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-disabled="false" title="Subtitles" aria-haspopup="true" aria-expanded="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Subtitles</span></button><div class="vjs-menu"><ul class="vjs-menu-content" role="menu"><li class="vjs-menu-item vjs-texttrack-settings" tabindex="-1" role="menuitem" aria-disabled="false"><span class="vjs-menu-item-text">subtitles settings</span><span class="vjs-control-text" aria-live="polite">, opens subtitles settings dialog</span></li><li class="vjs-menu-item vjs-selected" tabindex="-1" role="menuitemradio" aria-disabled="false" aria-checked="true"><span class="vjs-menu-item-text">subtitles off</span><span class="vjs-control-text" aria-live="polite">, selected</span></li></ul></div></div><div class="vjs-audio-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden"><button class="vjs-audio-button vjs-menu-button vjs-menu-button-popup vjs-button" type="button" aria-disabled="false" title="Audio Track" aria-haspopup="true" aria-expanded="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Audio Track</span></button><div class="vjs-menu"><ul class="vjs-menu-content" role="menu"></ul></div></div><button class="vjs-picture-in-picture-control vjs-control vjs-button vjs-disabled" type="button" title="Picture-in-Picture" aria-disabled="true" disabled="disabled"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Picture-in-Picture</span></button><button class="vjs-fullscreen-control vjs-control vjs-button" type="button" title="Fullscreen" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Fullscreen</span></button></div><div class="vjs-error-display vjs-modal-dialog" tabindex="-1" aria-describedby="vjs_video_3_component_540_description" aria-hidden="false" aria-label="Modal Window" role="dialog"><p class="vjs-modal-dialog-description vjs-control-text" id="vjs_video_3_component_540_description">This is a modal window.</p><div class="vjs-modal-dialog-content" role="document">No compatible source was found for this media.</div></div><div class="vjs-modal-dialog vjs-hidden  vjs-text-track-settings" tabindex="-1" aria-describedby="vjs_video_3_component_546_description" aria-hidden="true" aria-label="Caption Settings Dialog" role="dialog"><p class="vjs-modal-dialog-description vjs-control-text" id="vjs_video_3_component_546_description">Beginning of dialog window. Escape will cancel and close the window.</p><div class="vjs-modal-dialog-content" role="document"><div class="vjs-track-settings-colors"><fieldset class="vjs-fg-color vjs-track-setting"><legend id="captions-text-legend-vjs_video_3_component_546">Text</legend><label id="captions-foreground-color-vjs_video_3_component_546" class="vjs-label">Color</label><select aria-labelledby="captions-text-legend-vjs_video_3_component_546 captions-foreground-color-vjs_video_3_component_546"><option id="captions-foreground-color-vjs_video_3_component_546-White" value="#FFF" aria-labelledby="captions-text-legend-vjs_video_3_component_546 captions-foreground-color-vjs_video_3_component_546 captions-foreground-color-vjs_video_3_component_546-White">White</option><option id="captions-foreground-color-vjs_video_3_component_546-Black" value="#000" aria-labelledby="captions-text-legend-vjs_video_3_component_546 captions-foreground-color-vjs_video_3_component_546 captions-foreground-color-vjs_video_3_component_546-Black">Black</option><option id="captions-foreground-color-vjs_video_3_component_546-Red" value="#F00" aria-labelledby="captions-text-legend-vjs_video_3_component_546 captions-foreground-color-vjs_video_3_component_546 captions-foreground-color-vjs_video_3_component_546-Red">Red</option><option id="captions-foreground-color-vjs_video_3_component_546-Green" value="#0F0" aria-labelledby="captions-text-legend-vjs_video_3_component_546 captions-foreground-color-vjs_video_3_component_546 captions-foreground-color-vjs_video_3_component_546-Green">Green</option><option id="captions-foreground-color-vjs_video_3_component_546-Blue" value="#00F" aria-labelledby="captions-text-legend-vjs_video_3_component_546 captions-foreground-color-vjs_video_3_component_546 captions-foreground-color-vjs_video_3_component_546-Blue">Blue</option><option id="captions-foreground-color-vjs_video_3_component_546-Yellow" value="#FF0" aria-labelledby="captions-text-legend-vjs_video_3_component_546 captions-foreground-color-vjs_video_3_component_546 captions-foreground-color-vjs_video_3_component_546-Yellow">Yellow</option><option id="captions-foreground-color-vjs_video_3_component_546-Magenta" value="#F0F" aria-labelledby="captions-text-legend-vjs_video_3_component_546 captions-foreground-color-vjs_video_3_component_546 captions-foreground-color-vjs_video_3_component_546-Magenta">Magenta</option><option id="captions-foreground-color-vjs_video_3_component_546-Cyan" value="#0FF" aria-labelledby="captions-text-legend-vjs_video_3_component_546 captions-foreground-color-vjs_video_3_component_546 captions-foreground-color-vjs_video_3_component_546-Cyan">Cyan</option></select><span class="vjs-text-opacity vjs-opacity"><label id="captions-foreground-opacity-vjs_video_3_component_546" class="vjs-label">Transparency</label><select aria-labelledby="captions-text-legend-vjs_video_3_component_546 captions-foreground-opacity-vjs_video_3_component_546"><option id="captions-foreground-opacity-vjs_video_3_component_546-Opaque" value="1" aria-labelledby="captions-text-legend-vjs_video_3_component_546 captions-foreground-opacity-vjs_video_3_component_546 captions-foreground-opacity-vjs_video_3_component_546-Opaque">Opaque</option><option id="captions-foreground-opacity-vjs_video_3_component_546-SemiTransparent" value="0.5" aria-labelledby="captions-text-legend-vjs_video_3_component_546 captions-foreground-opacity-vjs_video_3_component_546 captions-foreground-opacity-vjs_video_3_component_546-SemiTransparent">Semi-Transparent</option></select></span></fieldset><fieldset class="vjs-bg-color vjs-track-setting"><legend id="captions-background-vjs_video_3_component_546">Background</legend><label id="captions-background-color-vjs_video_3_component_546" class="vjs-label">Color</label><select aria-labelledby="captions-background-vjs_video_3_component_546 captions-background-color-vjs_video_3_component_546"><option id="captions-background-color-vjs_video_3_component_546-Black" value="#000" aria-labelledby="captions-background-vjs_video_3_component_546 captions-background-color-vjs_video_3_component_546 captions-background-color-vjs_video_3_component_546-Black">Black</option><option id="captions-background-color-vjs_video_3_component_546-White" value="#FFF" aria-labelledby="captions-background-vjs_video_3_component_546 captions-background-color-vjs_video_3_component_546 captions-background-color-vjs_video_3_component_546-White">White</option><option id="captions-background-color-vjs_video_3_component_546-Red" value="#F00" aria-labelledby="captions-background-vjs_video_3_component_546 captions-background-color-vjs_video_3_component_546 captions-background-color-vjs_video_3_component_546-Red">Red</option><option id="captions-background-color-vjs_video_3_component_546-Green" value="#0F0" aria-labelledby="captions-background-vjs_video_3_component_546 captions-background-color-vjs_video_3_component_546 captions-background-color-vjs_video_3_component_546-Green">Green</option><option id="captions-background-color-vjs_video_3_component_546-Blue" value="#00F" aria-labelledby="captions-background-vjs_video_3_component_546 captions-background-color-vjs_video_3_component_546 captions-background-color-vjs_video_3_component_546-Blue">Blue</option><option id="captions-background-color-vjs_video_3_component_546-Yellow" value="#FF0" aria-labelledby="captions-background-vjs_video_3_component_546 captions-background-color-vjs_video_3_component_546 captions-background-color-vjs_video_3_component_546-Yellow">Yellow</option><option id="captions-background-color-vjs_video_3_component_546-Magenta" value="#F0F" aria-labelledby="captions-background-vjs_video_3_component_546 captions-background-color-vjs_video_3_component_546 captions-background-color-vjs_video_3_component_546-Magenta">Magenta</option><option id="captions-background-color-vjs_video_3_component_546-Cyan" value="#0FF" aria-labelledby="captions-background-vjs_video_3_component_546 captions-background-color-vjs_video_3_component_546 captions-background-color-vjs_video_3_component_546-Cyan">Cyan</option></select><span class="vjs-bg-opacity vjs-opacity"><label id="captions-background-opacity-vjs_video_3_component_546" class="vjs-label">Transparency</label><select aria-labelledby="captions-background-vjs_video_3_component_546 captions-background-opacity-vjs_video_3_component_546"><option id="captions-background-opacity-vjs_video_3_component_546-Opaque" value="1" aria-labelledby="captions-background-vjs_video_3_component_546 captions-background-opacity-vjs_video_3_component_546 captions-background-opacity-vjs_video_3_component_546-Opaque">Opaque</option><option id="captions-background-opacity-vjs_video_3_component_546-SemiTransparent" value="0.5" aria-labelledby="captions-background-vjs_video_3_component_546 captions-background-opacity-vjs_video_3_component_546 captions-background-opacity-vjs_video_3_component_546-SemiTransparent">Semi-Transparent</option><option id="captions-background-opacity-vjs_video_3_component_546-Transparent" value="0" aria-labelledby="captions-background-vjs_video_3_component_546 captions-background-opacity-vjs_video_3_component_546 captions-background-opacity-vjs_video_3_component_546-Transparent">Transparent</option></select></span></fieldset><fieldset class="vjs-window-color vjs-track-setting"><legend id="captions-window-vjs_video_3_component_546">Window</legend><label id="captions-window-color-vjs_video_3_component_546" class="vjs-label">Color</label><select aria-labelledby="captions-window-vjs_video_3_component_546 captions-window-color-vjs_video_3_component_546"><option id="captions-window-color-vjs_video_3_component_546-Black" value="#000" aria-labelledby="captions-window-vjs_video_3_component_546 captions-window-color-vjs_video_3_component_546 captions-window-color-vjs_video_3_component_546-Black">Black</option><option id="captions-window-color-vjs_video_3_component_546-White" value="#FFF" aria-labelledby="captions-window-vjs_video_3_component_546 captions-window-color-vjs_video_3_component_546 captions-window-color-vjs_video_3_component_546-White">White</option><option id="captions-window-color-vjs_video_3_component_546-Red" value="#F00" aria-labelledby="captions-window-vjs_video_3_component_546 captions-window-color-vjs_video_3_component_546 captions-window-color-vjs_video_3_component_546-Red">Red</option><option id="captions-window-color-vjs_video_3_component_546-Green" value="#0F0" aria-labelledby="captions-window-vjs_video_3_component_546 captions-window-color-vjs_video_3_component_546 captions-window-color-vjs_video_3_component_546-Green">Green</option><option id="captions-window-color-vjs_video_3_component_546-Blue" value="#00F" aria-labelledby="captions-window-vjs_video_3_component_546 captions-window-color-vjs_video_3_component_546 captions-window-color-vjs_video_3_component_546-Blue">Blue</option><option id="captions-window-color-vjs_video_3_component_546-Yellow" value="#FF0" aria-labelledby="captions-window-vjs_video_3_component_546 captions-window-color-vjs_video_3_component_546 captions-window-color-vjs_video_3_component_546-Yellow">Yellow</option><option id="captions-window-color-vjs_video_3_component_546-Magenta" value="#F0F" aria-labelledby="captions-window-vjs_video_3_component_546 captions-window-color-vjs_video_3_component_546 captions-window-color-vjs_video_3_component_546-Magenta">Magenta</option><option id="captions-window-color-vjs_video_3_component_546-Cyan" value="#0FF" aria-labelledby="captions-window-vjs_video_3_component_546 captions-window-color-vjs_video_3_component_546 captions-window-color-vjs_video_3_component_546-Cyan">Cyan</option></select><span class="vjs-window-opacity vjs-opacity"><label id="captions-window-opacity-vjs_video_3_component_546" class="vjs-label">Transparency</label><select aria-labelledby="captions-window-vjs_video_3_component_546 captions-window-opacity-vjs_video_3_component_546"><option id="captions-window-opacity-vjs_video_3_component_546-Transparent" value="0" aria-labelledby="captions-window-vjs_video_3_component_546 captions-window-opacity-vjs_video_3_component_546 captions-window-opacity-vjs_video_3_component_546-Transparent">Transparent</option><option id="captions-window-opacity-vjs_video_3_component_546-SemiTransparent" value="0.5" aria-labelledby="captions-window-vjs_video_3_component_546 captions-window-opacity-vjs_video_3_component_546 captions-window-opacity-vjs_video_3_component_546-SemiTransparent">Semi-Transparent</option><option id="captions-window-opacity-vjs_video_3_component_546-Opaque" value="1" aria-labelledby="captions-window-vjs_video_3_component_546 captions-window-opacity-vjs_video_3_component_546 captions-window-opacity-vjs_video_3_component_546-Opaque">Opaque</option></select></span></fieldset></div><div class="vjs-track-settings-font"><fieldset class="vjs-font-percent vjs-track-setting"><legend id="captions-font-size-vjs_video_3_component_546" class="">Font Size</legend><select aria-labelledby="captions-font-size-vjs_video_3_component_546"><option id="captions-font-size-vjs_video_3_component_546-50" value="0.50" aria-labelledby="captions-font-size-vjs_video_3_component_546 captions-font-size-vjs_video_3_component_546-50">50%</option><option id="captions-font-size-vjs_video_3_component_546-75" value="0.75" aria-labelledby="captions-font-size-vjs_video_3_component_546 captions-font-size-vjs_video_3_component_546-75">75%</option><option id="captions-font-size-vjs_video_3_component_546-100" value="1.00" aria-labelledby="captions-font-size-vjs_video_3_component_546 captions-font-size-vjs_video_3_component_546-100">100%</option><option id="captions-font-size-vjs_video_3_component_546-125" value="1.25" aria-labelledby="captions-font-size-vjs_video_3_component_546 captions-font-size-vjs_video_3_component_546-125">125%</option><option id="captions-font-size-vjs_video_3_component_546-150" value="1.50" aria-labelledby="captions-font-size-vjs_video_3_component_546 captions-font-size-vjs_video_3_component_546-150">150%</option><option id="captions-font-size-vjs_video_3_component_546-175" value="1.75" aria-labelledby="captions-font-size-vjs_video_3_component_546 captions-font-size-vjs_video_3_component_546-175">175%</option><option id="captions-font-size-vjs_video_3_component_546-200" value="2.00" aria-labelledby="captions-font-size-vjs_video_3_component_546 captions-font-size-vjs_video_3_component_546-200">200%</option><option id="captions-font-size-vjs_video_3_component_546-300" value="3.00" aria-labelledby="captions-font-size-vjs_video_3_component_546 captions-font-size-vjs_video_3_component_546-300">300%</option><option id="captions-font-size-vjs_video_3_component_546-400" value="4.00" aria-labelledby="captions-font-size-vjs_video_3_component_546 captions-font-size-vjs_video_3_component_546-400">400%</option></select></fieldset><fieldset class="vjs-edge-style vjs-track-setting"><legend id="vjs_video_3_component_546" class="">Text Edge Style</legend><select aria-labelledby="vjs_video_3_component_546"><option id="vjs_video_3_component_546-None" value="none" aria-labelledby="vjs_video_3_component_546 vjs_video_3_component_546-None">None</option><option id="vjs_video_3_component_546-Raised" value="raised" aria-labelledby="vjs_video_3_component_546 vjs_video_3_component_546-Raised">Raised</option><option id="vjs_video_3_component_546-Depressed" value="depressed" aria-labelledby="vjs_video_3_component_546 vjs_video_3_component_546-Depressed">Depressed</option><option id="vjs_video_3_component_546-Uniform" value="uniform" aria-labelledby="vjs_video_3_component_546 vjs_video_3_component_546-Uniform">Uniform</option><option id="vjs_video_3_component_546-Dropshadow" value="dropshadow" aria-labelledby="vjs_video_3_component_546 vjs_video_3_component_546-Dropshadow">Dropshadow</option></select></fieldset><fieldset class="vjs-font-family vjs-track-setting"><legend id="captions-font-family-vjs_video_3_component_546" class="">Font Family</legend><select aria-labelledby="captions-font-family-vjs_video_3_component_546"><option id="captions-font-family-vjs_video_3_component_546-ProportionalSansSerif" value="proportionalSansSerif" aria-labelledby="captions-font-family-vjs_video_3_component_546 captions-font-family-vjs_video_3_component_546-ProportionalSansSerif">Proportional Sans-Serif</option><option id="captions-font-family-vjs_video_3_component_546-MonospaceSansSerif" value="monospaceSansSerif" aria-labelledby="captions-font-family-vjs_video_3_component_546 captions-font-family-vjs_video_3_component_546-MonospaceSansSerif">Monospace Sans-Serif</option><option id="captions-font-family-vjs_video_3_component_546-ProportionalSerif" value="proportionalSerif" aria-labelledby="captions-font-family-vjs_video_3_component_546 captions-font-family-vjs_video_3_component_546-ProportionalSerif">Proportional Serif</option><option id="captions-font-family-vjs_video_3_component_546-MonospaceSerif" value="monospaceSerif" aria-labelledby="captions-font-family-vjs_video_3_component_546 captions-font-family-vjs_video_3_component_546-MonospaceSerif">Monospace Serif</option><option id="captions-font-family-vjs_video_3_component_546-Casual" value="casual" aria-labelledby="captions-font-family-vjs_video_3_component_546 captions-font-family-vjs_video_3_component_546-Casual">Casual</option><option id="captions-font-family-vjs_video_3_component_546-Script" value="script" aria-labelledby="captions-font-family-vjs_video_3_component_546 captions-font-family-vjs_video_3_component_546-Script">Script</option><option id="captions-font-family-vjs_video_3_component_546-SmallCaps" value="small-caps" aria-labelledby="captions-font-family-vjs_video_3_component_546 captions-font-family-vjs_video_3_component_546-SmallCaps">Small Caps</option></select></fieldset></div><div class="vjs-track-settings-controls"><button type="button" class="vjs-default-button" title="restore all settings to the default values">Reset<span class="vjs-control-text"> restore all settings to the default values</span></button><button type="button" class="vjs-done-button">Done</button></div></div><button class="vjs-close-button vjs-control vjs-button" type="button" aria-disabled="false" title="Close Modal Dialog"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Close Modal Dialog</span></button><p class="vjs-control-text">End of dialog window.</p></div></div></div></div>

EDIT:
I have also tried another player type (WebRTC), but it doesn’t really make a difference

<div class="oh-video-card card-content"><div class="player"><video autoplay="autoplay" controls="controls" playsinline="" style="max-width: 100%;" class="">
  Sorry, your browser doesn't support embedded videos.
</video></div></div>

DrScr3w · December 22, 2023, 11:16am

I came across this post and with the use of the image-card and if I enter the URLs (http://oh:8080,https://oh:8443) in the browser under chrome://flags/#unsafely-treat-insecure-origin-as-secure the stream is also displayed in the MainUI and you can also see in the oh log that ffmpeg is started for the respective stream. But it still doesn’t work in the Video Card.

jimtng · December 26, 2024, 9:44am

Ever got this to work?

I am currently using an oh-image to display an mjpeg stream directly from Frigate (I am not using the Frigate binding). This works, but there’s a significant delay the longer the browser is open. Sometimes even up to 15 minute delay!

I can’t figure out how to display an mp4 stream on a Chromium browser on a raspberry pi (it’s used to drive my monitor that displays my mainui page).

DrScr3w · December 27, 2024, 11:37am

Yes, it worked for me with the live stream, but the performance in the Chromium browser on a Pi4 with 8GB memory was not so good. When I wanted to use other widgets, the delay was considerable. I now have a widget with an oh image that is only displayed when movement is detected.

jimtng · December 27, 2024, 11:45am

Would you mind sharing your relevant ui code please? And what’s the video url?

DrScr3w · December 27, 2024, 11:48am

Unfortunately I no longer have either, that was almost a year ago.

Anyway, this was the solution to make the stream work. And I think I used the normal Steam link from Frigate.