AlexxIT / WebRTC

Home Assistant custom component for real-time viewing of almost any camera stream using WebRTC and other technologies.
https://github.com/AlexxIT/Blog
MIT License
1.43k stars 168 forks source link

Streams won't load on Android devices #575

Open Klaus062 opened 11 months ago

Klaus062 commented 11 months ago

My configuration: HAOS 10.5 with core 2023.9.3 running on an NUC i5 8GB / 1TB with coral TPU go2rtc v2.7.1 webRTC Camera v3.3.0

Lenovo P11 as wall panel running on Android 11 Fully Kiosk Browser 1.53.1

The issue is that I would like to have 3 video live streams from surveilance cameras on my dashboard on the Lenovo P11. When testing my dashboard on my Linux PC, the three webRTC Camera cards load immediately and the streams show a latency of less than a second. On the P11 the streams will not load - sometimes one of them, sometimes two, never all three of them and its random, which one will load. When loaded, the latency however is as excellent as on the PC.

I have tried the same with picture-glance cards and all of them will load without any problem, however with a latency of about 8-10 seconds. On the PC the latency is about 3-4 seconds in that case.

Many thanks for your help Klaus

go2RTC,yaml

streams:
  GartentorHr:
    - rtsp://xx:xxx@192.168.178.181:554/cam/realmonitor?channel=1&subtype=0
  GartentorLr:
    - rtsp://xx:xxx@192.168.178.181:554/cam/realmonitor?channel=1&subtype=1
  GartentorMr:
    - ffmpeg:rtsp://xx:xxx@192.168.178.181:554/cam/realmonitor?channel=1&subtype=2#video=h264#width=640

  EinfahrtHr:
    - rtsp://xx:xxx@192.168.178.182:554/cam/realmonitor?channel=1&subtype=0
  EinfahrtLr:
    - rtsp://xx:xxx@192.168.178.182:554/cam/realmonitor?channel=1&subtype=1
  EinfahrtMr:
    - ffmpeg:rtsp://xx:xxx@192.168.178.182:554/cam/realmonitor?channel=1&subtype=2#video=h263#width=640

  EingangHr:
    - rtsp://xx:xxx@192.168.178.183:554/cam/realmonitor?channel=1&subtype=0
  EingangLr:
    - rtsp://xx:xxx@192.168.178.183:554/cam/realmonitor?channel=1&subtype=1
  EingangMr:
    - ffmpeg:rtsp://xx:xxx@192.168.178.183:554/cam/realmonitor?channel=1&subtype=2#video=h264#width=640

And here is the dashboard, webRTC Camera Card at the bottom:

kiosk_mode:
  user_settings:
    - users:
        - panel_user
      kiosk: true
views:
  - title: Video Vorgarten
    theme: backend-selected
    path: null
    icon: mdi:desktop-classic
    type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 10% 45% 45%
      grid-template-rows: 50% 50%
      grid-template-areas: |
        "buttons video1 video2"
        "buttons video3 video4"
      justify-items: stretch
    badges: []
    cards:
      - type: vertical-stack
        cards:
          - type: custom:button-card
            name: Home
            icon: mdi:home
            color: blueviolet
            styles:
              card:
                - border: 2px solid grey
            tap_action:
              action: navigate
              navigation_path: /dashboard-tablet
          - type: custom:button-card
            name: Garten Live
            icon: mdi:cctv
            color: cyan
            styles:
              card:
                - border: 2px solid grey
            tap_action:
              action: navigate
              navigation_path: /vorgarten-live
          - type: custom:button-card
            name: Innenkameras
            icon: mdi:cctv
            color: cyan
            styles:
              card:
                - border: 2px solid grey
            tap_action:
              action: navigate
              navigation_path: /vorgarten-live
          - type: custom:button-card
            name: Recorder
            icon: mdi:audio-video
            color: orange
            styles:
              card:
                - border: 2px solid grey
            tap_action:
              action: navigate
              navigation_path: /panel-nvr
        view_layout:
          grid-area: buttons
      - camera_view: live
        type: custom:webrtc-camera
        view_layout:
          grid-area: video1
        url: EingangMr
        mode: webrtc
        aspect_ratio: '16:9'
        hold_action:
          action: none
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              dismissable: true
              autoclose: false
              title: Eingang
              timeout: 120000
              size: fullscreen
              content:
                type: custom:webrtc-camera
                entity: EingangHr
                mode: webrtc
                camera_view: live
                show_name: false
                show_state: false
                tap_action:
                  action: none
                hold_action:
                  action: none
      - camera_view: live
        type: custom:webrtc-camera
        view_layout:
          grid-area: video2
        url: EinfahrtMr
        mode: webrtc
        aspect_ratio: '16:9'
        hold_action:
          action: none
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              dismissable: true
              autoclose: false
              title: Einfahrt
              timeout: 120000
              size: fullscreen
              content:
                type: custom:webrtc-camera
                entity: EinfahrtHr
                mode: webrtc
                camera_view: live
                show_name: false
                show_state: false
                tap_action:
                  action: none
                hold_action:
                  action: none
      - camera_view: live
        type: custom:webrtc-camera
        view_layout:
          grid-area: video3
        url: GartentorMr
        mode: webrtc
        aspect_ratio: '16:9'
        hold_action:
          action: none
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              dismissable: true
              autoclose: false
              title: Gartentor
              timeout: 120000
              size: fullscreen
              content:
                type: custom:webrtc-camera
                entity: GartentorHr
                mode: webrtc
                camera_view: live
                show_name: false
                show_state: false
                tap_action:
                  action: none
                hold_action:
                  action: none
AlexxIT commented 11 months ago

It's probably because you streams H264 hi profile. Lenovo always have problems with it. But it's interesting that you haven't problems with picture glance. Unfortunately I don't have devices for tests that can't handle hi profile videos.

Klaus062 commented 11 months ago

Many thanks for your feedback and yes, it seems that you are absolutely right. I reactivated my much older Samsung Tab S2 on which it works fine. The overall reactivity on the Samsung is slower compared to the Lenovo because the processing power is lower, however the Samsung will load all streams and once loaded the latency is about 1s.

For testing, I have changed to H264base profile without any improvement on the Lenovo. Please let me know if there is anything else I can test to identify what is causing the issue on the Lenovo.

AlexxIT commented 6 months ago

Are you sure you using picture glance card in live mode? Other users said that by default they watching just snapshots (images) in the picture glance card.