在Safari 14中使用LiveKit调用createLocalScreenTracks失败求助

核心原因 #

Safari 14.1.2对屏幕共享有严格的交互触发限制，且旧版浏览器的媒体API与现代标准存在差异，再加上代码调用方式不符合LiveKit的预期，共同导致了无弹窗、发布报错的问题。

修复步骤 #

1. 强制屏幕共享调用绑定用户主动交互 #

Safari 14.x不允许在非用户触发的场景（如页面自动加载、定时器回调、非用户触发的异步流程）中调用屏幕共享API，必须绑定到点击、触摸等用户主动操作事件内。

修改代码，将屏幕共享逻辑放到按钮点击事件中：

// 假设页面有一个用于触发共享的按钮
document.getElementById('start-share-btn').addEventListener('click', async () => {
  try {
    shareScreenTracks = await createLocalScreenTracks({ audio: false });
    // 发布逻辑也需放在该交互事件内
    room.localParticipant.publishTrack(shareScreenTracks[0]);
  } catch (err) {
    console.error('屏幕共享失败:', err);
  }
});

2. 传递正确的Track对象给publishTrack #

你的代码中传递了原生mediaStreamTrack，但LiveKit的publishTrack方法需要接收它自身封装的LocalTrack实例（即createLocalScreenTracks返回数组中的元素），直接传原生Track会触发内部逻辑错误。修正如下：

// 错误写法
// room.localParticipant.publishTrack(shareScreenTracks[0].mediaStreamTrack);

// 正确写法
room.localParticipant.publishTrack(shareScreenTracks[0]);

3. 适配Safari 14.x的旧版屏幕共享API #

LiveKit 1.4.1对旧版Safari的适配可能存在不足，可手动做兼容处理，同时检查浏览器权限：

• 确认Safari偏好设置中，当前网站已被授予屏幕共享权限（路径：偏好设置->网站->屏幕共享）。
• 手动兼容旧版API的示例（若LiveKit封装未生效）：

import { LocalVideoTrack } from 'livekit-client';

async function getSafariCompatibleScreenTrack() {
  let stream;
  if (navigator.mediaDevices.getDisplayMedia) {
    stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
  } else if (navigator.webkitGetDisplayMedia) {
    stream = await navigator.webkitGetDisplayMedia({ video: true });
  } else {
    throw new Error('当前浏览器不支持屏幕共享');
  }
  return new LocalVideoTrack(stream.getVideoTracks()[0]);
}

4. 添加错误捕获定位问题 #

在调用流程中加入try-catch，捕获具体错误信息，便于精准排查：

try {
  shareScreenTracks = await createLocalScreenTracks({ audio: false });
  room.localParticipant.publishTrack(shareScreenTracks[0]);
} catch (error) {
  console.error('屏幕共享/发布错误详情:', error.message, error);
}

额外说明 #

Safari 14.x的屏幕共享功能本身存在诸多限制，比如不支持共享音频、对触发场景要求严苛。如果条件允许，建议升级到Safari 15及以上版本，可获得更完善的兼容性和功能支持。

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