{"id":13795418,"url":"https://github.com/Cap-go/capacitor-camera-preview","last_synced_at":"2025-05-12T22:30:56.219Z","repository":{"id":65308315,"uuid":"573703497","full_name":"Cap-go/capacitor-camera-preview","owner":"Cap-go","description":"Capacitor plugin that allows camera interaction from Javascript and HTML","archived":false,"fork":false,"pushed_at":"2025-05-05T09:02:35.000Z","size":2889,"stargazers_count":13,"open_issues_count":12,"forks_count":13,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-06T02:02:57.944Z","etag":null,"topics":["capacitor","capacitor-plugin","ionic"],"latest_commit_sha":null,"homepage":"https://capgo.app","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/Cap-go.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"github":"Cap-go","patreon":null,"open_collective":"capgo","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2022-12-03T06:34:22.000Z","updated_at":"2025-05-05T09:01:49.000Z","dependencies_parsed_at":"2023-01-16T12:00:37.172Z","dependency_job_id":"39378b3e-3769-47ef-8e50-13e12bc79292","html_url":"https://github.com/Cap-go/capacitor-camera-preview","commit_stats":{"total_commits":618,"total_committers":50,"mean_commits":12.36,"dds":0.7491909385113269,"last_synced_commit":"183cba0762f5cfa2a155c701f7bfd579a9f39b8d"},"previous_names":["cap-go/capacitor-camera-preview","cap-go/camera-preview"],"tags_count":179,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cap-go%2Fcapacitor-camera-preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cap-go%2Fcapacitor-camera-preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cap-go%2Fcapacitor-camera-preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cap-go%2Fcapacitor-camera-preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Cap-go","download_url":"https://codeload.github.com/Cap-go/capacitor-camera-preview/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253518954,"owners_count":21921074,"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":["capacitor","capacitor-plugin","ionic"],"created_at":"2024-08-03T23:00:56.404Z","updated_at":"2025-05-12T22:30:56.202Z","avatar_url":"https://github.com/Cap-go.png","language":"Java","funding_links":["https://github.com/sponsors/Cap-go","https://opencollective.com/capgo"],"categories":["[Capgo plugins](https://capgo.app/)","Plugins","Capgo Capacitor Plugins"],"sub_categories":["Camera \u0026 Media","Community Plugins"],"readme":"# Capacitor Camera Preview Plugin\n\n\u003ca href=\"https://capgo.app/\"\u003e\u003cimg src='https://raw.githubusercontent.com/Cap-go/capgo/main/assets/capgo_banner.png' alt='Capgo - Instant updates for capacitor'/\u003e\u003c/a\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch2\u003e\u003ca href=\"https://capgo.app/?ref=plugin\"\u003e ➡️ Get Instant updates for your App with Capgo 🚀\u003c/a\u003e\u003c/h2\u003e\n  \u003ch2\u003e\u003ca href=\"https://capgo.app/consulting/?ref=plugin\"\u003e Fix your annoying bug now, Hire a Capacitor expert 💪\u003c/a\u003e\u003c/h2\u003e\n\u003c/div\u003e\n\n\u003cp\u003e\n  Capacitor plugin that allows camera interaction from Javascript and HTML\u003cbr\u003e(based on cordova-plugin-camera-preview).\n\u003c/p\u003e\n\u003cbr\u003e\n\nThis plugin is compatible Capacitor 7 and above.\n\nUse v6 for Capacitor 6 and below.\n\n**PR's are greatly appreciated.**\n\n-- [@riderx](https://github.com/riderx), current maintainers\n\nRemember to add the style below on your app's HTML or body element:\n\n```css\n:root {\n  --ion-background-color: transparent !important;\n}\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\nIf the camera preview is not displaying after applying the above styles, apply transparent background color to the root div element of the parent component\nEx: VueJS \u003e\u003e App.vue component \n```html\n\u003ctemplate\u003e\n  \u003cion-app id=\"app\"\u003e\n    \u003cion-router-outlet /\u003e\n  \u003c/ion-app\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n#app {\n  background-color: transparent !important;\n}\n\u003cstyle\u003e\n```\n\nIf 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\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## Good to know\n\nVideo and photo taken with the plugin are never removed, so do not forget to remove them after used to not bloat the user phone.\n\nuse https://capacitorjs.com/docs/apis/filesystem#deletefile for that\n\n\n# Installation\n\n```\nyarn add @capgo/camera-preview\n\nor\n\nnpm install @capgo/camera-preview\n```\n\nThen run\n\n```\nnpx cap sync\n```\n\n## Extra Android installation steps\n\n**Important** `camera-preview` 3+ requires Gradle 7.\nOpen `android/app/src/main/AndroidManifest.xml` and above the closing `\u003c/manifest\u003e` tag add this line to request the CAMERA permission:\n\n```xml\n\u003cuses-permission android:name=\"android.permission.CAMERA\" /\u003e\n\u003cuses-permission android:name=\"android.permission.RECORD_AUDIO\" /\u003e\n\u003cuses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\" /\u003e\n\u003cuses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" /\u003e\n\n```\n\nFor more help consult the [Capacitor docs](https://capacitorjs.com/docs/android/configuration#configuring-androidmanifestxml).\n\n## Extra iOS installation steps\n\nYou will need to add two permissions to `Info.plist`. Follow the [Capacitor docs](https://capacitorjs.com/docs/ios/configuration#configuring-infoplist) 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.\n\n## Extra Web installation steps\n\nAdd `import '@capgo/camera-preview'` to you entry script in ionic on `app.module.ts`, so capacitor can register the web platform from the plugin\n\n### Exemple with Capacitor uploader:\n\nDocumentation for the [uploader](https://github.com/Cap-go/capacitor-uploader)\n\n```typescript\n  import { CameraPreview } from '@capgo/camera-preview'\n  import { Uploader } from '@capgo/capacitor-uploader';\n\n\n  async function record() {\n    await CameraPreview.startRecordVideo({ storeToFile: true })\n    await new Promise(resolve =\u003e setTimeout(resolve, 5000))\n    const fileUrl = await CameraPreview.stopRecordVideo()\n    console.log(fileUrl.videoFilePath)\n    await uploadVideo(fileUrl.videoFilePath)\n  }\n\n  async function uploadVideo(filePath: string) {\n    Uploader.addListener('events', (event) =\u003e {\n      switch (event.name) {\n        case 'uploading':\n          console.log(`Upload progress: ${event.payload.percent}%`);\n          break;\n        case 'completed':\n          console.log('Upload completed successfully');\n          console.log('Server response status code:', event.payload.statusCode);\n          break;\n        case 'failed':\n          console.error('Upload failed:', event.payload.error);\n          break;\n      }\n    });\n    try {\n      const result = await Uploader.startUpload({\n        filePath,\n        serverUrl: 'S#_PRESIGNED_URL',\n        method: 'PUT',\n        headers: {\n          'Content-Type': 'video/mp4',\n        },\n        mimeType: 'video/mp4',\n      });\n      console.log('Video uploaded successfully:', result.id);\n    } catch (error) {\n      console.error('Error uploading video:', error);\n      throw error;\n    }\n  }\n```\n\n### API\n\n\u003cdocgen-index\u003e\n\n* [`start(...)`](#start)\n* [`stop()`](#stop)\n* [`capture(...)`](#capture)\n* [`captureSample(...)`](#capturesample)\n* [`getSupportedFlashModes()`](#getsupportedflashmodes)\n* [`getHorizontalFov()`](#gethorizontalfov)\n* [`getSupportedPictureSizes()`](#getsupportedpicturesizes)\n* [`setFlashMode(...)`](#setflashmode)\n* [`flip()`](#flip)\n* [`setOpacity(...)`](#setopacity)\n* [`stopRecordVideo()`](#stoprecordvideo)\n* [`startRecordVideo(...)`](#startrecordvideo)\n* [Interfaces](#interfaces)\n* [Type Aliases](#type-aliases)\n\n\u003c/docgen-index\u003e\n\n\u003cdocgen-api\u003e\n\u003c!--Update the source file JSDoc comments and rerun docgen to update the docs below--\u003e\n\n### start(...)\n\n```typescript\nstart(options: CameraPreviewOptions) =\u003e Promise\u003cvoid\u003e\n```\n\nStart the camera preview instance.\n\n| Param         | Type                                                                  | Description                                  |\n| ------------- | --------------------------------------------------------------------- | -------------------------------------------- |\n| **`options`** | \u003ccode\u003e\u003ca href=\"#camerapreviewoptions\"\u003eCameraPreviewOptions\u003c/a\u003e\u003c/code\u003e | the options to start the camera preview with |\n\n**Since:** 0.0.1\n\n--------------------\n\n\n### stop()\n\n```typescript\nstop() =\u003e Promise\u003cvoid\u003e\n```\n\nStop the camera preview instance.\n\n**Since:** 0.0.1\n\n--------------------\n\n\n### capture(...)\n\n```typescript\ncapture(options: CameraPreviewPictureOptions) =\u003e Promise\u003c{ value: string; }\u003e\n```\n\nSwitch camera.\n\n| Param         | Type                                                                                | Description                           |\n| ------------- | ----------------------------------------------------------------------------------- | ------------------------------------- |\n| **`options`** | \u003ccode\u003e\u003ca href=\"#camerapreviewpictureoptions\"\u003eCameraPreviewPictureOptions\u003c/a\u003e\u003c/code\u003e | the options to switch the camera with |\n\n**Returns:** \u003ccode\u003ePromise\u0026lt;{ value: string; }\u0026gt;\u003c/code\u003e\n\n**Since:** 0.0.1\n\n--------------------\n\n\n### captureSample(...)\n\n```typescript\ncaptureSample(options: CameraSampleOptions) =\u003e Promise\u003c{ value: string; }\u003e\n```\n\nCapture a sample image.\n\n| Param         | Type                                                                | Description                                  |\n| ------------- | ------------------------------------------------------------------- | -------------------------------------------- |\n| **`options`** | \u003ccode\u003e\u003ca href=\"#camerasampleoptions\"\u003eCameraSampleOptions\u003c/a\u003e\u003c/code\u003e | the options to capture the sample image with |\n\n**Returns:** \u003ccode\u003ePromise\u0026lt;{ value: string; }\u0026gt;\u003c/code\u003e\n\n**Since:** 0.0.1\n\n--------------------\n\n\n### getSupportedFlashModes()\n\n```typescript\ngetSupportedFlashModes() =\u003e Promise\u003c{ result: CameraPreviewFlashMode[]; }\u003e\n```\n\nGet supported flash modes.\n\n**Returns:** \u003ccode\u003ePromise\u0026lt;{ result: CameraPreviewFlashMode[]; }\u0026gt;\u003c/code\u003e\n\n**Since:** 0.0.1\n\n--------------------\n\n\n### getHorizontalFov()\n\n```typescript\ngetHorizontalFov() =\u003e Promise\u003c{ result: any; }\u003e\n```\n\nGet horizontal field of view.\n\n**Returns:** \u003ccode\u003ePromise\u0026lt;{ result: any; }\u0026gt;\u003c/code\u003e\n\n**Since:** 0.0.1\n\n--------------------\n\n\n### getSupportedPictureSizes()\n\n```typescript\ngetSupportedPictureSizes() =\u003e Promise\u003c{ supportedPictureSizes: { facing: string; supportedPictureSizes: { width: number; height: number; }[]; }[]; }\u003e\n```\n\nGets the supported picture sizes for a given device.\n\n**Returns:** \u003ccode\u003ePromise\u0026lt;{ supportedPictureSizes: { facing: string; supportedPictureSizes: { width: number; height: number; }[]; }[]; }\u0026gt;\u003c/code\u003e\n\n--------------------\n\n\n### setFlashMode(...)\n\n```typescript\nsetFlashMode(options: { flashMode: CameraPreviewFlashMode | string; }) =\u003e Promise\u003cvoid\u003e\n```\n\nSet flash mode.\n\n| Param         | Type                                | Description                            |\n| ------------- | ----------------------------------- | -------------------------------------- |\n| **`options`** | \u003ccode\u003e{ flashMode: string; }\u003c/code\u003e | the options to set the flash mode with |\n\n**Since:** 0.0.1\n\n--------------------\n\n\n### flip()\n\n```typescript\nflip() =\u003e Promise\u003cvoid\u003e\n```\n\nFlip camera.\n\n**Since:** 0.0.1\n\n--------------------\n\n\n### setOpacity(...)\n\n```typescript\nsetOpacity(options: CameraOpacityOptions) =\u003e Promise\u003cvoid\u003e\n```\n\nSet opacity.\n\n| Param         | Type                                                                  | Description                                |\n| ------------- | --------------------------------------------------------------------- | ------------------------------------------ |\n| **`options`** | \u003ccode\u003e\u003ca href=\"#cameraopacityoptions\"\u003eCameraOpacityOptions\u003c/a\u003e\u003c/code\u003e | the options to set the camera opacity with |\n\n**Since:** 0.0.1\n\n--------------------\n\n\n### stopRecordVideo()\n\n```typescript\nstopRecordVideo() =\u003e Promise\u003c{ videoFilePath: string; }\u003e\n```\n\nStop recording video.\n\n**Returns:** \u003ccode\u003ePromise\u0026lt;{ videoFilePath: string; }\u0026gt;\u003c/code\u003e\n\n**Since:** 0.0.1\n\n--------------------\n\n\n### startRecordVideo(...)\n\n```typescript\nstartRecordVideo(options: CameraPreviewOptions) =\u003e Promise\u003cvoid\u003e\n```\n\nStart recording video.\n\n| Param         | Type                                                                  | Description                               |\n| ------------- | --------------------------------------------------------------------- | ----------------------------------------- |\n| **`options`** | \u003ccode\u003e\u003ca href=\"#camerapreviewoptions\"\u003eCameraPreviewOptions\u003c/a\u003e\u003c/code\u003e | the options to start recording video with |\n\n**Since:** 0.0.1\n\n--------------------\n\n\n### Interfaces\n\n\n#### CameraPreviewOptions\n\n| Prop                               | Type                 | Description                                                                                                                                                   |\n| ---------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **`parent`**                       | \u003ccode\u003estring\u003c/code\u003e  | Parent element to attach the video preview element to (applicable to the web platform only)                                                                   |\n| **`className`**                    | \u003ccode\u003estring\u003c/code\u003e  | Class name to add to the video preview element (applicable to the web platform only)                                                                          |\n| **`width`**                        | \u003ccode\u003enumber\u003c/code\u003e  | The preview width in pixels, default window.screen.width                                                                                                      |\n| **`height`**                       | \u003ccode\u003enumber\u003c/code\u003e  | The preview height in pixels, default window.screen.height                                                                                                    |\n| **`x`**                            | \u003ccode\u003enumber\u003c/code\u003e  | The x origin, default 0 (applicable to the android and ios platforms only)                                                                                    |\n| **`y`**                            | \u003ccode\u003enumber\u003c/code\u003e  | The y origin, default 0 (applicable to the android and ios platforms only)                                                                                    |\n| **`includeSafeAreaInsets`**        | \u003ccode\u003eboolean\u003c/code\u003e | Whether to include safe area insets in y-position calculation, default false (applicable to the ios platform only)                                            |\n| **`toBack`**                       | \u003ccode\u003eboolean\u003c/code\u003e | Brings your html in front of your preview, default false (applicable to the android only)                                                                     |\n| **`paddingBottom`**                | \u003ccode\u003enumber\u003c/code\u003e  | 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`** | \u003ccode\u003eboolean\u003c/code\u003e | Rotate preview when orientation changes (applicable to the ios platforms only; default value is true)                                                         |\n| **`position`**                     | \u003ccode\u003estring\u003c/code\u003e  | Choose the camera to use 'front' or 'rear', default 'front'                                                                                                   |\n| **`storeToFile`**                  | \u003ccode\u003eboolean\u003c/code\u003e | Defaults to false - Capture images to a file and return the file path instead of returning base64 encoded data                                                |\n| **`disableExifHeaderStripping`**   | \u003ccode\u003eboolean\u003c/code\u003e | 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)              |\n| **`enableHighResolution`**         | \u003ccode\u003eboolean\u003c/code\u003e | Defaults to false - iOS only - Activate high resolution image capture so that output images are from the highest resolution possible on the device *          |\n| **`disableAudio`**                 | \u003ccode\u003eboolean\u003c/code\u003e | Defaults to false - Disables audio stream to prevent permission requests and output switching                                                                 |\n| **`lockAndroidOrientation`**       | \u003ccode\u003eboolean\u003c/code\u003e | Android Only - Locks device orientation when camera is showing.                                                                                               |\n| **`enableOpacity`**                | \u003ccode\u003eboolean\u003c/code\u003e | Defaults to false - Android and Web only. Set if camera preview can change opacity.                                                                           |\n| **`enableZoom`**                   | \u003ccode\u003eboolean\u003c/code\u003e | Defaults to false - Android only. Set if camera preview will support pinch to zoom.                                                                           |\n| **`cameraMode`**                   | \u003ccode\u003eboolean\u003c/code\u003e | default to false - IOS only. Set the CameraPreview to use the video mode preset                                                                               |\n\n\n#### CameraPreviewPictureOptions\n\n| Prop          | Type                                                    | Description                                                                          |\n| ------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------ |\n| **`height`**  | \u003ccode\u003enumber\u003c/code\u003e                                     | The picture height, optional, default 0 (Device default)                             |\n| **`width`**   | \u003ccode\u003enumber\u003c/code\u003e                                     | The picture width, optional, default 0 (Device default)                              |\n| **`quality`** | \u003ccode\u003enumber\u003c/code\u003e                                     | The picture quality, 0 - 100, default 85                                             |\n| **`format`**  | \u003ccode\u003e\u003ca href=\"#pictureformat\"\u003ePictureFormat\u003c/a\u003e\u003c/code\u003e | The picture format, jpeg or png, default jpeg on `Web`. quality has no effect on png |\n\n\n#### CameraSampleOptions\n\n| Prop          | Type                | Description                              |\n| ------------- | ------------------- | ---------------------------------------- |\n| **`quality`** | \u003ccode\u003enumber\u003c/code\u003e | The picture quality, 0 - 100, default 85 |\n\n\n#### CameraOpacityOptions\n\n| Prop          | Type                | Description                                           |\n| ------------- | ------------------- | ----------------------------------------------------- |\n| **`opacity`** | \u003ccode\u003enumber\u003c/code\u003e | The percent opacity to set for camera view, default 1 |\n\n\n### Type Aliases\n\n\n#### CameraPosition\n\n\u003ccode\u003e\"rear\" | \"front\"\u003c/code\u003e\n\n\n#### PictureFormat\n\n\u003ccode\u003e\"jpeg\" | \"png\"\u003c/code\u003e\n\n\n#### CameraPreviewFlashMode\n\n\u003ccode\u003e\"off\" | \"on\" | \"auto\" | \"red-eye\" | \"torch\"\u003c/code\u003e\n\n\u003c/docgen-api\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCap-go%2Fcapacitor-camera-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCap-go%2Fcapacitor-camera-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCap-go%2Fcapacitor-camera-preview/lists"}