Node.js开发Twilio视频通话iOS Safari加入房间后本地视频黑屏问题

问题原因 #

iOS Safari对媒体设备的访问有独占性限制，你当前的代码中，预览用的媒体流是单独调用getUserMedia获取的，Twilio Video SDK在连接房间时会默认重新申请摄像头权限创建新的媒体流用于传输，旧的预览流会被系统主动中断，所以本地预览会变成黑屏。

解决方案 #

按以下步骤修改代码即可修复：

1. 让Twilio SDK复用现有本地流
   修改Video.connect的传参，将你已经拿到的预览流的轨道直接传入SDK，避免SDK重新创建流：

// 原来的代码
// return Video.connect(token, { name: ROOM_NAME });
// 修改为
return Video.connect(token, {
  name: ROOM_NAME,
  tracks: Array.from(localStream.getTracks())
});

2. 加入房间后重新绑定预览流
   在房间连接成功的回调中，手动重新给预览video绑定流并触发播放，避免Safari自动暂停视频：

.then((room) => {
  // 原有逻辑保留
  videoRoom = room;
  room.participants.forEach(participantConnected);
  room.on('participantConnected', participantConnected);
  room.on('participantDisconnected', participantDisconnected);
  room.once('disconnected', (error) =>
    room.participants.forEach(participantDisconnected)
  );
  joinRoomButton.disabled = true;
  leaveRoomButton.disabled = false;
  // 新增以下代码
  video.srcObject = localStream;
  video.play().catch(err => console.log('本地预览播放失败', err));
})

3. 可选优化：升级Twilio SDK版本
   你当前使用的2.3.0版本SDK已经发布多年，对iOS 14及以上版本的Safari适配存在已知问题，建议升级到最新的2.x稳定版本，无需修改现有逻辑即可兼容更多iOS版本。

补充注意事项 #

• 确保点击加入房间按钮时，localStream已经初始化完成，可在点击事件开头加判断，如果localStream不存在则先等待getUserMedia完成再执行后续逻辑，避免空值报错。
• video标签的muted、playsinline属性不要删除，这两个是iOS Safari允许视频自动播放的必要条件。

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