capacitor-community / capacitor-community/camera-preview

Camera Preview does not allow video recording on IOS platform

Open
#347 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
Java
Stars
227
Forks
185
PR merge metrics
No merged PRs in 30d

Description

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)](https://github.com/user-attachments/assets/d9eb0086-64aa-47b7-aea7-048366dd74be)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.