`muted` option makes no difference

[felipecrs]

I'm using the latest (3.2.1), and the muted option simply makes no difference: the audio is always muted no matter what:

https://github.com/AlexxIT/WebRTC/assets/29582865/d61583c3-771b-4597-bcb7-afd4bd09effa

[felipecrs]

@AlexxIT if I change the following lines:

https://github.com/AlexxIT/WebRTC/blob/359e3ecea9ddbda100c248b812b7f16a05e3732d/custom_components/webrtc/www/video-rtc.js#L161-L165

To:

            if (!this.video.muted) {
-               this.video.muted = true;
+               this.video.muted = false;
                this.video.play().catch(er => {
                    console.warn(er);
                });

Then the audio starts unmuted, but it also starts paused by default.

[felipecrs]

Ok, I think I understood what that piece of code is doing. It's actually falling back to muted audio if Chrome's autoplay block is detected.

I just don't understand why it works in go2rtc's stream page normally, and also why it works with Frigate Card.

[alexcodito]

Facing the same issue on Firefox even with this enabled:

[felipecrs]

One workaround is to use the WebRTC card within the Frigate Card, with the Frigate Card configured to auto unmute.

[AlexxIT]

This is a very complex and confusing issue. Different browsers allow audio+autoplay for completely different reasons. This may depend on how the page is opened (whether the user clicked somewhere) and how often the user opens the page. If it worked on the old version and stopped working on the new version - we need to run some tests and understand the difference in JS code.

[stplatt]

I'm seeing it in chrome and android webview. It works ok with version 3.1.1, the issue started with 3.2.1. I downgraded to 3.1.1 and it's working as expected again

[mikedrawback]

Same here, had to downgrade to 3.1.1

[Mr-HaleYa]

The Chrome update broke a lot of platforms auto-play. I use Pandora radio on my desktop through Chrome and even they added a thing recently saying autoplay may be broken but as you use the site more then Chrome will "learn" what you want and autoplay should start functioning again as normal.

[AlexxIT]

@Mr-HaleYa where you get this screenshot?

[Mr-HaleYa]

At the bottom of this page https://help.pandora.com/s/article/Chrome-Troubleshooting-1519949296244?language=en_US

[a20691]

The Chrome update broke a lot of platforms auto-play. I use Pandora radio on my desktop through Chrome and even they added a thing recently saying autoplay may be broken but as you use the site more then Chrome will "learn" what you want and autoplay should start functioning again as normal.

This happened to me. At first it was never unmuted, after a few hours trying to get around the situation it started to work perfectly, after two days without using it, it didn't work again. So it makes sense to be some kind of Chrome memory function.

[luzik]

I have 4 webrtc cards with:

muted: true
mode: webrtc

On every browser refresh mute icon is muted or unmuted (seams random) - independently from other cards

uuuu umuu umum uuuu uumu ..just random on every browser refresh

unmuted cards do not play any sound, and pressing mute button do not change anything (even icon do not change to muted state) Firefox here

[Takst3in]

Hi all!

I'm casting a webrtc_camera card on a dashboard in panel mode, to my Nest Hub, as a baby-cam stream. The stream always comes up with the "muted ON button", I have to press the mute button to get sound.

Suspect this is related to this bug, however downgrading to other versions (3.2.1/3.2.0/3.1.1) does not resolve the issue, also editing the line (true/false) "this.video.muted = true;" in /webrtc/www/video-rtc.js file also does not make any difference.

I'm casting the dashboard via DashCast (HA Continuesly Casting Dashboard) integration.

[stplatt]

Workaround is to use the Frigate card with the webrtc-card provider. The mute settings work properly with that setup

[Takst3in]

Workaround is to use the Frigate card with the webrtc-card provider. The mute settings work properly with that setup

Do you have a template configuration for that setup?

[felipecrs]

This is the one I use:

The dashboard:

views:
  - title: Home
    type: panel
    badges: []
    cards:
      - type: custom:frigate-card
        cameras:
          - live_provider: webrtc-card
            webrtc_card:
              url: camera_03
              style: |
                video {aspect-ratio: 16/9; object-fit: fill;}
                .mode {display: none}
            camera_entity: camera.video_porteiro
        view:
          default: live
        live:
          auto_play: all
          auto_unmute: all
          controls:
            builtin: false
            title:
              mode: none
          zoomable: true
          layout:
            fit: cover
            position:
              x: 0
              'y': 0
          lazy_unload: all
        menu:
          buttons:
            cameras:
              enabled: false
            frigate:
              enabled: false
            fullscreen:
              enabled: false
            media_player:
              enabled: false
            play:
              enabled: true
            microphone:
              enabled: false
            live:
              enabled: false
            mute:
              enabled: true
          style: overlay
          position: top
          alignment: right
          button_size: 80
        dimensions:
          aspect_ratio_mode: static
          aspect_ratio: '16:9'
        elements:
          - type: custom:frigate-card-menu-state-icon
            entity: cover.porta
            tap_action:
              action: toggle
            priority: 51
        performance:
          profile: low

How I call the service:

service: cast.show_lovelace_view
data:
  entity_id: media_player.sala_home
  view_path: "0"
  dashboard_path: video-porteiro

The result:

https://github.com/dermotduffy/frigate-hass-card/assets/29582865/e0e77aea-e555-4978-8e7b-20a745034e1a

Refs https://github.com/dermotduffy/frigate-hass-card/issues/1231

[stplatt]

Workaround is to use the Frigate card with the webrtc-card provider. The mute settings work properly with that setup

Do you have a template configuration for that setup?

type: custom:frigate-card
cameras:
  - live_provider: webrtc-card
    engine: generic
    id: Nursery
    webrtc_card:
      url: camera.nursery_go2rtc
      ui: false
      background: false
      digital_ptz:
        mouse_drag_pan: true
        mouse_wheel_zoom: false
        mouse_double_click_zoom: true
        touch_pinch_zoom: true
        touch_drag_pan: true
        touch_tap_drag_zoom: true
      ptz:
        opacity: 0.5
        service: amcrest.ptz_control
        data_left:
          entity_id: camera.nursery
          movement: left
        data_right:
          entity_id: camera.nursery
          movement: right
        data_up:
          entity_id: camera.nursery
          movement: up
        data_down:
          entity_id: camera.nursery
          movement: down
        data_zoom_in:
          entity_id: camera.nursery
          movement: zoom_in
        data_zoom_out:
          entity_id: camera.nursery
          movement: zoom_out
      style: >-
        .header {top: 6px; right: 5px} .mode {position: absolute; top: 0px;
        right: 5px} .shortcuts {left: 6px: top: 6px; right: unset; display:
        flex; flex-direction: row; gap: 10px; opacity: 0.7; background: rgba(0,
        0, 0, 0.25); border-radius: 5px}
live:
  controls:
    builtin: false
  draggable: false
  zoomable: false
  auto_unmute: all
menu:
  buttons:
    frigate:
      enabled: false
    cameras:
      enabled: false
    live:
      enabled: false
    mute:
      enabled: true
      alignment: opposing
    expand:
      enabled: true
    media_player:
      alignment: opposing
  alignment: left
  style: overlay
  position: bottom
dimensions:
  aspect_ratio_mode: static
elements:
  - type: icon
    title: Full room
    icon: mdi:application-brackets-outline
    tap_action:
      action: call-service
      service: amcrest.goto_preset
      service_data:
        entity_id: camera.nursery
        preset: 1
    style:
      top: 15px
      left: 15px
      color: rgba(255,255,255,0.7)
      background: rgba(0,0,0,0.25)
      border-radius: 20px
  - type: icon
    title: Windows
    icon: mdi:curtains
    tap_action:
      action: call-service
      service: amcrest.goto_preset
      service_data:
        entity_id: camera.nursery
        preset: 3
    style:
      top: 15px
      left: 50px
      color: rgba(255,255,255,0.7)
      background: rgba(0,0,0,0.25)
      border-radius: 20px
  - type: icon
    title: Bed
    icon: mdi:cradle
    tap_action:
      action: call-service
      service: amcrest.goto_preset
      service_data:
        entity_id: camera.nursery
        preset: 2
    style:
      top: 15px
      left: 85px
      color: rgba(255,255,255,0.7)
      background: rgba(0,0,0,0.25)
      border-radius: 20px
  - type: custom:frigate-card-menu-submenu
    icon: mdi:menu
    items:
      - title: Wake with sound
        entity: automation.wake_baby_monitor_if_noise_detected
        icon: mdi:robot
        tap_action:
          action: toggle
      - title: Show Evelyn's camera
        entity: input_boolean.show_evelyn_s_camera
        tap_action:
          action: toggle
      - title: Show nursery camera
        entity: input_boolean.show_nursery_camera
        tap_action:
          action: toggle

[mikedrawback]

I'm using Fully Kiosk browser and having this issue when I enable autoplay video and audio. It worked on version 3.1.1 and I have not updated the browser.

[mikedrawback]

I was able to fix my issue by commenting out this section at line 158 in video-rtc.js.

I then added a console.warn to the first catch to see what was happening.

    play() {
        this.video.play().catch((er) => {
              console.warn(er)
          /*  if (!this.video.muted) { 
                this.video.muted = true; 
                this.video.play().catch(er => {
                    console.warn(er);
                });
            }*/
        });
    }

The error was:

DOMException: The play() request was interrupted by a new load request.

This code is trying to catch an error caused by autoplay being blocked. In my case the error is caused by something else, but it still proceeds to mute the video even though I have muted: false in my config.

This code block should be more specific about the error we are trying to catch on that first call to this.video.play(), and also should check that it is obeying the configuration for the muted attribute.

[nortuzar]

I'm using Fully Kiosk browser and having this issue when I enable autoplay video and audio. It worked on version 3.1.1 and I have not updated the browser.

same thing here and now o cant downgrade to 3.1.1 from HA menu

[mikedrawback]

@nortuzar I am also using fully kiosk. The solution for now is to comment out the section below in the VideoRTC.play() function in video-rtc.js:

play() {
        this.video.play().catch(() => {
            /*
            if (!this.video.muted) {
                this.video.muted = true;
                this.video.play().catch(er => {
                    console.warn(er);
                });
            } */
        }); 
    }

You will have to go back and do this every time the integration is upgraded.

[codemunkie15]

@nortuzar I am also using fully kiosk. The solution for now is to comment out the section below in the VideoRTC.play() function in video-rtc.js:

play() {
        this.video.play().catch(() => {
            /*
            if (!this.video.muted) {
                this.video.muted = true;
                this.video.play().catch(er => {
                    console.warn(er);
                });
            } */
        }); 
    }

You will have to go back and do this every time the integration is upgraded.

This isn't working for me. The video still autoplays muted. What browser is this working in for you please?

EDIT:

It turns out my changes aren't being reflected. I've edit video-rtc.js in my custom_components/webrtc/www folder and restarted HA, but when I view the hosted file (http://xxxxxxxxx:xxxx/webrtc/video-rtc.js?v=1.8.0), the lines are not commented. I've tried an "Empty Cache and Hard Refresh" but nothing changes. Any ideas?

EDIT 2:

My browser was loading the compressed version of the library, video-rtc.js.gz. I deleted this file and then it loaded the uncompressed version with my changes and now it's working. Cheers!

[nortuzar]

@nortuzar I am also using fully kiosk. The solution for now is to comment out the section below in the VideoRTC.play() function in video-rtc.js:

play() {
        this.video.play().catch(() => {
            /*
            if (!this.video.muted) {
                this.video.muted = true;
                this.video.play().catch(er => {
                    console.warn(er);
                });
            } */
        }); 
    }

You will have to go back and do this every time the integration is upgraded.

This isn't working for me. The video still autoplays muted. What browser is this working in for you please?

EDIT:

It turns out my changes aren't being reflected. I've edit video-rtc.js in my custom_components/webrtc/www folder and restarted HA, but when I view the hosted file (http://xxxxxxxxx:xxxx/webrtc/video-rtc.js?v=1.8.0), the lines are not commented. I've tried an "Empty Cache and Hard Refresh" but nothing changes. Any ideas?

EDIT 2:

My browser was loading the compressed version of the library, video-rtc.js.gz. I deleted this file and then it loaded the uncompressed version with my changes and now it's working. Cheers!

@codemunkie15 thanks for the fix. I was using the frigate card to fix the issue, but on mi fire HD 7 i take several seconds to start showing the stream, with this card with mode: mse work great. Hope this can be fixed in the next release , thanks for the awesome card