iOS设备中navigator.mediaDevices.getUserMedia调用后HTML5 Video黑屏问题

我之前碰到好几个开发者遇到过一模一样的问题：本地用getUserMedia测试视频显示正常，但用Twilio P2P JS发起会话时，iOS设备上的HTML5 Video标签就黑屏，其他设备却没问题。结合iOS的媒体播放限制和Twilio SDK的特性，给你几个关键的解决方向：

1. 强制给Twilio视频轨道设置playsinline #

iOS对视频内嵌播放的限制非常严格，哪怕你给本地video标签加了playsinline，Twilio在创建/传递视频轨道时如果没明确指定这个参数，iOS还是会把视频推到全屏播放器，导致页面里的video标签黑屏。

你需要在Twilio初始化本地轨道或者连接会话时，显式配置playsinline: true：

// 方式1：创建本地轨道时指定
Twilio.Video.createLocalTracks({
  video: { playsinline: true }
}).then(localTracks => {
  // 后续加入房间的逻辑
});

// 方式2：连接会话时全局配置
Twilio.Video.connect(yourToken, {
  video: { playsinline: true },
  audio: true,
  // 其他会话配置
});

2. 确保远程轨道就绪后再赋值给video标签 #

本地测试时getUserMedia的流是即时的，但Twilio的远程轨道有订阅延迟，过早把未就绪的轨道赋值给srcObject会导致iOS无法解析流，出现黑屏。

调整你的轨道订阅逻辑，确保在轨道完全订阅后再操作video标签：

room.on('participantConnected', participant => {
  participant.on('trackSubscribed', track => {
    if (track.kind === 'video') {
      const videoEl = document.getElementById('myVideo');
      // 注意：这里用track.mediaStreamTrack构建新的MediaStream
      videoEl.srcObject = new MediaStream([track.mediaStreamTrack]);
      // 重新确认iOS需要的核心属性
      videoEl.setAttribute('playsinline', '');
      videoEl.setAttribute('muted', '');
      videoEl.setAttribute('autoplay', '');
      // 主动调用play，处理iOS的自动播放限制
      videoEl.play().catch(err => {
        console.error('视频播放失败:', err);
        // 可以在这里提示用户手动触发播放（如果自动播放被浏览器阻止）
      });
    }
  });
});

3. 检查HTTPS环境和权限状态 #

iOS要求所有媒体操作必须在HTTPS环境下（localhost开发环境除外），如果你的测试服务器是HTTP，媒体流会被浏览器拦截，直接黑屏。

另外，虽然本地测试权限正常，但P2P会话时可能权限状态有异常，建议在会话初始化前主动检查相机权限：

navigator.permissions.query({ name: 'camera' }).then(status => {
  if (status.state !== 'granted') {
    alert('请先授予相机权限才能发起视频会话');
  }
});

4. 修正video标签的属性写法 #

你的HTML里controls="false"的写法在iOS上可能存在兼容性问题，建议直接移除这个属性（默认不显示控件），或者使用标准的布尔属性写法：

<video id="myVideo" allow="camera;microphone" class="silhouetteVideo" autoplay playsinline></video>

5. 升级Twilio JS SDK到最新稳定版 #

旧版本的Twilio SDK可能存在iOS 15+的适配bug，建议更新到官方最新的稳定版，很多iOS特定的媒体播放问题在新版本里已经修复。

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