Angular中如何使用ngx-webcam或兼容方案实现摄像头视频录制

关于ngx-webcam的录制能力说明 #

ngx-webcam原生不支持视频录制功能。这个库的核心定位是封装浏览器原生媒体设备API，快速实现摄像头权限申请、实时画面预览、单帧图片抓拍的能力，没有内置视频流编码、分片收集、文件导出的录制相关逻辑。

如果已经在项目中接入了ngx-webcam做预览，不需要额外替换库，可以直接复用它获取到的媒体流，搭配浏览器原生MediaRecorder API补全录制能力：

• 从ngx-webcam的流初始化回调中拿到MediaStream实例
• 初始化MediaRecorder实例绑定该媒体流，配置需要的视频编码格式
• 录制过程中监听dataavailable事件收集视频二进制分片
• 触发停止录制时，将收集到的分片合并为Blob对象，即可用于本地预览、下载或上传到服务端

核心实现代码参考：

import { Component, ViewChild } from '@angular/core';
import { WebcamComponent } from 'ngx-webcam';

@Component({
  selector: 'app-camera-record',
  template: `<webcam (initStream)="onStreamInit($event)"></webcam>`
})
export class CameraRecordComponent {
  @ViewChild(WebcamComponent) webcam: WebcamComponent;
  private activeStream: MediaStream;
  private mediaRecorder: MediaRecorder;
  private recordedChunks: Blob[] = [];
  recordedVideoUrl: string;

  onStreamInit(stream: MediaStream): void {
    this.activeStream = stream;
  }

  startRecord(): void {
    this.recordedChunks = [];
    // 优先适配当前浏览器支持的编码格式
    const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9') 
      ? 'video/webm;codecs=vp9' 
      : 'video/webm';
    this.mediaRecorder = new MediaRecorder(this.activeStream, { mimeType });
    
    this.mediaRecorder.ondataavailable = (event) => {
      if (event.data.size > 0) this.recordedChunks.push(event.data);
    };
    this.mediaRecorder.start();
  }

  stopRecord(): void {
    this.mediaRecorder.stop();
    this.mediaRecorder.onstop = () => {
      const videoBlob = new Blob(this.recordedChunks, { type: 'video/webm' });
      this.recordedVideoUrl = URL.createObjectURL(videoBlob);
    };
  }
}

其他Angular/TypeScript兼容的实现方案 #

如果不想自行拼装录制逻辑，也可以选择以下适配良好的方案：

• RecordRTC：成熟的Web端音视频录制开源库，自带完整TS类型定义，支持摄像头、屏幕、麦克风单独或混合录制，内置多浏览器编码适配，无需额外封装即可在Angular项目中直接调用，覆盖实时预览、录制控制、多格式导出的全流程需求。
• ngx-record-video：专为Angular生态封装的录制组件库，API贴合Angular的组件、服务调用规范，内置摄像头预览、录制时长统计、录制状态回调、视频导出能力，开箱即用，适合不想处理底层媒体流逻辑的场景。
• 纯原生实现：如果不想引入额外第三方依赖，可直接在Angular服务/组件中封装navigator.mediaDevices.getUserMedia方法获取摄像头流，绑定到原生<video>标签实现实时预览，再搭配原生MediaRecorder API完成录制，整体代码量可控，定制灵活度最高。

注意：所有摄像头调用能力仅支持HTTPS环境或本地localhost开发环境，否则浏览器会拦截媒体设备权限申请。

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