WebRTC移动端画面捕获异常：手机<video>标签显示黑屏求助

我之前也踩过一模一样的坑！结合你的描述，从几个核心点逐一排查，应该能解决问题：

1. 必须切换到HTTPS环境（本地调试除外） #

现在移动端主流浏览器（iOS Safari、Android Chrome等）都强制要求WebRTC API只能在安全上下文下运行，HTTP环境会直接限制媒体流的渲染能力——哪怕你摄像头硬件正常、权限也给了，流就是没法正常显示在video标签里。

• 开发调试阶段可以用localhost或127.0.0.1（这两个是浏览器豁免的安全上下文）；
• 生产环境必须部署HTTPS，用免费的Let's Encrypt证书就能快速搞定。

2. 适配移动端严格的Autoplay政策 #

移动端的自动播放规则非常严，单纯的autoplay标签属性几乎不起作用，必须依赖用户主动交互才能触发视频流播放：

• 不要一加载页面就调用getUserMedia，加个“开启摄像头”按钮，在按钮的click事件里再执行媒体流的获取和渲染逻辑；
• 给video标签加上muted playsinline属性，这俩是移动端视频正常播放的关键：

  <video autoplay muted playsinline></video>
  

  playsinline能让视频在页面内播放而非自动全屏（iOS尤其需要），muted可以绕过部分自动播放限制。

3. 检查getUserMedia的参数配置 #

确保你请求摄像头的参数是移动端设备支持的，避免设置过高的分辨率或不兼容的属性：

const constraints = {
  video: {
    facingMode: "user", // 前置摄像头，换成"environment"就是后置
    width: { ideal: 640, max: 1280 },
    height: { ideal: 480, max: 720 }
  }
};

如果参数太苛刻，设备找不到匹配的流，也会出现黑屏。另外一定要捕获错误，排查权限或参数问题：

navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => {
    const video = document.querySelector('video');
    video.srcObject = stream;
  })
  .catch(err => {
    console.error('摄像头访问失败:', err);
    // 这里可以给用户提示，比如权限被拒绝
  });

4. 确认摄像头权限是否真正生效 #

有时候浏览器提示授权了，但系统层面的权限没开。可以去设备的系统设置里，检查对应浏览器的摄像头权限是否开启——尤其是iOS，一旦你之前拒绝过权限，浏览器不会再弹窗提示，得手动去设置里打开。

5. 排查video标签的样式问题 #

偶尔不是流的问题，是CSS样式导致视觉上“黑屏”：比如标签被设为display: none、opacity: 0，或者宽高为0。可以先给video标签加个固定宽高和灰色背景，确认标签本身是可见的。

按上面的步骤逐一排查，应该就能解决移动端的黑屏问题了——我当时就是因为没加用户交互和HTTPS，折腾了好半天😅

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