navigator.mediaDevices.getUserMedia新手机失效求助：华为P10等设备视频流异常

我之前在做移动端视频播放项目时，也碰到过类似的跨机型兼容性问题，结合你的描述，给你几个实际可行的排查方向和解决办法：

1. 优先排查视频编码格式兼容性 #

移动端不同机型的浏览器对视频编码的支持差异非常大，华为P10、iPhone 6s这类机型可能对高规格的编码支持不佳：

• 建议把视频流换成Baseline或Main Profile的H.264编码，这是目前移动端兼容性最广的选择，避免使用VP9、AV1这类较新的编码（旧机型普遍支持不好）。
• 可以用ffmpeg命令快速查看视频编码信息：

  ffmpeg -i your-video-stream-url
  

  如果编码不符合要求，用ffmpeg转码即可，比如转成Baseline Profile的H.264：

  ffmpeg -i input.mp4 -vcodec libx264 -profile:v baseline -level 3.0 output.mp4
  

2. 调整视频加载与播放的事件监听逻辑 #

你提到在ondurationchange阶段卡顿15秒，且canplay触发后无视频输出，这很可能是浏览器缓冲区数据不足导致的：

• 不要依赖canplay事件触发播放，换成更可靠的canplaythrough事件（该事件触发时，浏览器认为视频可以流畅播放完毕）。
• 同时设置视频的preload属性为auto，让浏览器提前加载视频数据：

  const videoElement = document.getElementById('target-video');
  videoElement.preload = 'auto';
  
  videoElement.addEventListener('canplaythrough', async () => {
    try {
      await videoElement.play();
    } catch (error) {
      console.error('播放启动失败:', error);
    }
  });
  

3. 解决Firefox反复请求权限的问题 #

Firefox移动端对媒体权限的管控非常严格，反复弹窗通常是这两个原因：

• 非HTTPS环境：确保你的网页通过HTTPS部署（localhost开发环境除外），HTTP环境下Firefox会频繁触发权限校验。
• 无用户交互触发播放：现代浏览器要求媒体播放必须由用户主动交互（点击、触摸等）触发，不能自动播放。把播放逻辑绑定到用户操作上：

  document.getElementById('play-btn').addEventListener('click', async () => {
    try {
      await videoElement.play();
    } catch (err) {
      console.error('权限或播放错误:', err);
    }
  });
  

4. 尝试更新浏览器或系统 #

华为P10的默认浏览器如果是旧版本，可能存在内核级的视频解析bug，尝试把系统自带浏览器更新到最新版本；iPhone 6s可以升级到支持的最高iOS版本，通常系统更新会修复浏览器的兼容性问题。

如果以上方法都没有解决问题，可以提供你的视频播放代码片段、视频流的协议（HTTP/HTTPS/HLS等）和编码详情，这样能更精准地定位问题。

内容的提问来源于stack exchange，提问作者Heikki Kärpinlehto