Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
InfiniBorg opened this issue Oct 1, 2024 · 1 comment
Open

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

InfiniBorg opened this issue Oct 1, 2024 · 1 comment

Comments

@InfiniBorg
Copy link

InfiniBorg commented Oct 1, 2024

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
Copy link

eniorJR commented Nov 19, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants