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: https://github.com/capacitor-community/camera-preview/issues/199
yarn add @capgo/camera-preview
or
npm install @capgo/camera-preview
Then run
npx cap sync
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.
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.
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
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;
}
}
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() => Promise<void>
Stop the camera preview instance.
Since: 0.0.1
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(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() => Promise<{ result: CameraPreviewFlashMode[]; }>
Get supported flash modes.
Returns: Promise<{ result: CameraPreviewFlashMode[]; }>
Since: 0.0.1
getHorizontalFov() => Promise<{ result: any; }>
Get horizontal field of view.
Returns: Promise<{ result: any; }>
Since: 0.0.1
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() => Promise<void>
Flip camera.
Since: 0.0.1
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() => Promise<{ videoFilePath: string; }>
Stop recording video.
Returns: Promise<{ videoFilePath: string; }>
Since: 0.0.1
startRecordVideo(options: CameraPreviewOptions) => Promise<void>
Start recording video.
Param | Type | Description |
---|---|---|
options |
CameraPreviewOptions |
the options to start recording video with |
Since: 0.0.1
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 |
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 |
Prop | Type | Description |
---|---|---|
quality |
number |
The picture quality, 0 - 100, default 85 |
Prop | Type | Description |
---|---|---|
opacity |
number |
The percent opacity to set for camera view, default 1 |
"rear" | "front"
"jpeg" | "png"
"off" | "on" | "auto" | "red-eye" | "torch"
Tutorial Paket capgo/camera-preview
Dalam tutorial ini, kita akan melalui langkah-langkah untuk menggunakan paket @capgo/camera-preview
dalam proyek Capacitor Anda. Paket ini memungkinkan Anda untuk berinteraksi dengan kamera dari kode JavaScript dan HTML Anda.
Untuk menginstal paket @capgo/camera-preview
, buka terminal Anda dan jalankan salah satu perintah berikut:
yarn add @capgo/camera-preview
atau
npm install @capgo/camera-preview
Setelah instalasi selesai, jalankan perintah berikut untuk menyinkronkan proyek Capacitor Anda:
npx cap sync
Jika Anda menggunakan Android, Anda perlu melakukan beberapa perubahan tambahan pada proyek Anda. Buka file android/app/src/main/AndroidManifest.xml
dan tambahkan baris berikut di atas tag penutup </application>
untuk meminta izin KAMERA:
<uses-permission android:name="android.permission.CAMERA" />
Untuk bantuan lebih lanjut, rujuk pada dokumentasi Capacitor
Jika Anda menggunakan iOS, Anda perlu menambahkan dua izin ke file Infoplist
Anda. Ikuti dokumentasi Capacitor dan tambahkan izin NSCameraUsageDescription
dan NSMicrophoneUsageDescription
. Izin NSMicrophoneUsageDescription
hanya diperlukan jika Anda akan menggunakan audio. Jika Anda tidak memerlukan audio, Anda dapat mengatur opsi disableAudio
ke true
untuk menonaktifkan permintaan izin mikrofon.
Jika Anda menggunakan platform web dengan Ionic, tambahkan baris berikut ke skrip entri Anda di appmodulets
:
import '@capgo/camera-preview';
Ini akan memungkinkan Capacitor untuk mendaftarkan platform web dari plugin.
Paket @capgo/camera-preview
menyediakan metode API berikut:
Memulai instance pratinjau kamera.
Menghentikan instance pratinjau kamera.
Mengambil gambar dari kamera.
Mengambil gambar sampel.
Mengambil mode kilat yang didukung.
Mengambil bidang pandang horizontal.
Mengatur mode kilat.
Membalik kamera.
Mengatur opasitas kamera.
Menghentikan rekaman video.
Memulai rekaman video.
Untuk detail lebih lanjut tentang parameter dan nilai kembali dari metode ini, rujuk pada dokumentasi paket @capgo/camera-preview
.
Dalam tutorial ini, kami belajar bagaimana cara menginstal dan menggunakan paket @capgo/camera-preview
dalam proyek Capacitor. Kami menjelajahi metode API yang tersedia dan penggunaannya. Sekarang Anda dapat mengintegrasikan fungsi kamera ke dalam aplikasi Anda menggunakan paket ini.