iframe allow attribute not working on mobile browsers

Ask the community
,
1

Need to give permission to use the microphone on a website using the iframe allow setattribute. it works but not on most mobile (tested and works on samsung browser but not chrome, safari etc)

Big shout out to Yisrael as this is essentially his iframe set attribute code example

<script>
    setTimeout(function () {
        var iframes = document.querySelectorAll("iframe");
        console.log(iframes);
        iframes[1].setAttribute("allow", "microphone");
        var y = iframes[1].parentNode;
        var x = iframes[1]
        x.setAttribute("allow", "microphone");
        y.appendChild(x);
		
		iframes[3].setAttribute("allow", "microphone");
        var yv = iframes[3].parentNode;
        var xv = iframes[3]
        xv.setAttribute("allow", "microphone");
        yv.appendChild(xv);
    }, 4000);
</script>

Notes:

  1. It seems to work on any desktop browser.
  2. The code is placed in custom code and finds the specific iframe that need to be given permisson to on a specific page.
  3. The issue is on mobile browsers the request to use the microphone never appears in normally used browsers like Chrome, But does show up in example samsung browser
  4. The phones do have permissions set correctly to actually allow the question to be asked.
  5. The iframe is running transcription
  1. there seem to be no limitation caused by the speechRecognition itself. as the request for microphone is outright never triggered as if the setAtrribute is never ran.

Any insight or knowledge would be greatly appriciated :smiley:

2

So, I don’t have personal knowledge of this but in reading out of curiosity this seems to be related to privacy policies specific to those browsers but I’m also seeing that using “allow” should work in this case so long as there is no more restrictive policy overriding.

Have you tried microphone *?

Would you mind posting what the html looks like once it’s rendered?
Also is it possible to get any error/console logging specific to mobile in your case?

3

Regarding this iframe, is it a Wix embedded widget or maybe you created it in a custom element? (I think the latter may be more permissive).

4

I actually did it as a embedded widget using the code aspect. meaning i made an iframe, build the html,css,javascript in the code section. i find this fairly simple to do. The actual permission granted to give permission for the iframe is given through the custom code.

Do you have some insight into a custom element that would work with giving permission for both desktop and mobile though ? might be able to build around that then.

5

Here is how its shown, just fine on both mobile and desktop visually. When you click the button the allow triggeres on desktop and your asked for permission to use your microphone as the javascript code in the html wants to listen to it. as I understand it should work. From my understanding its the “best” method to use cross privacy policies allowing this to happen

I did try with the microphone * also. I saw someone reference to it in code but never quite understood what the star actually would do.

6

@clsnlsen I don’t know about the specific question you asked.
But since the Wix embedded widget iframe has a different url domain than the parent page maybe it’s less permissive (cross-origin).
I’d try using custom element (if you must have an iframe, I’d create an iframe in the custom element).

7

Now I see what you wrote to Amanda, so you probably don’t need an iframe at all and you can create everything in the custom element (with navigator.mediaDevices.getUserMedia({ audio: true })
)