[Support]: Live view not working

[phoenixtechnam]

Describe the problem you are having

When opening any live view in the latest Frigate, no video is shown. Browser console reports "Uncaught (in promise) DOMException: The element has no supported sources."

My setup:

• 10x cameras from different vendors

• All have a main stream (HD viewing, recording) and sub-stream (low-res detection)

• Official Home Assistant integration

• Frigate shows all substreams in main panel without issues

• Frigate shows all high-res recordings

• Home Assistant plays all cameras and all streams without issues using the frigate integration (with go2rtc re-stream)

But Frigate fails to load the main streams when opening camera live views.
Browser console reports "Uncaught (in promise) DOMException: The element has no supported sources."

I tested the different go2rtc stream links. MSE fails to load any camera, only the WebRTC streams work flawlessly.
So I suspect Frigate is trying to use MSE but does not give me an option to change to WebRTC in live view.

Kindly assist, thank you in advance.

Steps to reproduce

Set up cameras with main streams and sub-streams.
then go to LIVE VIEW in Frigate

Version

0.14

Frigate config file

mqtt:
  enabled: true
  host: 10.0.0.10
  port: 1883
  topic_prefix: frigate
  client_id: frigate
  user: mqtt
  password: XXXXXXXXX
  stats_interval: 240

database:
  # The path to store the SQLite DB (default: shown below)
  path: /config/frigate.db

detectors:
  coral:
    type: edgetpu
    device: usb

detect:
  #width: 1280
  #height: 720
  fps: 5
  enabled: true
  #max_disappeared: 25
  stationary:
    interval: 50
    threshold: 50

ui:
  time_format: browser
  date_style: short
  time_style: medium
  strftime_fmt: '%Y/%m/%d %H:%M'

telemetry:
  version_check: false

record:
  enabled: true
  expire_interval: 60
  retain:
    days: 5
    mode: all
    #   all - save all recording segments regardless of activity
    #   motion - save all recordings segments with any detected motion
    #   active_objects - save all recording segments with active/moving objects
  events:
    pre_capture: 1
    post_capture: 5
    retain:
      default: 14
      mode: active_objects

motion:
  threshold: 40
  contour_area: 30
  improve_contrast: true
  mqtt_off_delay: 10

objects:
  track:
    - person
    - car


cameras:
  entrance_gate_camera:
    ffmpeg:
      inputs:
        - path: rtsp://localhost:8554/entrance_gate_camera
          roles:
            - record
        - path: rtsp://localhost:8554/entrance_gate_camera_2nd_stream
          roles:
            - detect
      #output_args:
      #    record: -f segment -segment_time 10 -segment_format mp4 -reset_timestamps 1 -strftime 1 -c:v libx264 -pix_fmt yuv420p -an 
    detect:
      width: 704
      height: 480
    motion:
      #threshold: 25
      mask: 
        1,0,0,0,0,0.58,0.022,0.652,0.111,0.579,0.19,0.573,0.195,0.333,0.364,0.548,0.93,0.675,1,1
    objects:
      track:
        - car
        - person

#  michelle_mclean_camera:
#    ffmpeg:
#      inputs:
#        - path: rtsp://localhost:8554/michelle_mclean_camera
#          roles:
#            - record
#        - path: rtsp://localhost:8554/michelle_mclean_camera_2nd_stream
#          roles:
#            - detect
#      #output_args:
#      #    record: -f segment -segment_time 10 -segment_format mp4 -reset_timestamps 1 -strftime 1 -c:v libx264 -pix_fmt yuv420p -an 
#    motion:
#      mask:
#        - 704,416,704,0,0,0,0,416
#    #objects:
#    #  track:
#    #    - car
#    #    - person


  nauchab_east_camera:
    ffmpeg:
      inputs:
        - path: rtsp://localhost:8554/nauchab_east_camera
          roles:
            - record
        - path: rtsp://localhost:8554/nauchab_east_camera_2nd_stream
          roles:
            - detect
      #output_args:
      #    record: -f segment -segment_time 10 -segment_format mp4 -reset_timestamps 1 -strftime 1 -c:v libx264 -pix_fmt yuv420p -an 
    detect:
      width: 640
      height: 360
    motion:
      mask: 
        0.145,1,0.103,0.653,0.091,0.4,0.092,0.272,0.219,0.247,0.297,0.386,0.586,1,1,1,1,0,0,0,0,1
    objects:
      track:
        - car
        - person
    zones:
      zone_0:
        coordinates: 75,360,385,360,312,289,221,180,193,105,57,118
        objects:
          - car
          - person
  nauchab_west_camera:
    ffmpeg:
      inputs:
        - path: rtsp://localhost:8554/nauchab_west_camera
          roles:
            - record
        - path: rtsp://localhost:8554/nauchab_west_camera_2nd_stream
          roles:
            - detect
      #output_args:
      #    record: -f segment -segment_time 10 -segment_format mp4 -reset_timestamps 1 -strftime 1 -c:v libx264 -pix_fmt yuv420p -an 
    detect:
      width: 704
      height: 480
    motion:
      mask: 1,1,0.81,1,0.864,0.415,0.653,0.41,0.293,0.97,0.257,1,0,1,0,0.704,0,0,1,0
    zones:
      zone_0:
        coordinates: 0.442,1,0.777,1,0.849,0.44,0.643,0.427,0.264,1
        objects:
          - car
          - person
        inertia: 3
        loitering_time: 0
    objects:
      track:
        - car
        - person


    review:
      alerts:
        required_zones:
          - zone_0
  east_wall_camera:
    ffmpeg:
      inputs:
        - path: rtsp://localhost:8554/east_wall_camera
          roles:
            - record
        - path: rtsp://localhost:8554/east_wall_camera_2nd_stream
          roles:
            - detect
      #output_args:
      #    record: -f segment -segment_time 10 -segment_format mp4 -reset_timestamps 1 -strftime 1 -c:v libx264 -pix_fmt yuv420p -an 
    detect:
      width: 640
      height: 360
    motion:
      mask: 0,1,0.397,1,0.559,0.125,0.636,0.153,0.659,0.058,0.761,0.161,1,0.517,1,0,0,0
    objects:
      track:
        - person


  scullery_door_camera:
    ffmpeg:
      inputs:
        - path: rtsp://localhost:8554/scullery_door_camera
          roles:
            - record
        - path: rtsp://localhost:8554/scullery_door_camera_2nd_stream
          roles:
            - detect
      #output_args:
      #    record: -f segment -segment_time 10 -segment_format mp4 -reset_timestamps 1 -strftime 1 -c:v libx264 -pix_fmt yuv420p -an 
    detect:
      width: 640
      height: 360
    motion:
      mask:
        - 0.086,0.325,0.303,0.075,0.4,0.111,0.553,0.167,0.567,0.525,0.713,0.586,0.83,0.942,1,1,1,0,0.819,0,0,0,0,0.43
        - 0.361,1,0.094,1,0.227,0.581,0.418,0.598
    objects:
      track:
        - person


  backyard_camera:
    ffmpeg:
      inputs:
        - path: rtsp://localhost:8554/backyard_camera
          roles:
            - record
        - path: rtsp://localhost:8554/backyard_camera_2nd_stream
          roles:
            - detect
      #output_args:
      #    record: -f segment -segment_time 10 -segment_format mp4 -reset_timestamps 1 -strftime 1 -c:v libx264 -pix_fmt yuv420p -an 
    detect:
      width: 640
      height: 360
    motion:
      mask: 
        0,1,0.051,1,0.348,0.831,0.415,0.838,0.539,0.789,0.648,0.644,0.658,0.519,0.834,0.492,0.909,0.908,1,1,1,0.725,1,0.294,1,0,0.678,0,0,0
    objects:
      track:
        - person


  terrace_camera:
    ffmpeg:
      inputs:
        - path: rtsp://localhost:8554/terrace_camera
          roles:
            - record
        - path: rtsp://localhost:8554/terrace_camera_2nd_stream
          roles:
            - detect
      #output_args:
      #    record: -f segment -segment_time 10 -segment_format mp4 -reset_timestamps 1 -strftime 1 -c:v libx264 -pix_fmt yuv420p -an 
    detect:
      width: 640
      height: 360
    motion:
      mask: 0.477,0.528,1,0.689,1,0,0,0,0,1,0.164,1,0.127,0.561
    objects:
      track:
        - person


  living_room_camera:
    ffmpeg:
      inputs:
        - path: rtsp://localhost:8554/living_room_camera
          roles:
            - record
        - path: rtsp://localhost:8554/living_room_camera_2nd_stream
          roles:
            - detect
      #output_args:
      #    record: -f segment -segment_time 10 -segment_format mp4 -reset_timestamps 1 -strftime 1 -c:v libx264 -pix_fmt yuv420p -an 
    detect:
      width: 704
      height: 480
    motion:
      mask: 
        0.001,1,0.004,0.018,0.998,0.016,1,0.155,0.513,0.188,0.327,0.182,0.101,0.32,0.128,0.502,0.038,0.555,0.227,0.951
    objects:
      track:
        - person


  garage_camera:
    ffmpeg:
      inputs:
        - path: rtsp://localhost:8554/garage_camera
          roles:
            - record
        - path: rtsp://localhost:8554/garage_camera_2nd_stream
          roles:
            - detect
      #output_args:
      #    record: -f segment -segment_time 10 -segment_format mp4 -reset_timestamps 1 -strftime 1 -c:v libx264 -pix_fmt yuv420p -an 
    detect:
      width: 704
      height: 480
    motion:
      mask: 0.193,0.533,0.188,0.156,1,0.294,1,0,0,0,0,1
    objects:
      track:
        - car
        - person



go2rtc:
  streams:
    entrance_gate_camera:
      - rtsp://10.0.99.34:554/user=admin_password=XXXXXXXX_channel=1_stream=0.sdp?real_stream
    entrance_gate_camera_2nd_stream:
      - rtsp://10.0.99.34:554/user=admin_password=XXXXXXXX_channel=1_stream=1.sdp?real_stream
#    michelle_mclean_camera:
#      - ffmpeg:rtsp://admin:[email protected]:554/ch01.264?dev=1
#    michelle_mclean_camera_2nd_stream:
#      - ffmpeg:rtsp://admin:[email protected]:554/ch01_sub.264?dev=1
    nauchab_east_camera:
      - rtsp://admin:[email protected]:8554/profile0
    nauchab_east_camera_2nd_stream:
      - rtsp://admin:[email protected]:8554/profile1
    nauchab_west_camera:
      - rtsp://10.0.99.32:554/user=admin_password=XXXXXXXX_channel=1_stream=0.sdp?real_stream
    nauchab_west_camera_2nd_stream:
      - rtsp://10.0.99.32:554/user=admin_password=XXXXXXXX_channel=1_stream=1.sdp?real_stream
    east_wall_camera:
      - rtsp://admin:[email protected]:8554/profile0
    east_wall_camera_2nd_stream:
      - rtsp://admin:[email protected]:8554/profile1
    scullery_door_camera:
      - rtsp://admin:[email protected]:8554/profile0
    scullery_door_camera_2nd_stream:
      - rtsp://admin:[email protected]:8554/profile1
    backyard_camera:
      - rtsp://admin:[email protected]:8554/profile0
    backyard_camera_2nd_stream:
      - rtsp://admin:[email protected]:8554/profile1
    terrace_camera:
      - rtsp://admin:[email protected]:8554/profile0
    terrace_camera_2nd_stream:
      - rtsp://admin:[email protected]:8554/profile1
    garage_camera:
      - rtsp://10.0.99.33:554/user=admin_password=XXXXXXXX_channel=1_stream=0.sdp?real_stream
    garage_camera_2nd_stream:
      - rtsp://10.0.99.33:554/user=admin_password=XXXXXXXX_channel=1_stream=1.sdp?real_stream
    living_room_camera:
      - rtsp://10.0.99.30:554/user=admin_password=XXXXXXXX_channel=1_stream=0.sdp?real_stream
    living_room_camera_2nd_stream:
      - rtsp://10.0.99.30:554/user=admin_password=XXXXXXXX_channel=1_stream=1.sdp?real_stream



version: 0.14

Relevant log output

Browser console reports "Uncaught (in promise) DOMException: The element has no supported sources."

Operating system

UNRAID

Install method

Docker Compose

Network connection

Wired

Camera make and model

various

Any other information that may be helpful

No response

[hawkeye217]

What browser are you using, and what codec are your cameras sending?

[phoenixtechnam]

No, the live view type is intelligently selected by Frigate in 0.14, there is no way to change it manually.

Seems to me that Frigate does not select the stream type very intelligently in this case. As mentioned, using the go2rtc WebRTC streams works well.

The problem is that they are using a particular codec that your browser cannot decode correctly.

The streams have been working well for years in HA via Frigate integration with go2rtc. As mentioned, I use cameras from different vendors, so I dont see why this is would be a browser or camera encoder issue. Everything works well as it used to, just the new Frigate Live view doesnt work. I remember on the older Frigate version I had to select WebRTC for live view to work.

If you cannot change your camera firmware settings, the only other solution is to transcode with go2rtc or use jsmpeg live views by changing your go2rtc stream names to no longer match the names of your cameras.

In the beginning, I spent a lot of time optimizing the different camera encoders, but will give it another shot. Will inform if I come up with something. Nevertheless, I still believe this an issue with the new Live View in Frigate v0.14 and the easiest workaround would be to use WebRTC "intelligently" or manually.

Anyway, I would like to thank all Frigate developers for all the work which went into this project! I really like the direction and new features which were introduced in v0.14. Keep up the good work !

Please let me know if anything transpires on your side regarding this issue.

[hawkeye217]

WebRTC requires additional configuration, port forwarding (if used externally outside of a local network), and doesn't support H.265, which is why we decided on MSE as the default in the Frigate UI. MSE is a standard available on every browser - though all common codecs are supported, some of the more unique codec support is really dependent on the OS and/or browser vendor.

0.14 is our initial release with intelligent selection, and it can certainly be improved. We're looking for users to help us improve it if you'd be willing to help us debug and test new code.

[phoenixtechnam]

I spent another 4 hours last night fiddling around with the cameras.

Good news: I managed to get x265 working on all Cameras and streaming in HA.

Bad news: I unfortunately encountered a myriad of bugs and inconsistent behaviours again :

1. Changing to x265 did not solve the LIVE VIEW issues mentioned above
2. Changing to x265 streams broke all default camera streams in HA provided by the Frigate integration
3. Manually adding the x265 camera streams via GENERIC CAMERA integration works, with both direct rtsp and re-stream (go2rtc) links working well
4. Frigate HA CARD works with the manually added streams but not with all cameras provided by the Frigate integration
5. Frigate LIVE VIEW seems to be particular sensitive to I-FRAME INTERVAL settings in camera encoder. I managed to get some streams working somewhat (only shows 5 out of 10 times when reloading the live view)

My current setup:

• Frigate Card for the HD streams
• HA picture glances for the sub-streams around

[hawkeye217]

Glad to hear you've made some progress.

Regarding the i-frame/keyframe interval, the recommendation we usually give users is to set it to be the same value as the frame rate. With a keyframe interval set too high, streaming players have to wait for the next keyframe to begin buffering content. This is not particular to frigate, but just how streaming video on the web works generally.

[phoenixtechnam]

Yes, thanks. All cams have Iframe interval set to half the frame rate, effectively sending an Iframe every 0.5 seconds.

Another update:
When removing the tick "Enable WebRTC for camera streams" in Frigate integration settings, the Frigate streams are working again in HA and Frigate Card.

So in HA everything works now using the x265 streams.

But the issues with Frigate LIVE VIEW are still persisting....

[hawkeye217]

I have created a PR with fixes and improvements for live view, including improved intelligence for falling back to WebRTC when MSE fails. It may not fix your specific codec issues, but it could help you not see an endless spinning activity indicator as much when trying to view an individual camera's live stream.

#13143