Capacitor Camera Preview Plugin

!NPM Version
!NPM Downloads
!GitHub Repo stars
!GitHub Actions Workflow Status
!GitHub License
!Maintenance

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

Why Camera Preview?

A free, fully-featured alternative to paid camera plugins, built for maximum flexibility and performance:

- Complete UI control - Build your own camera interface with HTML/JS overlays instead of native constraints
- Full hardware access - Manual focus, zoom, exposure controls, flash modes, multiple cameras
- Video recording - Record with custom settings, no arbitrary limitations
- Universal device support - Tested across hundreds of Android and iOS devices
- Performance optimized - Direct camera stream access, efficient memory usage
- Modern package management - Supports both Swift Package Manager (SPM) and CocoaPods (SPM-ready for Capacitor 8)
- Same JavaScript API - Compatible interface with paid alternatives

Unlike restrictive paid plugins, you get full camera control to build exactly the experience you want - from QR scanners to professional video apps.

This plugin is compatible Capacitor 7 and above.

Use v6 for Capacitor 6 and below.

PR's are greatly appreciated.

-- @riderx, current maintainers

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

``css
: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:

`css
.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
`html