iOS 11.2下iPhone摄像头推流到HTML元素失败求助

我之前帮开发者排查过类似的iOS 11.x WebRTC推流到Canvas黑屏的问题，结合你的场景——iPad Pro正常但iOS 11.2 iPhone黑屏，大概率是系统兼容性细节或者媒体流处理逻辑的问题，给你几个针对性的排查方向和修复方案：

1. 先确认iOS 11.x的getUserMedia权限触发规则 #

iOS 11对媒体权限的限制比后续版本更严格，必须通过用户主动交互（比如按钮点击）来触发getUserMedia调用，不能在页面加载完成后自动执行。如果你的代码是自动请求摄像头权限，那在iOS 11上会直接失败，表现为黑屏。

修复示例：

// 绑定到按钮点击事件，而不是window.onload
document.getElementById('startStreamBtn').addEventListener('click', async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    // 后续处理流
  } catch (err) {
    console.error('权限请求失败:', err);
  }
});

2. 适配iOS 11的Canvas渲染逻辑 #

iOS 11的Canvas在捕获MediaStream帧时存在兼容性bug，直接在video加载后绘制可能无法获取到画面。建议：

• 给video标签添加playsinline和muted属性（iOS 11不允许非静音视频自动inline播放，全屏后Canvas无法捕获帧）
• 监听video的play事件，并且检查readyState为HAVE_ENOUGH_DATA后再执行绘制

完整的HTML+JS示例：

<video id="cameraVideo" autoplay playsinline muted width="640" height="480"></video>
<canvas id="outputCanvas" width="640" height="480"></canvas>
<button id="startBtn">启动推流</button>

const video = document.getElementById('cameraVideo');
const canvas = document.getElementById('outputCanvas');
const ctx = canvas.getContext('2d');

document.getElementById('startBtn').addEventListener('click', async () => {
  try {
    // 限制分辨率，避免iOS 11无法处理过高规格的流
    const constraints = {
      video: {
        width: { ideal: 640 },
        height: { ideal: 480 },
        frameRate: 30,
        facingMode: 'user'
      }
    };
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    video.srcObject = stream;

    video.addEventListener('play', () => {
      function renderFrame() {
        // 确保视频已加载足够数据再绘制
        if (video.readyState === 4) {
          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        }
        requestAnimationFrame(renderFrame);
      }
      renderFrame();
    });
  } catch (err) {
    alert(`摄像头访问失败: ${err.message}`);
  }
});

3. 检查HTTPS证书的兼容性 #

iOS 11对旧版SSL/TLS证书的信任度较低，如果你的Ubuntu 16.04服务器使用的是过时的加密算法（比如SHA-1证书），可能会导致媒体流传输异常。建议：

• 确认证书使用SHA-256及以上的哈希算法
• 检查服务器的TLS版本是否支持TLS 1.2及以上（iOS 11开始不再默认支持TLS 1.0/1.1）

4. 避免使用iOS 11不支持的媒体约束 #

iOS 11对部分高级媒体约束的支持有限，比如deviceId指定摄像头、过高的分辨率（如1080P）都可能导致黑屏。建议先使用最基础的约束测试，再逐步添加高级配置。

如果以上方案都无法解决，可以尝试捕获navigator.mediaDevices的错误信息，或者在iOS Safari的开发者工具（需要连接Mac）中查看控制台日志，通常能找到具体的报错原因。

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