Ionic Angular + Capacitor v5视频录制实现问题及优化咨询

我正在开发Ionic Capacitor应用，需实现视频录制功能。因原生插件自2024年7月1日起停止更新维护，遂尝试使用标准媒体API，但遇到「DOMException: Permission denied」错误，怀疑与WebView限制有关。测试设备运行Android 11系统。

现有实现代码 #

startRecording 函数 #

async startRecording() {
  try {
    this.stream = await navigator.mediaDevices.getUserMedia({
      video: { width: { ideal: 640 }, height: { ideal: 480 }, facingMode: { exact: "environment" } },
      audio: true,
    });
    this.videoLiveRef.nativeElement.srcObject = this.stream;
    if (!MediaRecorder.isTypeSupported('video/webm')) {
      console.warn('video/webm is not supported');
    }
    this.mediaRecorder = new MediaRecorder(this.stream, { mimeType: 'video/webm' });
    this.mediaRecorder.addEventListener('dataavailable', (event) => {
      const blob = new Blob([event.data], { type: 'video/webm' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = "video.mp4";
      a.click();
    });
    this.mediaRecorder.start();
    this.buttonStartRef.nativeElement.disabled = true;
    this.buttonStopRef.nativeElement.disabled = false;
  } catch (error:any) {
    console.error('Error starting recording:', error);
    if (error.name === 'NotAllowedError' || error.name === 'NotFoundError') {
      alert('Error: Could not access camera or microphone. Please ensure permissions are granted.');
    }
  }
}

AndroidManifest.xml 权限配置 #

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera"/>
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
<uses-permission android:name="android.permission.INTERNET" />

现有代码优化点 #

1. 权限处理优化 #

• Android 11及以上版本，WRITE_EXTERNAL_STORAGE权限已被弱化，保留READ_MEDIA_VIDEO即可，重复的RECORD_AUDIO权限可以删除。
• 替换原生alert为Ionic的AlertController，更符合APP交互规范。
• 调用getUserMedia前，通过Capacitor的Permissions API主动申请权限，避免依赖WebView自动弹窗：

  import { Permissions, PermissionType } from '@capacitor/core';
  
  async checkPermissions() {
    const cameraStatus = await Permissions.check({ type: PermissionType.Camera });
    const audioStatus = await Permissions.check({ type: PermissionType.Microphone });
    
    if (cameraStatus.state !== 'granted') {
      await Permissions.request({ type: PermissionType.Camera });
    }
    if (audioStatus.state !== 'granted') {
      await Permissions.request({ type: PermissionType.Microphone });
    }
  }
  

2. MediaRecorder 兼容性优化 #

• 当前下载文件名video.mp4与录制的webm格式不匹配，建议动态匹配格式：

  // 优先选择设备支持的MP4格式
  let mimeType = 'video/mp4';
  if (!MediaRecorder.isTypeSupported(mimeType)) {
    mimeType = 'video/webm';
    console.warn('MP4 not supported, falling back to webm');
  }
  this.mediaRecorder = new MediaRecorder(this.stream, { mimeType });
  // 下载文件名对应格式
  a.download = `video.${mimeType.split('/')[1]}`;
  

• facingMode使用exact: "environment"可能在部分设备上不兼容，改为ideal: "environment"提升适配性。

3. 资源清理 #

• 录制停止后释放媒体流和MediaRecorder资源，避免内存泄漏：

  async stopRecording() {
    this.mediaRecorder.stop();
    // 释放所有媒体轨道
    this.stream.getTracks().forEach(track => track.stop());
    this.buttonStartRef.nativeElement.disabled = false;
    this.buttonStopRef.nativeElement.disabled = true;
  }
  

Ionic Capacitor v5 视频录制最佳方案 #

1. 社区维护插件 #

使用**@capacitor-community/media-recorder**，这是专门针对Capacitor的媒体录制插件，完全规避WebView限制，支持：

• 前置/后置摄像头切换
• 自定义视频分辨率、帧率、比特率
• 音频录制控制
• 直接保存到设备相册或指定路径

2. 自定义原生实现（进阶） #

如果社区插件无法满足需求，可通过Capacitor原生桥接自定义插件：

• Android端使用原生MediaRecorderAPI直接控制摄像头参数
• iOS端使用AVFoundation框架实现视频录制
• 封装成Capacitor插件后，在Angular代码中调用原生方法，彻底解决WebView兼容性问题

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