I want to mute an iFrame audio output in my Angular App. I tried some solutions, but they didn't work for me.
Here is my iFrame:
<iframe allow="camera; microphone; display-capture; autoplay; clipboard-write" src="https://meet.jit.si/a#jitsi_meet_external_api_id=0&config.prejoinPageEnabled=false&config.disableDeepLinking=true&interfaceConfig.TOOLBAR_ALWAYS_VISIBLE=true&interfaceConfig.TOOLBAR_BUTTONS=%5B%5D&userInfo.displayName=%22Gustavo%20Paciente%22&appData.localStorageContent=null" name="jitsiConferenceFrame0" id="jitsiConferenceFrame0" allowfullscreen="true" style="height: 778px; width: 1350px; border: 0px;"></iframe>
And here are the "solutions" I've already tried:
1 - In this case, the volume attribute is set to html, but the audios it no muted:
const iframe: any = document.getElementById('jitsiConferenceFrame0');
iframe.setAttribute("volume", "0");
2 - In this case, the "contentDocument" is null
const iframe: any = document.querySelector('iframe[id="jitsiConferenceFrame0"]');
iframe.contentDocument.getElementById("muted").checked = true;
iframe.contentWindow.speaker[0].muted = true;
iframe.contentWindow.speaker[1].muted = true;
3 - In this case, "iframe.contentDocument" (line 2) is null and "iframe.contentWindow" exists, but "iframe.contentWindow.document" (line 2) is also null.
var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var MediaSource = innerDoc.getElementById('mediaElem');
MediaSource.muted=true;
I think I'm not so far of getting it solved, but still need some help. How to solve it?
EDIT Here is my iframe object