Hi Developers,
I am using ionic 5 to develop mobile app. As part of app I am using camera preview plugin to preview and capture image. In the same way I need to capture video by previewing it, look like video recording as part of screen. I tried providing camera preview options and started camera and called startRecordVideo method with following options:
var options = {
cameraDirection: this.camPreview.CAMERA_DIRECTION.FRONT,
width: window.screen.width,
height: window.screen.height - 205,
quality: 100,
withFlash: false
}
but camera has started but no video is getting recorded and I couldn`t see any video controls. If I call startRecordVideo method directly no preview error occured.
Can someone share me a solutions how to preview camera and start recording for certain duration.
Thanks in advance.
Can you provide a more complete example? Can you push a demo to github so we people can inspect it?
I cannot share any code. The thing is I am using ionic camera preview plugin. In ionviewwillenter() I called startCamera method and an interval of 2sec I called takePicture() worked properly. In the same way I called startRecordVideo method but I am not seeing anything getting recorded. This is what my requirement
Im not asking for you exact app, but a demo that shows the problem.
It can be a one page app that has the needed code/setup to run.
1 Like
I can provide a complete example;
in the camera.ts
import { Component, OnInit } from '@angular/core';
import { Plugins } from "@capacitor/core";
const { CameraPreview } = Plugins;
import { CameraPreviewOptions, CameraPreviewPictureOptions } from "@capacitor-community/camera-preview";
import '@capacitor-community/camera-preview';
@Component({
selector: 'app-post',
templateUrl: './post.page.html',
styleUrls: ['./post.page.scss'],
})
export class PostPage implements OnInit {
image = null;
cameraActive = false;
constructor() { }
ngOnInit() {
}
ionViewWillEnter(){
try {
this.openCamera()
} catch (error) {
console.log(error);
}
}
openCamera() {
const cameraPreviewOptions: CameraPreviewOptions = {
position: 'rear',
parent: 'cameraPreview',
className: 'cameraPreview'
};
CameraPreview.start(cameraPreviewOptions);
this.cameraActive = true;
}
async stopCamera() {
await CameraPreview.stop();
this.cameraActive = false;
console.log('stopping camera');
}
async captureImage() {
const camerapreviewpictureOptions: CameraPreviewPictureOptions = {
quality: 90
};
const result = await CameraPreview.capture(camerapreviewpictureOptions);
this.image = `data:image/jpeg;base64,${result.value}`;
this.stopCamera();
}
flipCamera() {
CameraPreview.flip();
}
ionViewDidLeave() {
this.stopCamera();
}
recordVideo(){
//how?
}
}
in the camera.html
<ion-content>
<div id="cameraPreview" class="camera-preview">
<div *ngIf="cameraActive" class="overlay">
<ion-button fill="clear" (click)="stopCamera()" id="close" color="white">
<ion-icon name="close-outline" slot="icon-only"></ion-icon>
</ion-button>
<!-- This is the capture, we can use a plugin to detect a click and hold to fire a seperate method for recording, thats not really the issue -->
<div fill="clear" (click)="captureImage()" id="capture">
<ion-icon name="camera" slot="icon-only"></ion-icon>
</div>
<ion-button fill="clear" (click)="flipCamera()" id="flip">
<ion-icon name="camera-reverse" slot="icon-only"></ion-icon>
</ion-button>
</div>
</div>
<ion-img [src]="image" *ngIf="image && !cameraActive" class="camera-view"></ion-img>
<ion-button (click)="openCamera()" expand="full" *ngIf="!cameraActive">Open Camera</ion-button>
</ion-content>
For completeness, here is the scss;
<ion-content>
<div id="cameraPreview" class="camera-preview">
<div *ngIf="cameraActive" class="overlay">
<ion-button fill="clear" (click)="stopCamera()" id="close" color="white">
<ion-icon name="close-outline" slot="icon-only"></ion-icon>
</ion-button>
<!-- This is the capture, we can use a plugin to detect a click and hold to fire a seperate method for recording, thats not really the issue -->
<div fill="clear" (click)="captureImage()" id="capture">
<ion-icon name="camera" slot="icon-only"></ion-icon>
</div>
<ion-button fill="clear" (click)="flipCamera()" id="flip">
<ion-icon name="camera-reverse" slot="icon-only"></ion-icon>
</ion-button>
</div>
</div>
<ion-img [src]="image" *ngIf="image && !cameraActive" class="camera-view"></ion-img>
<ion-button (click)="openCamera()" expand="full" *ngIf="!cameraActive">Open Camera</ion-button>
</ion-content>
So I’m not sure how we could record a video and limit the recording length. If there is a better plugin, open to exploring, but this one looked amazing because you can create a custom UI overlay
Hello Ionic community,
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<void> {
> const buttonContainerHeight = 120;
> const previewHeight = window.innerHeight - buttonContainerHeight;
> const cameraPreviewOptions: CameraPreviewOptions = {
> position: 'front',
> width: window.screen.width,
> height: previewHeight,
> x: 0,
> y: 0
> };
>
> 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<void> {
> 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.