Capacitor Camera Preview Plugin

➡️ Get Instant updates for your App with Capgo 🚀

Fix your annoying bug now, Hire a Capacitor expert 💪

Capacitor plugin that allows camera interaction from Javascript and HTML
(based on cordova-plugin-camera-preview).

This plugin is compatible Capacitor 6 and above.

Use v5 for Capacitor 5 and below.

PR's are greatly appreciated.

-- @riderx, current maintainers

Remember to add the style below on your app's HTML or body element:

:root {
  --ion-background-color: transparent !important;
}

Take into account that this will make transparent all ion-content on application, if you want to show camera preview only in one page, just add a custom class to your ion-content and make it transparent:

.my-custom-camera-preview-content {
  --background: transparent;
}

If the camera preview is not displaying after applying the above styles, apply transparent background color to the root div element of the parent component Ex: VueJS >> App.vue component

<template>
  <ion-app id="app">
    <ion-router-outlet />
  </ion-app>
</template>

<style>
#app {
  background-color: transparent !important;
}
<style>

If it don't work in dark mode here is issue who explain how to fix it: capacitor-community/camera-preview#199

Installation

yarn add @capgo/camera-preview

or

npm install @capgo/camera-preview

Then run

npx cap sync

Extra Android installation steps

Important camera-preview 3+ requires Gradle 7. Open android/app/src/main/AndroidManifest.xml and above the closing </manifest> tag add this line to request the CAMERA permission:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

For more help consult the Capacitor docs.

Extra iOS installation steps

You will need to add two permissions to Info.plist. Follow the Capacitor docs and add permissions with the raw keys NSCameraUsageDescription and NSMicrophoneUsageDescription. NSMicrophoneUsageDescription is only required, if audio will be used. Otherwise set the disableAudio option to true, which also disables the microphone permission request.

Extra Web installation steps

Add import '@capgo/camera-preview' to you entry script in ionic on app.module.ts, so capacitor can register the web platform from the plugin

Exemple with Capacitor uploader:

Documentation for the uploader

  import { CameraPreview } from '@capgo/camera-preview'
  import { Uploader } from '@capgo/capacitor-uploader';


  async function record() {
    await CameraPreview.startRecordVideo({ storeToFile: true })
    await new Promise(resolve => setTimeout(resolve, 5000))
    const fileUrl = await CameraPreview.stopRecordVideo()
    console.log(fileUrl.videoFilePath)
    await uploadVideo(fileUrl.videoFilePath)
  }

  async function uploadVideo(filePath: string) {
    Uploader.addListener('events', (event) => {
      switch (event.name) {
        case 'uploading':
          console.log(`Upload progress: ${event.payload.percent}%`);
          break;
        case 'completed':
          console.log('Upload completed successfully');
          console.log('Server response status code:', event.payload.statusCode);
          break;
        case 'failed':
          console.error('Upload failed:', event.payload.error);
          break;
      }
    });
    try {
      const result = await Uploader.startUpload({
        filePath,
        serverUrl: 'S#_PRESIGNED_URL',
        method: 'PUT',
        headers: {
          'Content-Type': 'video/mp4',
        },
        mimeType: 'video/mp4',
      });
      console.log('Video uploaded successfully:', result.id);
    } catch (error) {
      console.error('Error uploading video:', error);
      throw error;
    }
  }

API

• start(...)
• stop()
• capture(...)
• captureSample(...)
• getSupportedFlashModes()
• getHorizontalFov()
• getSupportedPictureSizes()
• setFlashMode(...)
• flip()
• setOpacity(...)
• stopRecordVideo()
• startRecordVideo(...)
• Interfaces
• Type Aliases

start(...)

start(options: CameraPreviewOptions) => Promise<void>

Start the camera preview instance.

Param	Type	Description
options	CameraPreviewOptions	the options to start the camera preview with

Since: 0.0.1

---

stop()

stop() => Promise<void>

Stop the camera preview instance.

Since: 0.0.1

---

capture(...)

capture(options: CameraPreviewPictureOptions) => Promise<{ value: string; }>

Switch camera.

Param	Type	Description
options	CameraPreviewPictureOptions	the options to switch the camera with

Returns: Promise<{ value: string; }>

Since: 0.0.1

---

captureSample(...)

captureSample(options: CameraSampleOptions) => Promise<{ value: string; }>

Capture a sample image.

Param	Type	Description
options	CameraSampleOptions	the options to capture the sample image with

Returns: Promise<{ value: string; }>

Since: 0.0.1

---

getSupportedFlashModes()

getSupportedFlashModes() => Promise<{ result: CameraPreviewFlashMode[]; }>

Get supported flash modes.

Returns: Promise<{ result: CameraPreviewFlashMode[]; }>

Since: 0.0.1

---

getHorizontalFov()

getHorizontalFov() => Promise<{ result: any; }>

Get horizontal field of view.

Returns: Promise<{ result: any; }>

Since: 0.0.1

---

getSupportedPictureSizes()

getSupportedPictureSizes() => Promise<{ supportedPictureSizes: { facing: string; supportedPictureSizes: { width: number; height: number; }[]; }[]; }>

Gets the supported picture sizes for a given device.

Returns: Promise<{ supportedPictureSizes: { facing: string; supportedPictureSizes: { width: number; height: number; }[]; }[]; }>

---

setFlashMode(...)

setFlashMode(options: { flashMode: CameraPreviewFlashMode | string; }) => Promise<void>

Set flash mode.

Param	Type	Description
options	{ flashMode: string; }	the options to set the flash mode with

Since: 0.0.1

---

flip()

flip() => Promise<void>

Flip camera.

Since: 0.0.1

---

setOpacity(...)

setOpacity(options: CameraOpacityOptions) => Promise<void>

Set opacity.

Param	Type	Description
options	CameraOpacityOptions	the options to set the camera opacity with

Since: 0.0.1

---

stopRecordVideo()

stopRecordVideo() => Promise<{ videoFilePath: string; }>

Stop recording video.

Returns: Promise<{ videoFilePath: string; }>

Since: 0.0.1

---

startRecordVideo(...)

startRecordVideo(options: CameraPreviewOptions) => Promise<void>

Start recording video.

Param	Type	Description
options	CameraPreviewOptions	the options to start recording video with

Since: 0.0.1

---

Interfaces

CameraPreviewOptions

Prop	Type	Description
parent	string	Parent element to attach the video preview element to (applicable to the web platform only)
className	string	Class name to add to the video preview element (applicable to the web platform only)
width	number	The preview width in pixels, default window.screen.width
height	number	The preview height in pixels, default window.screen.height
x	number	The x origin, default 0 (applicable to the android and ios platforms only)
y	number	The y origin, default 0 (applicable to the android and ios platforms only)
toBack	boolean	Brings your html in front of your preview, default false (applicable to the android only)
paddingBottom	number	The preview bottom padding in pixes. Useful to keep the appropriate preview sizes when orientation changes (applicable to the android and ios platforms only)
rotateWhenOrientationChanged	boolean	Rotate preview when orientation changes (applicable to the ios platforms only; default value is true)
position	string	Choose the camera to use 'front' or 'rear', default 'front'
storeToFile	boolean	Defaults to false - Capture images to a file and return the file path instead of returning base64 encoded data
disableExifHeaderStripping	boolean	Defaults to false - Android Only - Disable automatic rotation of the image, and let the browser deal with it (keep reading on how to achieve it)
enableHighResolution	boolean	Defaults to false - iOS only - Activate high resolution image capture so that output images are from the highest resolution possible on the device *
disableAudio	boolean	Defaults to false - Web only - Disables audio stream to prevent permission requests and output switching
lockAndroidOrientation	boolean	Android Only - Locks device orientation when camera is showing.
enableOpacity	boolean	Defaults to false - Android and Web only. Set if camera preview can change opacity.
enableZoom	boolean	Defaults to false - Android only. Set if camera preview will support pinch to zoom.
cameraMode	boolean	default to false - IOS only. Set the CameraPreview to use the video mode preset

CameraPreviewPictureOptions

Prop	Type	Description
height	number	The picture height, optional, default 0 (Device default)
width	number	The picture width, optional, default 0 (Device default)
quality	number	The picture quality, 0 - 100, default 85
format	PictureFormat	The picture format, jpeg or png, default jpeg on Web. quality has no effect on png

CameraSampleOptions

Prop	Type	Description
quality	number	The picture quality, 0 - 100, default 85

CameraOpacityOptions

Prop	Type	Description
opacity	number	The percent opacity to set for camera view, default 1

Type Aliases

CameraPosition

"rear" | "front"

PictureFormat

"jpeg" | "png"

CameraPreviewFlashMode

"off" | "on" | "auto" | "red-eye" | "torch"