capacitor-community / camera-preview

Capacitor plugin that allows camera interaction from HTML code
MIT License
189 stars 166 forks source link

Camera Preview does not allow video recording on IOS platform #347

Open InfiniBorg opened 1 month ago

InfiniBorg commented 1 month ago

I am currently facing an issue with the @capacitor-community/camera-preview plugin where the video recording does not start on iOS platform but works as expectedly on Android. I have implemented the necessary configurations and permissions, but recording still fails to initiate.

What I’ve Tried:

Permissions:

On Android, I am using the @awesome-cordova-plugins/android-permissions plugin to request permissions for external storage, camera, and microphone. The permissions are correctly requested and granted. On iOS, I ensured that the necessary camera and microphone permissions are added in Info.plist: NSCameraUsageDescription Camera access is required to record videos NSMicrophoneUsageDescription Microphone access is required to record audio

Camera Preview: The camera preview successfully opens on both platforms. However, once I attempt to start recording using CameraPreview.startRecordVideo(), it fails silently. On iOS, the camera preview opens but recording does not start, which prevents the stop button from firing any events, and the timer remains at zero. On Android,the camera preview works well.

Implemented Logic: I am calling CameraPreview.start() to begin the camera preview and CameraPreview.startRecordVideo() to start the recording. Below is the code snippet for starting the camera and the recording:

public async startCameraPreview(): Promise { const buttonContainerHeight = 120; const previewHeight = window.innerHeight - buttonContainerHeight; const cameraPreviewOptions: CameraPreviewOptions = { position: 'front', width: window.screen.width, height: 700 };

try {
  await CameraPreview.start(cameraPreviewOptions);
  // Automatically start recording after the preview starts
  await this.startRecording();
} catch (error) {
  await this.AlertNotification('Error Opening Camera.Retry');
}

}

public async startRecording(): Promise { if (this.recordingStarted) { return; }

const cameraPreviewOptions: CameraPreviewOptions = {
  position: 'front',
  width: window.screen.width,
  height: 700
};

try {
  await CameraPreview.startRecordVideo(cameraPreviewOptions);
  this.recordingStarted = true;
  this.timer = 0; 
  await this.startTimer(); 
} catch (error) {
  await this.AlertNotification('Error recording.Retry');
}

}

Additional Debugging Attempts: I added debug alerts to track the execution flow, and while the startRecording() function is being triggered, the recording does not actually begin on IOS but works as expected on Android.

Specific to iOS: The camera preview works as expected, but recording never starts. I am unable to find any errors in the logs. The stop button is displayed but non-functional because the recording never starts. I suspect this could be related to either permissions or configuration differences on iOS compared to Android. My Environment:

Ionic Framework: @ionic/angular Capacitor: @capacitor/core Camera Preview Plugin: @capacitor-community/camera-preview

Request:

Has anyone faced similar issues with video recording not starting on iOS but work as expected Android using the Camera Preview plugin? Are there any additional configurations or specific permission handling required on iOS that I might have missed? Any help or suggestions would be greatly appreciated! Thanks in advance.

here is the screenshot of my issue on IOS: MicrosoftTeams-image (24)

eniorJR commented 4 days ago

Hi, try my fork if you want :) Fork here

#CAPTURE
const result = await CameraPreview.capture({ quality: 80 });
const fileurl = await URL.createObjectURL(await this.DataURIToBlob('data:image/jpeg;base64,' + result.value));
#VIDEO
const result: any = await CameraPreview.stopRecordVideo();
const urlVideo = await Capacitor.convertFileSrc(result.videoFilePath);
const base64Video = result.videoBase64