Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
capacitor3-camera-preview
Advanced tools
Readme
capacitor3-camera-preview
CAPACITOR 3
Capacitor plugin that allows camera interaction from Javascript and HTML
(based on cordova-plugin-camera-preview).
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
yarn add capacitor3-camera-preview
or
npm install capacitor3-camera-preview
Then run
npx cap sync
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.
You will need to add two permissions to Info.plist
. Follow the Capacitor docs and add permissions with the raw keys NSCameraUsageDescription
and NSMicrophoneUsageDescription
.
Add import 'capacitor3-camera-preview'
to you entry script in ionic on app.module.ts
, so capacitor can register the web platform from the plugin
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) |
disableAudio | boolean | (optional) Disables audio stream to prevent permission requests, default false. (applicable to web 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 Android only) |
import { Plugins } from "@capacitor/core"
const { CameraPreview } = Plugins;
import { CameraPreviewOptions } from 'capacitor3-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;
}
Stops the camera preview instance.
CameraPreview.stop();
Switch between rear and front camera only for android and ios, web is not supported
CameraPreview.flip()
Option | values | descriptions |
---|---|---|
quality | number | (optional) The picture quality, 0 - 100, default 85 |
width | number | (optional) The picture width, default 0 (Device default) |
height | number | (optional) The picture height, default 0 (Device default) |
import { CameraPreviewFlashMode } from 'capacitor3-camera-preview';
const cameraPreviewPictureOptions: CameraPreviewPictureOptions = {
quality: 50
};
const result = await CameraPreview.capture(cameraPreviewPictureOptions);
const base64PictureData = result.value;
// do sometime with base64PictureData
Option | values | descriptions |
---|---|---|
quality | number | (optional) The picture quality, 0 - 100, default 85 |
Captures a sample image from the video stream. Only for Android and iOS, web implementation falls back to capture
method. This can be used to perform real-time analysis on the current frame in the video. The argument quality
defaults to 85
and specifies the quality/compression value: 0=max compression
, 100=max quality
.
import { CameraSampleOptions } from 'capacitor3-camera-preview';
const cameraSampleOptions: CameraSampleOptions = {
quality: 50
};
const result = await CameraPreview.captureSample(cameraSampleOptions);
const base64PictureData = result.value;
// do something with base64PictureData
Get the flash modes supported by the camera device currently started. Returns an array containing supported flash modes. See FLASH_MODE
for possible values that can be returned
import { CameraPreviewFlashMode } from 'capacitor3-camera-preview';
const flashModes = await CameraPreview.getSupportedFlashModes();
const supportedFlashModes: CameraPreviewFlashMode[] = flashModes.result;
Set the flash mode. See FLASH_MODE
for details about the possible values for flashMode.
const CameraPreviewFlashMode: CameraPreviewFlashMode = 'torch';
CameraPreview.setFlashMode(cameraPreviewFlashMode);
Start capturing video
const cameraPreviewOptions: CameraPreviewOptions = {
position: 'front',
width: window.screen.width,
height: window.screen.height,
};
CameraPreview.startRecordVideo(cameraPreviewOptions);
Finish capturing a video. The captured video will be returned as a file path and the video format is .mp4
const resultRecordVideo = await CameraPreview.stopRecordVideo();
this.stopCamera();
Set the opacity for the camera preview
const myCamera = CameraPreview.start({enableOpacity: true});
myCamera.setOpacity({opacity: 0.4});
Flash mode settings:
Name | Type | Default | Note |
---|---|---|---|
OFF | string | off | |
ON | string | on | |
AUTO | string | auto | |
RED_EYE | string | red-eye | Android Only |
TORCH | string | torch |
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.
FAQs
Camera preview
The npm package capacitor3-camera-preview receives a total of 0 weekly downloads. As such, capacitor3-camera-preview popularity was classified as not popular.
We found that capacitor3-camera-preview demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.