npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@capacitor-community/camera-preview

v6.0.0

Published

Camera preview

Downloads

26,444

Readme

If you are using Capacitor 5, use version 5

If you are using Capacitor 4, use version 4

If you are using Capacitor 3, use version 3

If you are using Capacitor 2, use version 1

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.

Variables

This plugin will use the following project variables (defined in your app's variables.gradle file):

  • androidxExifInterfaceVersion: version of androidx.exifinterface:exifinterface (default: 1.3.6)

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 { CameraPreview } from '@capacitor-community/camera-preview'; in the file where you want to use the plugin.

then in html add <div id="cameraPreview"></div>

and CameraPreview.start({ parent: "cameraPreview"}); 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()

capture(options)

| 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 { CameraPreviewPictureOptions } from '@capacitor-community/camera-preview';

const cameraPreviewPictureOptions: CameraPreviewPictureOptions = {
  quality: 50
};

const result = await CameraPreview.capture(cameraPreviewPictureOptions);
const base64PictureData = result.value;

// do sometime with base64PictureData

captureSample(options)

| 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 '@capacitor-community/camera-preview';

const cameraSampleOptions: CameraSampleOptions = {
  quality: 50
};

const result = await CameraPreview.captureSample(cameraSampleOptions);
const base64PictureData = result.value;

// do something with base64PictureData

getSupportedFlashModes()

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 '@capacitor-community/camera-preview';

const flashModes = await CameraPreview.getSupportedFlashModes();
const supportedFlashModes: CameraPreviewFlashMode[] = flashModes.result;

setFlashMode(options)

Set the flash mode. See FLASH_MODE for details about the possible values for flashMode.

const CameraPreviewFlashMode: CameraPreviewFlashMode = 'torch';

CameraPreview.setFlashMode(cameraPreviewFlashMode);

startRecordVideo(options) ---- ANDROID and iOS only

Start capturing video

const cameraPreviewOptions: CameraPreviewOptions = {
  position: 'front',
  width: window.screen.width,
  height: window.screen.height,
};

CameraPreview.startRecordVideo(cameraPreviewOptions);

stopRecordVideo() ---- ANDROID and iOS only

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();

setOpacity(options: CameraOpacityOptions): Promise<{}>; ---- ANDROID only

Set the opacity for the camera preview

const myCamera = CameraPreview.start({enableOpacity: true});
myCamera.setOpacity({opacity: 0.4});

Settings

FLASH_MODE

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 | |

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.