Switch off the white bounding box in full-screen mode

[banditto9]

Hello and many thanks for the wonderful software - use it a lot and now I have HA with picture-glance cards configured to the opened as separate cards where I have "full screen" custom button. I'm an ordinary user trying to stick to the standard usage scenarios.

The small cosmetic issue I have - is there any method to switch off the white bounding box in the full-screen mode? Switch to black is also ok for me. I have 4:3 old cameras and modern 16:9 displays have that white lines distracting a bit.

Thank you very much.

Setup WebRTC Camera 3.5.0 on HAOS x86 via HACS: Home Assistant 2023.10.5 Supervisor 2023.10.1 Operating System 11.1

card config:
type: custom:webrtc-camera
style: >-
  video {aspect-ratio: 16/9;} .mode {display: none} .shortcuts {top: 7%; left:
  2%;}
muted: true
ui: true
streams:
  - url: rtsp://User1:[email protected]:554/h264Preview_01_sub
    name: HD
  - url: rtsp://User1:[email protected]:554/h264Preview_01_main
    name: SD

[AlexxIT]

Please provide screenshots of what you are talking about

[banditto9]

I appreciate your prompt response! Here it is - 2 pixel like tiny bounding box: it's best visible during stream pre-load and when 4:3 video is put on a 16:9 display. Hope the link below works. Unfortunately it doesn't hide after the stream is started. At least visible under desktop (Chrome Windows) and Android HA client.

https://www.dropbox.com/scl/fi/ba3fq7k7o8uj6dthfidxj/Screenshot-2023-10-30-153303.png?rlkey=qcbp099vq152nn85cdzvzt16e&dl=0

[AlexxIT]

I don't know why you getting this bounding box in the full screen. Maybe it's problem with your browser or with another GUI integrations. I can't see it on all my browsers

I'll put this image here:

[banditto9]

Thank you for your response. Unfortunately, it happens on mobile as well (standard Android 13 with latest Chrome from the PlayStore). I use typical x86 HAOS setup with some add-ons and HACS integrations, latest versions with no custom modifications. The only potential conflict which can be in place is the Frigate addon with the older builtin version of the Go2RTC component as it uses video output. But this is my guess only.

[AlexxIT]

This moment strange

I have HA with picture-glance cards configured to the opened as separate cards

[banditto9]

Sorry for my bad explanation. On the main screen of HA I have separate picture-glance cards which show the picture from a cams which are rarely updated as a still picture ~every 4 second - this is to save traffic and not to use livestream on the main lovelace.

Picture-glance cards have virtual button which is simply a link to the separate lovelace page (like http://192.168.1.2:8443/lovelace/cam-garage) where the "type: custom:webrtc-camera" card is used. And when I do click on the WebRTC "fullscreen" button I see the white bounding line both on the desktop and mobile.

[AlexxIT]

I don't know. Maybe you using different frontend theme or custom JS or something similar.

[banditto9]

Hello and thanks for your feedback. I checked the related lovelace page - no theme is applied there, custom JS is not applied (at least by myself). I think this is due to the HA itself as "rounded" corners are a base for all elements in the lovelace. But I have no idea why the white color is active there. I tried to check this with the Developer option in Chrome but there are too many parameters in the CSS/JS applicable to the page so I was lost.

The "white bounding box" appears only in the fullscreen mode when I press "fullscreen" button in the lovelace card as on the screenshot attached. So the white bounding appears only from the webrtc custom card. When I open the livestream from the picture-glance by pressing on it the fullscreen works fine with no bounding box.

The difference between the "fullscreen" buttons is that I did a simple virtual input button to open a webrtc-card in a new lovelace to make it opened by width. But logically it shouldn't bring that "white bounding box"

• entity: input_button.cam_view_expand tap_action: action: navigate navigation_path: /lovelace/cam-garage

Core 2024.2.2 Supervisor 2024.01.1 Operating System 11.5 Frontend 20240207.1

[AlexxIT]

Show cam-garage tab yaml source. Maybe it's a problem (one card stretched to whole tab).

[banditto9]

Many thanks for your time and prompt response! Hare is a cut of yaml config related to the cam-garage lovelace tab and a card on it:

- theme: Backend-selected
    title: Cam garage
    path: cam-garage
    type: sidebar
    subview: true
    badges: []
    cards:
      - type: custom:webrtc-camera
        style: >-
          video {aspect-ratio: 16/9;} .mode {display: none} .shortcuts {top: 2%;
          left: 50%; background: black; border-radius: 25%;} .fullscreen
          {background: black; border-radius: 25%;} .pictureinpicture
          {background: black; border-radius: 25%;} .screenshot {background:
          black; border-radius: 25%;} .stream {background: black; border-radius:
          25%;} .volume {background: black; border-radius: 25%;}
        muted: true
        ui: true
        streams:
          - url: rtsp://User1:[email protected]:554/h264Preview_01_sub
            name: HD
          - url: rtsp://User1:[email protected]:554/h264Preview_01_main
            name: SD
        shortcuts:
          - name: Фото в Телеграм
            icon: mdi:camera-plus-outline
            service: switch.toggle
            service_data:
              entity_id: input_button.ao_garage_make_photo

[AlexxIT]

Maybe it came out in the Hass updates. I don't remember this frame being there before

[bonstio]

I too see this white border :(

[Dis90]

I was able to fix this problem by using card mod

Example

  - type: custom:webrtc-camera
    streams:
      - url: tapo1_hd
        name: HD
      - url: tapo1_sd
        name: SD
    ui: true
    muted: true
    style: >-
      .mode {display: none} .screenshot {display: none}
    digital_ptz:
      mouse_drag_pan: true
      mouse_wheel_zoom: true
      mouse_double_click_zoom: true
      touch_drag_pan: true
      touch_pinch_zoom: true
      touch_tap_drag_zoom: true
      persist: false
    card_mod:
      style: |
        ha-card {
          border: none !important;
          border-radius: 0px !important;
        }

[AlexxIT]

You can change any styles without card_mod

[Dis90]

Thanks for info. So everyone having this problem just add ha-card {border: none !important; border-radius: 0px !important;} to style and problem is fixed.