HTML/Angular最高画质要求下摄像头流全设备加载异常问题

这类预览异常的本质是：getUserMedia成功仅代表系统给网页分配了摄像头权限、视频轨可以正常输出帧，不代表webview的渲染层能把视频帧绘制到页面的video元素上。Galaxy Note10+这类机型的问题属于硬件解码器/渲染层对高分辨率实时预览的兼容限制，不会触发常规的error事件，必须通过主动校验识别：

• 增加预览加载超时与帧有效性校验
  绑定流之后不要直接判定预览可用，加1.5s超时检测：如果超时后video元素的readyState小于2（即没有拿到可渲染的当前帧）、videoWidth/videoHeight为0，直接停止当前流，降级到更低分辨率重试。
• 增加首帧像素校验
  等video触发loadedmetadata事件后，把当前帧绘制到离屏canvas上，取画布中心区域的像素数据，如果所有像素值全为0（即黑帧、透明帧），说明预览实际没有正常渲染，同样触发降级逻辑。
  对应实现代码：

  private loadStream(stream: MediaStream) {
    this.lastStream = stream;
    const videoEl = this.video!.nativeElement;
    videoEl.srcObject = stream;
  
    // 预览加载超时检测
    const previewCheckTimer = setTimeout(() => {
      if (videoEl.readyState < 2 || videoEl.videoWidth === 0) {
        stream.getTracks().forEach(track => track.stop());
        this._requestCameraStream(2560, 1440, true);
      }
    }, 1500);
  
    videoEl.addEventListener('loadedmetadata', () => {
      clearTimeout(previewCheckTimer);
      // 首帧有效性校验
      const testCanvas = document.createElement('canvas');
      testCanvas.width = videoEl.videoWidth;
      testCanvas.height = videoEl.videoHeight;
      const ctx = testCanvas.getContext('2d');
      ctx?.drawImage(videoEl, 0, 0);
      
      let previewValid = false;
      try {
        const centerPixelData = ctx?.getImageData(
          Math.floor(testCanvas.width / 2 - 5),
          Math.floor(testCanvas.height / 2 - 5),
          10, 10
        ).data;
        previewValid = !!centerPixelData?.some(pixel => pixel !== 0);
      } catch (e) {}
  
      if (!previewValid) {
        stream.getTracks().forEach(track => track.stop());
        this._requestCameraStream(2560, 1440, true);
        return;
      }
  
      videoEl.play();
      this.ref.detectChanges();
    }, { once: true });
  }
  

• 不要硬编码分辨率重试梯度，在拿到流之后先调用视频轨的getCapabilities()方法，获取设备实际支持的分辨率列表，从高到低做梯度降级，避免硬编码的分辨率不在设备支持列表里导致的兼容问题。

原有实现的核心误区是将预览流分辨率和拍照输出分辨率绑定，实际上移动端摄像头管线完全支持预览、拍照走不同的分辨率配置，不需要为了高画质强行拉高预览流分辨率，正确实现逻辑如下：

• 预览流和拍照配置完全分离
  预览流单独选择适配设备屏幕的分辨率：计算设备屏幕物理像素的长边/短边，申请不超过屏幕分辨率、帧率稳定（30fps）的最高档位流做预览即可，通常1080P档位就能覆盖绝大多数机型的预览渲染需求，不会出现高分辨率预览无法渲染的问题，预览比例和摄像头传感器比例保持一致即可，完全不影响最终拍照画质。
• 用ImageCapture API直接获取原生高分辨率照片
  拍照环节不要从video元素做canvas截帧，直接调用浏览器原生的ImageCapture API，从视频轨直接请求摄像头硬件输出最高分辨率的原生照片，这个过程完全不受预览流分辨率限制，哪怕预览流是720P，只要摄像头硬件支持4K，就能输出4K画质的原图，且画质远好于canvas截帧，没有色彩偏差、缩放损失的问题。
  对应实现步骤：
  1. 预览流加载成功后，读取视频轨的能力参数，存储设备支持的最高拍照分辨率

  const videoTrack = stream.getVideoTracks()[0];
  const trackCapabilities = videoTrack.getCapabilities();
  // 存储最高拍照分辨率
  this.maxCaptureWidth = trackCapabilities.width?.max || 1920;
  this.maxCaptureHeight = trackCapabilities.height?.max || 1080;
  

  2. 拍照时直接调用takePhoto方法传入最高分辨率参数

  async capturePhoto() {
    const videoTrack = this.lastStream.getVideoTracks()[0];
    const imageCapture = new ImageCapture(videoTrack);
    // 直接获取最高分辨率原图
    const photoBlob = await imageCapture.takePhoto({
      imageWidth: this.maxCaptureWidth,
      imageHeight: this.maxCaptureHeight
    });
    // 后续对photoBlob做存储、上传等处理即可
  }
  

• 兜底兼容：对于不支持ImageCapture API的老旧webview/设备，再降级到canvas截帧方案，此时预览流已经选了设备可正常渲染的最高分辨率，截帧画质也能满足常规需求。

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