Camera Preview Video Recording

Ionic Framework
1

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.

2

Can you provide a more complete example? Can you push a demo to github so we people can inspect it?

3

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

4

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
5

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