Javascript Media Source Extensions 在iPad Safari运行报错问题咨询

报错原因 #

• 核心原因是Xcode内置iPad模拟器的Safari浏览器默认配置与真机不一致：即便你选择的模拟器系统是iPadOS 13+，Media Source Extensions（MSE）属于实验性功能，在模拟器中默认是关闭状态，因此全局不存在MediaSource变量
• 次要排查点：你创建模拟器时选择的iPadOS系统版本低于13，该版本本身原生不支持MSE特性

可行解决方案 #

• 第一步：先确认当前模拟器运行的iPadOS系统版本 ≥ 13.0，版本过低的话直接创建更高版本的模拟器即可
• 第二步：手动开启模拟器的MSE特性开关：
  1. 打开模拟器自带的「设置」App
  2. 下滑找到「Safari浏览器」选项，进入后拉到最底部点击「高级」
  3. 选择「实验性功能」，找到所有和Media Source Extensions相关的选项，全部开启后重启Safari浏览器即可
• 第三步：开发时增加特性检测的降级逻辑，避免直接调用导致报错：

// 先做特性校验再执行对应逻辑
if ('MediaSource' in window && typeof MediaSource.isTypeSupported === 'function') {
  const mediaSource = new MediaSource()
  // 正常执行MSE相关业务逻辑
} else {
  // 触发降级逻辑：比如直接使用video标签加载原生视频流、或者提示用户使用真机测试
  const videoEle = document.querySelector('video')
  videoEle.src = '你的视频直链地址'
}

• 补充建议：涉及音视频相关的特性测试尽量使用真机完成，Xcode模拟器的浏览器特性配置和真机存在较多差异，正式上线前真机测试的结果才准确。

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