Ionic 6+Angular14使用MediaCapture插件捕获视频时权限拒绝问题排查

核心问题分析 #

当前遇到的code:4, message:'Permission denied'错误，对应MediaCapture插件的CAPTURE_PERMISSION_DENIED类型。权限已在清单声明且手动请求仍报错，大概率出在插件初始化异常、权限请求未真正生效或Capacitor与Cordova插件兼容性上。

具体解决步骤 #

1. 修复MediaCapture依赖注入问题（优先处理） #

手动实例化MediaCapture会跳过Angular依赖注入生命周期，导致插件无法正确与Capacitor/Cordova桥接，进而引发权限流程异常。解决DI失败：

• 在AppModule或当前组件所属Feature Module中配置插件提供者：

import { MediaCapture } from "@awesome-cordova-plugins/media-capture/ngx";
import { NgModule } from '@angular/core';

@NgModule({
  // ...
  providers: [MediaCapture] // 将插件加入providers数组
})
export class AppModule { }

• 在组件中通过构造函数注入使用：

constructor(private mediaCapture: MediaCapture) { }

async startRecording(): Promise<void> {
  try {
    const opt: CaptureVideoOptions = { limit: 1 };
    const data = await this.mediaCapture.captureVideo(opt);
  } catch (e) {
    console.error(e, "video capture error");
  }
}

若DI仍失败，检查是否安装了底层Cordova插件：

npm install cordova-plugin-media-capture
npx cap sync

2. 完善权限配置与校验 #

Android端（三星S22 Ultra，Android 13+）

• Android 13+已废弃WRITE_EXTERNAL_STORAGE，需补充适配权限到AndroidManifest.xml：

<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
<uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />

• 请求权限后必须验证授权状态，避免用户之前拒绝导致请求失效：

import { AndroidPermissions } from "@awesome-cordova-plugins/android-permissions/ngx";

async checkAndRequestPermissions(): Promise<boolean> {
  const permissions = [
    AndroidPermissions.PERMISSION.CAMERA,
    AndroidPermissions.PERMISSION.RECORD_AUDIO,
    AndroidPermissions.PERMISSION.READ_MEDIA_VIDEO
  ];

  for (const perm of permissions) {
    const checkResult = await AndroidPermissions.checkPermission(perm);
    if (!checkResult.hasPermission) {
      const requestResult = await AndroidPermissions.requestPermission(perm);
      if (!requestResult.hasPermission) {
        // 引导用户到应用设置页手动开启权限
        await AndroidPermissions.openSettings();
        return false;
      }
    }
  }
  return true;
}

iOS端（iPhone SE，iOS 16.4）

• 必须在Info.plist中添加权限描述，通过capacitor.config.ts同步配置：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  // ...
  ios: {
    infoPlist: {
      NSCameraUsageDescription: "需要访问相机进行视频录制",
      NSMicrophoneUsageDescription: "需要访问麦克风录制视频声音",
      NSPhotoLibraryAddUsageDescription: "需要访问相册保存录制的视频"
    }
  }
};

export default config;

执行npx cap sync ios同步配置到Xcode项目。

3. 替换为Capacitor官方Camera插件（适配Capacitor环境） #

@awesome-cordova-plugins的MediaCapture基于Cordova，与Capacitor 4可能存在兼容性问题，改用Capacitor官方@capacitor/camera插件：

• 安装插件：

npm install @capacitor/camera
npx cap sync

• 视频录制示例：

import { Camera, CameraResultType, MediaType } from '@capacitor/camera';

async startVideoRecording() {
  try {
    const video = await Camera.getPhoto({
      resultType: CameraResultType.Uri,
      mediaType: MediaType.Video,
      duration: 30 // 最大录制时长（秒）
    });
    // 处理视频URI
    console.log(video.webPath);
  } catch (e) {
    console.error(e);
  }
}

4. 第三方SDK兼容性排查 #

若最终目标是让第三方SDK触发录制：

• 若为Web版SDK：确保Capacitor WebView允许媒体访问，Android端在capacitor.config.ts中配置：

android: {
  webView: {
    settings: {
      mediaPlaybackRequiresUserGesture: false, // 允许自动触发媒体录制
      allowFileAccess: true
    }
  }
}

• 若为原生版SDK：检查是否与Capacitor 4原生桥接兼容，确保SDK权限请求逻辑不与Capacitor权限系统冲突。

内容的提问来源于stack exchange，提问作者Andrei Oltean