How to set the muted attribute of a video?

Learn
1

I’ve been doing some WebRTC video-conf stuff this week. I’m now trying to do a minimalist elm interface for the working JS prototype but I’m struggling with some things and was hopping some of you would know how to proceed, maybe @Dan_Abrams?

I’m just starting the UI part in elm. For that I’m putting some videos with autoplay but I’m struggling to have them actually autoplay. I’m aware of the capture / user interaction / muted / playsinline requirements but I’m actually struggling to set a muted attribute. Whether I’m using attribute "muted" "" or attribute "muted" "muted" I’m always getting the warning

Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted.

Html.video
    [ HA.autoplay True
    , HA.loop True
    , HA.attribute "muted" ""
    , HA.attribute "playsinline" "playsinline"
    ]
    [ Html.source [ HA.src "video.mp4", HA.type_ "video/mp4" ] [] ]

Do you know a solution for this, are there more pitfalls I’m going to encounter while trying to build the UI with elm? (I don’t mind doing most stuff with ports, I’d just like to have it working).

2 Likes
2

I recently did this to test an autoplayed video and for some reason, it seems to only work as a property:

Html.Attributes.property "muted" (Json.Encode.bool True)

For example (with elm-ui):
https://ellie-app.com/8TggqPpK2qha1

6 Likes
3

@dmy is right, use a Boolean property not an attribute.

4

If you’re doing webrtc, you probably can get around the browser autoplay policies by using ports to request the mediaDevices getUserMedia() method before adding it as a source to the player. The user has to click to approve the use of the microphone/camera.

There are some other pitfalls: you’re pretty quickly going to find that you want users to be able to pick from different mics/webcams, so you’re going to need to use the enumerateDevices() method. But there’s a gotcha here, it’ll return empty strings for the labels and ids if the capture media stream isn’t already playing on a media element (this is to prevent fingerprinting).

The solution to this is to grab the default mic/camera combo, attach it to a media element and play, then enumerateDevices().

There are bunch of pitfalls to the webrtc offer/answer/iceCandidate stuff. DM me if you’re interested and I can send you some research materials I put together and help you along. It’s more an overview of the complex parts of the Webrtc ecosystem, it’s not elm specific.

6 Likes
5

Indeed I realized that ^^. If you want to have a look, I’ve been following the “perfect negotiation” pattern. My implementation is here: GitHub - mpizenberg-archived/allo. But I’ll make another post about that when I’m finished integrating it with the Elm ui.

6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.