Angular 15中AWS IVS客户端无法实现视频背景模糊且仅渲染首帧

核心问题排查 #

AWS IVS仅渲染首帧的情况，主要源于以下几个关键点：

• Canvas尺寸设置错误，导致绘制区域与实际捕获区域不匹配
• captureStream 过早获取，此时Canvas尚未开始持续绘制帧
• 异步帧处理与requestAnimationFrame的兼容性问题，导致帧更新未被正确捕获

具体修复步骤 #

1. 修正Canvas尺寸设置 #

Canvas元素的宽高需通过width和height属性设置，而非VIDEO_WIDTH/VIDEO_HEIGHT（这是<video>元素的专属属性）：

// 替换原尺寸设置代码
this.blurredVideo.nativeElement.width = VIDEO_WIDTH;
this.blurredVideo.nativeElement.height = VIDEO_HEIGHT;

2. 延迟获取Canvas流，确保帧绘制已启动 #

将captureStream的逻辑移到帧处理函数启动之后，保证Canvas已有持续绘制的内容：

if (this.segmenter) {
  const processFrame = async (): Promise<void> => {
    // 先绘制原始帧作为 fallback，避免初始空白
    context.drawImage(this.cameraPreview.nativeElement, 0, 0, VIDEO_WIDTH, VIDEO_HEIGHT);
    
    try {
      // 提前获取分割结果，避免阻塞绘制流程
      const segmentationResult = await this.segmenter.segmentPeople(this.cameraPreview.nativeElement);
      await bodySegmentation.drawBokehEffect(
        this.blurredVideo.nativeElement,
        this.cameraPreview.nativeElement,
        segmentationResult,
        this.FOREGROUND_THRESHOLD,
        this.BLUR_AMOUNT,
        this.EDGE_BLUR_AMOUNT,
        this.FLIP_HORIZONTAL,
      );
    } catch (err) {
      console.error('帧处理失败:', err);
    }
    
    requestAnimationFrame(processFrame);
  };

  // 启动帧处理后再获取流，确保Canvas已有绘制内容
  requestAnimationFrame(async () => {
    await processFrame();
    const canvasStream: MediaStream = this.blurredVideo.nativeElement.captureStream(30);
    const newStream: MediaStream = new MediaStream();
    const currentAudioTrack: MediaStreamTrack = this.rtc.audioVideoTrack.getAudioTracks()[0];
    const canvasStreamTrack: MediaStreamTrack = canvasStream.getVideoTracks()[0];
    
    // 监听轨道状态，便于排查异常
    canvasStreamTrack.onended = () => console.warn('Canvas视频轨道已结束');
    
    newStream.addTrack(currentAudioTrack);
    newStream.addTrack(canvasStreamTrack);
    
    this.streamService.blurredVideoTrack.next(newStream);
  });
}

3. 优化异步帧处理逻辑 #

由于requestAnimationFrame不等待Promise完成，将分割结果的获取放在内部try-catch中，避免单个帧处理失败导致整个流程中断，同时确保每帧都能触发下一次绘制。

4. 额外验证与配置检查 #

• 确保cameraPreview元素的视频流已完全加载，可在loadedmetadata事件触发后再调用blurBackground
• 检查AWS IVS客户端的视频流配置，确认支持Canvas捕获的流格式（通常为VP8/VP9编码）
• 若仍存在帧更新问题，可尝试配合setInterval强制触发Canvas的帧捕获，保证流的连续性

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