Video Recording in Ionic Angular with Capacitor v5

I'm developing an Ionic Capacitor app and aiming to implement video recording functionality. As native plugins will no longer receive updates or support after July1 24, I'm exploring standard media APIs. However, I encountered a 'DOMException: Permission denied' error, which I suspect could be related to webview limitations.

startVideoRecording function using web media api

 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') {
    // Provide user feedback about permission denial
    alert('Error: Could not access camera or microphone. Please ensure permissions are granted.');
  }
}

}

AndroidManifest.xml (Permissions)

<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" />

Device Used for testing is running on Android V11.

Is there anything that could be improved here?

OR Can anyone suggest the best approach or plugin to achieve video recording with camera resolution control or video quality control in Ionic Angular with Capacitor v5?

Finally, I found a working solution. If anyone still going through this way to record a video. please check this tutorial

Additionally, Don't forget to add this permissions in AndroidManifest.xml (only Android)

<!-- Permissions -->
<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.MODIFY_AUDIO_SETTINGS" />

<!--  External storage if required-->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Note: Converting the blob to base64 is a time-consuming process and also it crashes the app if a video is larger than 30MB or so. You can make use of Capacitor-blob-writer for fast operation.