Angular中使用JS/TS实现Jitsi iframe音频输出静音

问题背景 #

需要在Angular应用中将嵌入的Jitsi Meet iframe的音频输出设置为静音，此前尝试的三类方案均未生效。
当前使用的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>

已尝试方案的失效原因 #

之前尝试的三类方案均存在原理性错误，无法生效：

• 给iframe标签设置volume属性为0：iframe本身不是audio/video类媒体元素，不存在原生volume属性，直接设置该属性不会对iframe内部加载的内容产生任何作用。
• 访问iframe的contentDocument、contentWindow.document操作内部元素：该操作会被浏览器同源策略直接拦截，由于嵌入的Jitsi页面属于第三方域名，和当前Angular应用域名不一致，浏览器会返回null禁止跨域DOM访问，所有直接操作iframe内部元素的路径均不可行。

可行实现方案 #

方案1：使用Jitsi官方External API（推荐，无跨域问题，兼容性最好） #

当前使用的iframe src中已经携带jitsi_meet_external_api_id=0参数，说明Jitsi本身已经预留了外部API通信能力，基于postMessage实现跨域通信，不需要操作内部DOM即可发送控制指令。
Angular中实现步骤：

1. 在使用Jitsi的组件中声明API类型，避免TS编译报错，动态加载官方API脚本后初始化实例，原有iframe的配置项可以直接传入API初始化参数中：

declare var JitsiMeetExternalAPI: any;

@Component({
  selector: 'app-jitsi-container',
  template: `<div id="jitsi-wrap"></div>`
})
export class JitsiComponent implements OnInit, OnDestroy {
  private jitsiApi: any;

  ngOnInit(): void {
    // 动态加载Jitsi外部API脚本
    const apiScript = document.createElement('script');
    apiScript.src = 'https://meet.jit.si/external_api.js';
    apiScript.onload = () => {
      // 初始化API实例，配置和原有iframe参数保持一致
      this.jitsiApi = new JitsiMeetExternalAPI('meet.jit.si', {
        roomName: 'a',
        parentNode: document.getElementById('jitsi-wrap'),
        width: 1350,
        height: 778,
        configOverwrite: {
          prejoinPageEnabled: false,
          disableDeepLinking: true
        },
        interfaceConfigOverwrite: {
          TOOLBAR_ALWAYS_VISIBLE: true,
          TOOLBAR_BUTTONS: []
        },
        userInfo: {
          displayName: 'Gustavo Paciente'
        }
      });
    };
    document.body.appendChild(apiScript);
  }

  // 任意需要触发静音的逻辑中调用该方法即可
  setMute(status: boolean): void {
    if (!this.jitsiApi) return;
    // 静音本地麦克风采集
    this.jitsiApi.executeCommand('toggleAudio', status);
  }

  ngOnDestroy(): void {
    this.jitsiApi?.dispose();
  }
}

方案2：使用iframe原生muted属性（快速实现，适合现代浏览器场景） #

Chrome 63+、Firefox 56+等现代浏览器支持iframe原生muted布尔属性，直接在iframe标签上添加该属性即可让嵌入内容默认静音，不需要额外写JS逻辑：

<iframe 
  muted
  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>

如果需要动态切换静音状态，可以直接通过JS操作iframe的muted属性：

const iframe = document.getElementById('jitsiConferenceFrame0') as HTMLIFrameElement;
// 设置为静音
iframe.muted = true;
// 取消静音
iframe.muted = false;

注意：该方案不兼容IE、旧版Edge等低版本浏览器，如果需要兼容老旧浏览器请选择方案1。

内容的提问来源于stack exchange，提问作者Liu