@capacitor-community/camera-preview

Camera preview

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@capacitor-community/camera-preview
133494.0.017 days ago2 years agoMinified + gzip package size for @capacitor-community/camera-preview in KB

Readme


Capacitor Camera Preview

@capacitor-community/camera-preview


CAPACITOR 3



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


Version 4 of this plugin requires Capacitor 4. If you are using Capacitor 3, use version 3 Version 2+ of this plugin is compatible with Ionic 5+ and Capacitor 3. If your project uses Capacitor 2, please make sure you install version 1 of this plugin.
PR's are greatly appreciated.
-- @arielhernandezmusa and @pbowyer, current maintainers
Installation
yarn add @capacitor-community/camera-preview

or

npm install @capacitor-community/camera-preview
Then run
npx cap sync

Extra Android installation steps

Important camera-preview 3+ requires Gradle 7. If you are using Gradle 4, please use version 2 of this plugin.
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" />
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 '@capacitor-community/camera-preview' to you entry script in ionic on app.module.ts, so capacitor can register the web platform from the plugin
then in html add

and ngOnInit() { const { CameraPreview } = Plugins; CameraPreview.start({ parent: "cameraPreview"}); }
it will work
Methods

start(options)

Starts the camera preview instance.

| Option | values | descriptions | |----------|---------------|------------------------------------------------------------------------| | position | front \| rear | Show front or rear camera when start the preview. Defaults to front | | width | number | (optional) The preview width in pixels, default window.screen.width (applicable to the android and ios platforms only) | | height | number | (optional) The preview height in pixels, default window.screen.height (applicable to the android and ios platforms only) | | x | number | (optional) The x origin, default 0 (applicable to the android and ios platforms only) | | y | number | (optional) The y origin, default 0 (applicable to the android and ios platforms only) | | toBack | boolean | (optional) Brings your html in front of your preview, default false (applicable to the android and ios platforms only) | | paddingBottom | number | (optional) 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 | (optional) Rotate preview when orientation changes (applicable to the ios platforms only; default value is true) | | storeToFile | boolean | (optional) Capture images to a file and return back the file path instead of returning base64 encoded data, default false. | | disableExifHeaderStripping | boolean | (optional) Disable automatic rotation of the image, and let the browser deal with it, default true (applicable to the android and ios platforms only) | | enableHighResolution | boolean | (optional) 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 | (optional) Disables audio stream to prevent permission requests, default false. (applicable to web and iOS only) | | lockAndroidOrientation | boolean | (optional) Locks device orientation when camera is showing, default false. (applicable to Android only) | | enableOpacity | boolean | (optional) Make the camera preview see-through. Ideal for augmented reality uses. Default false (applicable to Android and web only) | enableZoom | boolean | (optional) Set if you can pinch to zoom. Default false (applicable to the android and ios platforms only)

import { CameraPreview, CameraPreviewOptions } from '@capacitor-community/camera-preview';

const cameraPreviewOptions: CameraPreviewOptions = {
  position: 'rear',
  height: 1920,
  width: 1080
};
CameraPreview.start(cameraPreviewOptions);

Remember to add the style below on your app's HTML or body element:
ion-content {
  --background: transparent;
}

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>

stop()

Stops the camera preview instance.

CameraPreview.stop();

flip()

Switch between rear and front camera only for android and ios, web is not supported
CameraPreview.flip()

Demo
A working example can be found at Demo
To run the demo on your local network and access media devices, a secure context is needed. Add an .env file at the root of the demo folder with HTTPS=true to start react with HTTPS.