{"id":19123399,"url":"https://github.com/ryaa/camera-preview-capacitor-2","last_synced_at":"2025-07-15T18:40:36.092Z","repository":{"id":96214193,"uuid":"496266802","full_name":"ryaa/camera-preview-capacitor-2","owner":"ryaa","description":null,"archived":false,"fork":false,"pushed_at":"2022-05-25T14:33:28.000Z","size":1113,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-03T08:47:34.209Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryaa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-25T14:30:33.000Z","updated_at":"2022-05-25T14:30:55.000Z","dependencies_parsed_at":"2023-04-21T10:32:40.077Z","dependency_job_id":null,"html_url":"https://github.com/ryaa/camera-preview-capacitor-2","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryaa%2Fcamera-preview-capacitor-2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryaa%2Fcamera-preview-capacitor-2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryaa%2Fcamera-preview-capacitor-2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryaa%2Fcamera-preview-capacitor-2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryaa","download_url":"https://codeload.github.com/ryaa/camera-preview-capacitor-2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240181465,"owners_count":19761076,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T05:25:31.342Z","updated_at":"2025-02-22T13:36:00.377Z","avatar_url":"https://github.com/ryaa.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Capacitor Camera Preview\n\nCapacitor plugin that allows camera interaction from Javascript and HTML (based on cordova-plugin-camera-preview)\n\n**Releases are being kept up to date when appropriate. However, this plugin is under constant development. As such it is recommended to use master to always have the latest fixes \u0026 features.**\n\n**PR's are greatly appreciated. Maintainer(s) wanted.**\n\n\u003c!-- # Features\n\n\u003cul\u003e\n  \u003cli\u003eStart a camera preview from HTML code.\u003c/li\u003e\n  \u003cli\u003eMaintain HTML interactivity.\u003c/li\u003e\n  \u003cli\u003eDrag the preview box.\u003c/li\u003e\n  \u003cli\u003eSet camera color effect.\u003c/li\u003e\n  \u003cli\u003eSend the preview box to back of the HTML content.\u003c/li\u003e\n  \u003cli\u003eSet a custom position for the camera preview box.\u003c/li\u003e\n  \u003cli\u003eSet a custom size for the preview box.\u003c/li\u003e\n  \u003cli\u003eSet a custom alpha for the preview box.\u003c/li\u003e\n  \u003cli\u003eSet the focus mode, zoom, color effects, exposure mode, white balance mode and exposure compensation\u003c/li\u003e\n  \u003cli\u003eTap to focus\u003c/li\u003e\n\u003c/ul\u003e --\u003e\n\n# Installation\n\n\u003c!-- Use any one of the installation methods listed below depending on which framework you use. --\u003e\n\n\u003c!-- To install the master version with latest fixes and features --\u003e\n\n\u003c!-- ```\ncordova plugin add https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git\n\nionic cordova plugin add https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git\n\nmeteor add cordova:cordova-plugin-camera-preview@https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git#[latest_commit_id]\n\n\u003cplugin spec=\"https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git\" source=\"git\" /\u003e\n``` --\u003e\n\n\u003c!-- or if you want to use the last released version on npm --\u003e\n\n```\nyarn add @capacitor-community/camera-preview\n\nor\n\nnpm install @capacitor-community/camera-preview\n```\nThen run\n```\nnpx cap sync\n```\n\n#### Android Quirks\n\nOn Android remember to add the plugin to `MainActivity`\n```java\nimport com.ahm.capacitor.camera.preview.CameraPreview;\n\n\nthis.init(savedInstanceState, new ArrayList\u003cClass\u003c? extends Plugin\u003e\u003e() {{\n      // Additional plugins you've installed go here\n      // Ex: add(TotallyAwesomePlugin.class);\n      add(CameraPreview.class);\n}});\n```\n\n#### Web Quirks\nAdd `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\n\u003c!--\n#### iOS Quirks\nIf you are developing for iOS 10+ you must also add the following to your config.xml\n\n```xml\n\u003cconfig-file platform=\"ios\" target=\"*-Info.plist\" parent=\"NSCameraUsageDescription\" overwrite=\"true\"\u003e\n  \u003cstring\u003eAllow the app to use your camera\u003c/string\u003e\n\u003c/config-file\u003e --\u003e\n\n\u003c!-- or for Phonegap --\u003e\n\n\u003c!-- \u003cgap:config-file platform=\"ios\" target=\"*-Info.plist\" parent=\"NSCameraUsageDescription\" overwrite=\"true\"\u003e\n  \u003cstring\u003eAllow the app to use your camera\u003c/string\u003e\n\u003c/gap:config-file\u003e\n``` --\u003e\n\u003c!--\n#### Android Quirks (older devices)\nWhen using the plugin for older devices, the camera preview will take the focus inside the app once initialized.\nIn order to prevent the app from closing when a user presses the back button, the event for the camera view is disabled.\nIf you still want the user to navigate, you can add a listener for the back event for the preview\n(see \u003ccode\u003e[onBackButton](#onBackButton)\u003c/code\u003e)\n --\u003e\n\n# Methods\n\n### start(options)\n\nStarts the camera preview instance.\n\u003cbr\u003e\n\n| Option   | values        | descriptions                                                           |\n|----------|---------------|------------------------------------------------------------------------|\n| position | front \\| rear | Show front or rear camera when start the preview. Defaults to front    |\n| width    | number        | (optional) The preview width in pixels, default window.screen.width (applicable to the android and ios platforms only)                                                                 |\n| height   | number        | (optional) The preview height in pixels, default window.screen.height  (applicable to the android and ios platforms only)                                                              |\n| x        | number        | (optional) The x origin, default 0 (applicable to the android and ios platforms only)    |\n| y        | number        | (optional) The y origin, default 0 (applicable to the android and ios platforms only)    |\n| toBack   | boolean       | (optional) Brings your html in front of your preview, default false (applicable to the android and ios platforms only) |\n| 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)           |\n| rotateWhenOrientationChanged | boolean   | (optional) Rotate preview when orientation changes (applicable to the ios platforms only; default value is true)                                                      |\n| storeToFile | boolean       | (optional) Capture images to a file and return back the file path instead of returning base64 encoded data, default false. |\n| 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) |\n| disableAudio | boolean | (optional) Disables audio stream to prevent permission requests, default false. (applicable to web only) |\n| lockAndroidOrientation | boolean | (optional) Locks device orientation when camer is showing, default false. (applicable to Android only) |\n\n\u003c!-- \u003cstrong\u003eOptions:\u003c/strong\u003e\nAll options stated are optional and will default to values here\n\n* `x` - Defaults to 0\n* `y` - Defaults to 0\n* `width` - Defaults to window.screen.width\n* `height` - Defaults to window.screen.height\n* `camera` - See \u003ccode\u003e[CAMERA_DIRECTION](#camera_Settings.CameraDirection)\u003c/code\u003e - Defaults to front camera\n* `toBack` - Defaults to false - Set to true if you want your html in front of your preview\n* `tapPhoto` - Defaults to true - Does not work if toBack is set to false in which case you use the takePicture method\n* `tapFocus` - Defaults to false - Allows the user to tap to focus, when the view is in the foreground\n* `previewDrag` - Defaults to false - Does not work if toBack is set to false\n* `storeToFile` - Defaults to false - Capture images to a file and return back the file path instead of returning base64 encoded data.\n* `disableExifHeaderStripping` - 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) --\u003e\n\n```javascript\nimport { Plugins } from \"@capacitor/core\"\nconst { CameraPreview } = Plugins;\nimport { CameraPreviewOptions } from '@capacitor-community/camera-preview';\n\nconst cameraPreviewOptions: CameraPreviewOptions = {\n  position: 'rear',\n  height: 1920,\n  width: 1080\n};\nCameraPreview.start(cameraPreviewOptions);\n```\n\nRemember to add the style below on your app's HTML or body element:\n\n```css\nion-content {\n  --background: transparent;\n}\n```\nTake 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:\n\n```css\n.my-custom-camera-preview-content {\n  --background: transparent;\n}\n```\n\n### stop()\n\n\u003cinfo\u003eStops the camera preview instance.\u003c/info\u003e\u003cbr/\u003e\n\n```javascript\nCameraPreview.stop();\n```\n\n### flip()\n\u003cinfo\u003eSwitch between rear and front camera only for android and ios, web is not supported\u003c/info\u003e\n```javascript\nCameraPreview.flip()\n```\n\n\u003c!-- ### switchCamera([successCallback, errorCallback])\n\n\u003cinfo\u003eSwitch between the rear camera and front camera, if available.\u003c/info\u003e\u003cbr/\u003e\n\n```javascript\nCameraPreview.switchCamera();\n```\n\n### show([successCallback, errorCallback])\n\n\u003cinfo\u003eShow the camera preview box.\u003c/info\u003e\u003cbr/\u003e\n\n```javascript\nCameraPreview.show();\n```\n\n### hide([successCallback, errorCallback])\n\n\u003cinfo\u003eHide the camera preview box.\u003c/info\u003e\u003cbr/\u003e\n\n```javascript\nCameraPreview.hide();\n``` --\u003e\n\n### capture(options)\n\n| Option   | values        | descriptions                                                         |\n|----------|---------------|----------------------------------------------------------------------|\n| quality  | number        | (optional) The picture quality, 0 - 100, default 85                  |\n| width    | number        | (optional) The picture width, default 0 (Device default)             |\n| height   | number        | (optional) The picture height, default 0 (Device default)            |\n\n\u003c!-- \u003cinfo\u003eTake the picture. If width and height are not specified or are 0 it will use the defaults. If width and height are specified, it will choose a supported photo size that is closest to width and height specified and has closest aspect ratio to the preview. The argument `quality` defaults to `85` and specifies the quality/compression value: `0=max compression`, `100=max quality`.\u003c/info\u003e\u003cbr/\u003e --\u003e\n\n```javascript\nimport { CameraPreviewFlashMode } from '@capacitor-community/camera-preview';\n\nconst cameraPreviewPictureOptions: CameraPreviewPictureOptions = {\n  quality: 50\n};\n\nconst result = await CameraPreview.capture(cameraPreviewPictureOptions);\nconst base64PictureData = result.value;\n\n// do sometime with base64PictureData\n\n```\n\n### captureSample(options)\n\n| Option   | values        | descriptions                                                         |\n|----------|---------------|----------------------------------------------------------------------|\n| quality  | number        | (optional) The picture quality, 0 - 100, default 85                  |\n\n\u003cinfo\u003eCaptures 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`.\u003c/info\u003e\u003cbr/\u003e\n\n```javascript\nimport { CameraSampleOptions } from '@capacitor-community/camera-preview';\n\nconst cameraSampleOptions: CameraSampleOptions = {\n  quality: 50\n};\n\nconst result = await CameraPreview.captureSample(cameraSampleOptions);\nconst base64PictureData = result.value;\n\n// do something with base64PictureData\n\n```\n\n### getSupportedFlashModes()\n\n\u003cinfo\u003eGet the flash modes supported by the camera device currently started. Returns an array containing supported flash modes. See \u003ccode\u003e[FLASH_MODE](#camera_Settings.FlashMode)\u003c/code\u003e for possible values that can be returned\u003c/info\u003e\u003cbr/\u003e\n\n```javascript\nimport { CameraPreviewFlashMode } from '@capacitor-community/camera-preview';\n\nconst flashModes = await CameraPreview.getSupportedFlashModes();\nconst supportedFlashModes: CameraPreviewFlashMode[] = flashModes.result;\n```\n### setFlashMode(options)\n\n\u003cinfo\u003eSet the flash mode. See \u003ccode\u003e[FLASH_MODE](#camera_Settings.FlashMode)\u003c/code\u003e for details about the possible values for flashMode.\u003c/info\u003e\u003cbr/\u003e\n\n```javascript\nconst CameraPreviewFlashMode: CameraPreviewFlashMode = 'torch';\n\nCameraPreview.setFlashMode(cameraPreviewFlashMode);\n```\n\n### startRecordVideo(options)  ---- ANDROID only\n\n\u003cinfo\u003eStart capturing video\u003c/info\u003e\u003cbr/\u003e\n\n```javascript\nconst cameraPreviewOptions: CameraPreviewOptions = {\n  position: 'front',\n  width: window.screen.width,\n  height: window.screen.height,\n};\n\nCameraPreview.startRecordVideo(cameraPreviewOptions);\n```\n\n### stopCaptureVideo()  ---- ANDROID only\n\n\u003cinfo\u003eFinish capturing a video. The captured video will be returned as a file path and the video format is .mp4\u003c/info\u003e\u003cbr/\u003e\n\n```javascript\nconst resultRecordVideo = await CameraPreview.stopRecordVideo();\nthis.stopCamera();\n```\n\n# Settings\n\n\u003ca name=\"camera_Settings.FlashMode\"\u003e\u003c/a\u003e\n\n### FLASH_MODE\n\n\u003cinfo\u003eFlash mode settings:\u003c/info\u003e\u003cbr/\u003e\n\n| Name    | Type    | Default | Note          |\n| ------- | ------- | ------- | ------------- |\n| OFF     | string  | off     |               |\n| ON      | string  | on      |               |\n| AUTO    | string  | auto    |               |\n| RED_EYE | string  | red-eye | Android Only  |\n| TORCH   | string  | torch   |               |\n\n\u003c!--\n\n# Settings\n\n\u003ca name=\"camera_Settings.FocusMode\"\u003e\u003c/a\u003e\n\n### FOCUS_MODE\n\n\u003cinfo\u003eFocus mode settings:\u003c/info\u003e\u003cbr/\u003e\n\n| Name | Type | Default | Note |\n| --- | --- | --- | --- |\n| FIXED | string | fixed |  |\n| AUTO | string | auto |  |\n| CONTINUOUS | string | continuous | IOS Only |\n| CONTINUOUS_PICTURE | string | continuous-picture | Android Only |\n| CONTINUOUS_VIDEO | string | continuous-video | Android Only |\n| EDOF | string | edof | Android Only |\n| INFINITY | string | infinity | Android Only |\n| MACRO | string | macro | Android Only |\n\n\u003ca name=\"camera_Settings.FlashMode\"\u003e\u003c/a\u003e\n\n### FLASH_MODE\n\n\u003cinfo\u003eFlash mode settings:\u003c/info\u003e\u003cbr/\u003e\n\n| Name | Type | Default | Note |\n| --- | --- | --- | --- |\n| OFF | string | off |  |\n| ON | string | on |  |\n| AUTO | string | auto |  |\n| RED_EYE | string | red-eye | Android Only |\n| TORCH | string | torch |  |\n\n\u003ca name=\"camera_Settings.CameraDirection\"\u003e\u003c/a\u003e\n\n### CAMERA_DIRECTION\n\n\u003cinfo\u003eCamera direction settings:\u003c/info\u003e\u003cbr/\u003e\n\n| Name | Type | Default |\n| --- | --- | --- |\n| BACK | string | back |\n| FRONT | string | front |\n\n\u003ca name=\"camera_Settings.ColorEffect\"\u003e\u003c/a\u003e\n\n### COLOR_EFFECT\n\n\u003cinfo\u003eColor effect settings:\u003c/info\u003e\u003cbr/\u003e\n\n| Name | Type | Default | Note |\n| --- | --- | --- | --- |\n| AQUA | string | aqua | Android Only |\n| BLACKBOARD | string | blackboard | Android Only |\n| MONO | string | mono | |\n| NEGATIVE | string | negative | |\n| NONE | string | none | |\n| POSTERIZE | string | posterize | |\n| SEPIA | string | sepia | |\n| SOLARIZE | string | solarize | Android Only |\n| WHITEBOARD | string | whiteboard | Android Only |\n\n\u003ca name=\"camera_Settings.ExposureMode\"\u003e\u003c/a\u003e\n\n### EXPOSURE_MODE\n\n\u003cinfo\u003eExposure mode settings:\u003c/info\u003e\u003cbr/\u003e\n\n| Name | Type | Default | Note |\n| --- | --- | --- | --- |\n| AUTO | string | auto | IOS Only |\n| CONTINUOUS | string | continuous | |\n| CUSTOM | string | custom | |\n| LOCK | string | lock | IOS Only |\n\nNote: Use AUTO to allow the device automatically adjusts the exposure once and then changes the exposure mode to LOCK.\n\n\u003ca name=\"camera_Settings.WhiteBalanceMode\"\u003e\u003c/a\u003e\n\n### WHITE_BALANCE_MODE\n\n\u003cinfo\u003eWhite balance mode settings:\u003c/info\u003e\u003cbr/\u003e\n\n| Name | Type | Default | Note |\n| --- | --- | --- | --- |\n| LOCK | string | lock | |\n| AUTO | string | auto | |\n| CONTINUOUS | string | continuous | IOS Only |\n| INCANDESCENT | string | incandescent | |\n| CLOUDY_DAYLIGHT | string | cloudy-daylight | |\n| DAYLIGHT | string | daylight | |\n| FLUORESCENT | string | fluorescent | |\n| SHADE | string | shade | |\n| TWILIGHT | string | twilight | |\n| WARM_FLUORESCENT | string | warm-fluorescent | |\n\n# IOS Quirks\nIt is not possible to use your computers webcam during testing in the simulator, you must device test.\n\n# Customize Android Support Library versions (Android only)\nThe default `ANDROID_SUPPORT_LIBRARY_VERSION` is set to `26+`.\nIf you need a different version, add argument `--variable ANDROID_SUPPORT_LIBRARY_VERSION=\"{version}\"`.\n\nOr edit `config.xml` with following,\n\n```xml\n\u003cplugin name=\"cordova-plugin-camera-preview\" spec=\"X.X.X\"\u003e\n  \u003cvariable name=\"ANDROID_SUPPORT_LIBRARY_VERSION\" value=\"26+\" /\u003e\n\u003c/plugin\u003e\n```\n\n# Sample App\n\n\u003ca href=\"https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview-sample-app\"\u003ecordova-plugin-camera-preview-sample-app\u003c/a\u003e for a complete working Cordova example for Android and iOS platforms.\n\n# Screenshots\n\n\u003cimg src=\"https://raw.githubusercontent.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview/master/img/android-1.png\"/\u003e \u003cimg hspace=\"20\" src=\"https://raw.githubusercontent.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview/master/img/android-2.png\"/\u003e\n\n# Credits\n\nMaintained by [Weston Ganger](https://westonganger.com) - [@westonganger](https://github.com/westonganger)\n\nCreated by Marcel Barbosa Pinto [@mbppower](https://github.com/mbppower)\n --\u003e\n\n# Demo\n\nA working example can be found at [Demo](https://github.com/capacitor-community/camera-preview/tree/master/demo)\n\nTo 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.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryaa%2Fcamera-preview-capacitor-2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryaa%2Fcamera-preview-capacitor-2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryaa%2Fcamera-preview-capacitor-2/lists"}