使用电容器 v5 进行 Ionic Angular 视频录制

Question

我正在开发一个离子电容器应用程序，旨在实现视频录制功能。由于 native plugins 在 7 月 1 日 24 日之后将不再接收更新或支持，因此我正在探索标准媒体 API。但是，我遇到了“DOMException：权限被拒绝”错误，我怀疑这可能与 webview 限制有关。

使用网络媒体 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（权限）

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

用于测试的设备运行在Android V11上。

这里有什么可以改进的地方吗？

或者任何人都可以建议最好的方法或插件来通过 Capacitor v5 在 Ionic Angular 中实现相机分辨率控制或视频质量控制来实现视频录制吗？

Answer 1

最后，我找到了一个可行的解决方案。如果有人还在通过这种方式录制视频。 请查看本教程

另外，不要忘记在 AndroidManifest.xml 中添加此权限（仅限 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" />

注意：将 blob 转换为 base64 是一个耗时的过程，如果视频大于 30MB 左右，它还会导致应用程序崩溃。您可以利用 Capacitor-blob-writer 进行快速操作。