Ionic5+Capacitor+Angular9环境下iOS App中getUserMedia调用报NotAllowedError问题咨询

Hey there, let's tackle this iOS NotAllowedError issue with navigator.getUserMedia in your Ionic 5 + Capacitor + Angular 9 setup. I've run into similar headaches before, so here are the most reliable fixes to try out:

1. Fix iOS Privacy Permission Declarations #

iOS requires explicit permission prompts for camera and microphone access, and you need to declare these in your app's configuration.

In your capacitor.config.json, add the permission descriptions under the ios section:

"ios": {
  "infoPlist": {
    "NSCameraUsageDescription": "We need access to your camera to capture video content",
    "NSMicrophoneUsageDescription": "We need access to your microphone to record audio"
  }
}

After updating, run npx cap sync ios to sync these changes to your Xcode project. You can also double-check the Info.plist file directly in Xcode to ensure these entries were added correctly—sometimes syncs can miss things!

2. Switch to the Modern MediaDevices API #

navigator.getUserMedia is a deprecated API, and iOS has spotty support for it. Replace it with the standard, modern navigator.mediaDevices.getUserMedia instead:

async getMedia() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
    this.handleSuccess(stream);
  } catch (error) {
    this.handleError(error);
  }
}

Critical Note: iOS requires media permission requests to be triggered by a user interaction (like a button tap). Never call this method on page load—this will guarantee a permission rejection.

3. Validate Capacitor Plugin & WebView Settings #

Make sure Capacitor's plugins are configured to allow camera/microphone access. Add these to your capacitor.config.json:

"plugins": {
  "Camera": {
    "cameraPermissions": "Allow access to your camera",
    "photosPermission": "Allow access to your photos"
  },
  "Microphone": {
    "microphonePermission": "Allow access to your microphone"
  }
}

Also, open your Xcode project, go to Signing & Capabilities, and confirm there are no restrictions blocking camera or microphone access for your app.

4. Check & Request Permissions Explicitly #

Use Capacitor's Permissions plugin to pre-check permission status and request access proactively, which avoids unexpected errors:

1. Install the plugin first:

npm install @capacitor/permissions

2. Add this helper function before calling getMedia:

import { Permissions, PermissionType } from '@capacitor/permissions';

async checkAndRequestPermissions() {
  const cameraStatus = await Permissions.check({ type: PermissionType.Camera });
  const micStatus = await Permissions.check({ type: PermissionType.Microphone });

  if (cameraStatus.state === 'denied' || micStatus.state === 'denied') {
    // Request permissions if they're denied
    await Promise.all([
      Permissions.request({ type: PermissionType.Camera }),
      Permissions.request({ type: PermissionType.Microphone })
    ]);
  }
}

Call checkAndRequestPermissions() when the user taps a button (e.g., a "Start Recording" button) before initializing the media stream.

5. Xcode Deployment Target Check #

Ensure your Xcode project's Deployment Target is set to iOS 11 or higher—this is the minimum version that supports the modern mediaDevices API.

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