0xchaser-camera-preview 7.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CapacitorCommunityCameraPreview.podspec +17 -0
- package/LICENSE +21 -0
- package/Package.swift +28 -0
- package/README.md +481 -0
- package/android/build.gradle +57 -0
- package/android/src/main/AndroidManifest.xml +5 -0
- package/android/src/main/java/com/ahm/capacitor/camera/preview/CameraActivity.java +1070 -0
- package/android/src/main/java/com/ahm/capacitor/camera/preview/CameraPreview.java +519 -0
- package/android/src/main/java/com/ahm/capacitor/camera/preview/CustomSurfaceView.java +23 -0
- package/android/src/main/java/com/ahm/capacitor/camera/preview/CustomTextureView.java +29 -0
- package/android/src/main/java/com/ahm/capacitor/camera/preview/DragAndDropView.java +118 -0
- package/android/src/main/java/com/ahm/capacitor/camera/preview/Preview.java +386 -0
- package/android/src/main/java/com/ahm/capacitor/camera/preview/TapGestureDetector.java +24 -0
- package/android/src/main/res/layout/camera_activity.xml +68 -0
- package/android/src/main/res/values/camera_ids.xml +4 -0
- package/android/src/main/res/values/camera_theme.xml +9 -0
- package/dist/esm/definitions.d.ts +84 -0
- package/dist/esm/definitions.js +2 -0
- package/dist/esm/definitions.js.map +1 -0
- package/dist/esm/index.d.ts +4 -0
- package/dist/esm/index.js +7 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/web.d.ts +27 -0
- package/dist/esm/web.js +141 -0
- package/dist/esm/web.js.map +1 -0
- package/dist/plugin.cjs.js +155 -0
- package/dist/plugin.cjs.js.map +1 -0
- package/dist/plugin.js +158 -0
- package/dist/plugin.js.map +1 -0
- package/ios/Sources/CameraPreviewPlugin/CameraController.swift +643 -0
- package/ios/Sources/CameraPreviewPlugin/CameraPreviewPlugin.swift +405 -0
- package/ios/Sources/CameraPreviewPlugin/ShapesOverlayView.swift +48 -0
- package/ios/Tests/CameraPreviewPluginTests/CameraPreviewPluginTests.swift +5 -0
- package/package.json +111 -0
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
require 'json'
|
|
2
|
+
|
|
3
|
+
package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
|
|
4
|
+
|
|
5
|
+
Pod::Spec.new do |s|
|
|
6
|
+
s.name = 'CapacitorCommunityCameraPreview'
|
|
7
|
+
s.version = package['version']
|
|
8
|
+
s.summary = package['description']
|
|
9
|
+
s.license = package['license']
|
|
10
|
+
s.homepage = 'https://github.com/capacitor-community/camera-preview.git'
|
|
11
|
+
s.author = package['author']
|
|
12
|
+
s.source = { :git => 'https://github.com/capacitor-community/camera-preview.git', :tag => s.version.to_s }
|
|
13
|
+
s.source_files = 'ios/Sources/**/*.{swift,h,m,c,cc,mm,cpp}'
|
|
14
|
+
s.ios.deployment_target = '14.0'
|
|
15
|
+
s.dependency 'Capacitor'
|
|
16
|
+
s.swift_version = '5.1'
|
|
17
|
+
end
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) Ariel Hernandez Musa.
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/Package.swift
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
// swift-tools-version: 5.9
|
|
2
|
+
import PackageDescription
|
|
3
|
+
|
|
4
|
+
let package = Package(
|
|
5
|
+
name: "CapacitorCommunityCameraPreview",
|
|
6
|
+
platforms: [.iOS(.v14)],
|
|
7
|
+
products: [
|
|
8
|
+
.library(
|
|
9
|
+
name: "CapacitorCommunityCameraPreview",
|
|
10
|
+
targets: ["CameraPreviewPlugin"])
|
|
11
|
+
],
|
|
12
|
+
dependencies: [
|
|
13
|
+
.package(url: "https://github.com/ionic-team/capacitor-swift-pm.git", from: "8.0.0")
|
|
14
|
+
],
|
|
15
|
+
targets: [
|
|
16
|
+
.target(
|
|
17
|
+
name: "CameraPreviewPlugin",
|
|
18
|
+
dependencies: [
|
|
19
|
+
.product(name: "Capacitor", package: "capacitor-swift-pm"),
|
|
20
|
+
.product(name: "Cordova", package: "capacitor-swift-pm")
|
|
21
|
+
],
|
|
22
|
+
path: "ios/Sources/CameraPreviewPlugin"),
|
|
23
|
+
.testTarget(
|
|
24
|
+
name: "CameraPreviewPluginTests",
|
|
25
|
+
dependencies: ["CameraPreviewPlugin"],
|
|
26
|
+
path: "ios/Tests/CameraPreviewPluginTests")
|
|
27
|
+
]
|
|
28
|
+
)
|
package/README.md
ADDED
|
@@ -0,0 +1,481 @@
|
|
|
1
|
+
<p align="center"><br><img src="https://user-images.githubusercontent.com/236501/85893648-1c92e880-b7a8-11ea-926d-95355b8175c7.png" width="128" height="128" /></p>
|
|
2
|
+
<h3 align="center">Capacitor Camera Preview</h3>
|
|
3
|
+
<p align="center"><strong><code>@capacitor-community/camera-preview</code></strong></p>
|
|
4
|
+
<br>
|
|
5
|
+
<p align="center"><strong>CAPACITOR 7</strong></p><br>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
Capacitor plugin that allows camera interaction from Javascript and HTML<br>(based on cordova-plugin-camera-preview).
|
|
9
|
+
</p>
|
|
10
|
+
<br>
|
|
11
|
+
Version 7 of this plugin requires Capacitor 7.
|
|
12
|
+
|
|
13
|
+
If you are using Capacitor 6, use [version 6.1](https://github.com/capacitor-community/camera-preview/releases/tag/v6.0.1)
|
|
14
|
+
|
|
15
|
+
If you are using Capacitor 5, use [version 5](https://github.com/capacitor-community/camera-preview/releases/tag/v5.0.0)
|
|
16
|
+
|
|
17
|
+
If you are using Capacitor 4, use [version 4](https://github.com/capacitor-community/camera-preview/releases/tag/v4.0.0)
|
|
18
|
+
|
|
19
|
+
If you are using Capacitor 3, use [version 3](https://github.com/capacitor-community/camera-preview/releases/tag/v3.1.2)
|
|
20
|
+
|
|
21
|
+
If you are using Capacitor 2, use [version 1](https://github.com/capacitor-community/camera-preview/releases/tag/v1.2.1)
|
|
22
|
+
|
|
23
|
+
**PR's are greatly appreciated.**
|
|
24
|
+
|
|
25
|
+
-- [@arielhernandezmusa](https://github.com/arielhernandezmusa) and [@pbowyer](https://github.com/pbowyer), current maintainers
|
|
26
|
+
|
|
27
|
+
<!-- # Features
|
|
28
|
+
|
|
29
|
+
<ul>
|
|
30
|
+
<li>Start a camera preview from HTML code.</li>
|
|
31
|
+
<li>Maintain HTML interactivity.</li>
|
|
32
|
+
<li>Drag the preview box.</li>
|
|
33
|
+
<li>Set camera color effect.</li>
|
|
34
|
+
<li>Send the preview box to back of the HTML content.</li>
|
|
35
|
+
<li>Set a custom position for the camera preview box.</li>
|
|
36
|
+
<li>Set a custom size for the preview box.</li>
|
|
37
|
+
<li>Set a custom alpha for the preview box.</li>
|
|
38
|
+
<li>Set the focus mode, zoom, color effects, exposure mode, white balance mode and exposure compensation</li>
|
|
39
|
+
<li>Tap to focus</li>
|
|
40
|
+
</ul> -->
|
|
41
|
+
|
|
42
|
+
# Installation
|
|
43
|
+
|
|
44
|
+
```
|
|
45
|
+
yarn add @capacitor-community/camera-preview
|
|
46
|
+
|
|
47
|
+
or
|
|
48
|
+
|
|
49
|
+
npm install @capacitor-community/camera-preview
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
Then run
|
|
53
|
+
|
|
54
|
+
```
|
|
55
|
+
npx cap sync
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Extra Android installation steps
|
|
59
|
+
|
|
60
|
+
**Important** `camera-preview` 3+ requires Gradle 7. If you are using Gradle 4, please use [version 2](https://github.com/capacitor-community/camera-preview/tree/v2.1.0) of this plugin.
|
|
61
|
+
|
|
62
|
+
Open `android/app/src/main/AndroidManifest.xml` and above the closing `</manifest>` tag add this line to request the CAMERA permission:
|
|
63
|
+
|
|
64
|
+
```xml
|
|
65
|
+
<uses-permission android:name="android.permission.CAMERA" />
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
For more help consult the [Capacitor docs](https://capacitorjs.com/docs/android/configuration#configuring-androidmanifestxml).
|
|
69
|
+
|
|
70
|
+
### Variables
|
|
71
|
+
|
|
72
|
+
This plugin will use the following project variables (defined in your app's `variables.gradle` file):
|
|
73
|
+
|
|
74
|
+
- `androidxExifInterfaceVersion`: version of `androidx.exifinterface:exifinterface` (default: `1.3.6`)
|
|
75
|
+
|
|
76
|
+
## Extra iOS installation steps
|
|
77
|
+
|
|
78
|
+
You 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.
|
|
79
|
+
|
|
80
|
+
## Extra Web installation steps
|
|
81
|
+
|
|
82
|
+
Add `import { CameraPreview } from '@capacitor-community/camera-preview';` in the file where you want to use the plugin.
|
|
83
|
+
|
|
84
|
+
then in html add `<div id="cameraPreview"></div>`
|
|
85
|
+
|
|
86
|
+
and `CameraPreview.start({ parent: "cameraPreview"});` will work.
|
|
87
|
+
|
|
88
|
+
# Methods
|
|
89
|
+
|
|
90
|
+
### start(options)
|
|
91
|
+
|
|
92
|
+
Starts the camera preview instance.
|
|
93
|
+
|
|
94
|
+
<br>
|
|
95
|
+
|
|
96
|
+
| Option | values | descriptions |
|
|
97
|
+
| ---------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
98
|
+
| position | front \| rear | Show front or rear camera when start the preview. Defaults to front |
|
|
99
|
+
| width | number (integer !) | (optional) The preview width in pixels, default window.screen.width (applicable to the android and ios platforms only) |
|
|
100
|
+
| height | number (integer !) | (optional) The preview height in pixels, default window.screen.height (applicable to the android and ios platforms only) |
|
|
101
|
+
| x | number (integer !) | (optional) The x origin, default 0 (applicable to the android and ios platforms only) |
|
|
102
|
+
| y | number (integer !) | (optional) The y origin, default 0 (applicable to the android and ios platforms only) |
|
|
103
|
+
| toBack | boolean | (optional) Brings your html in front of your preview, default false (applicable to the android and ios platforms only) |
|
|
104
|
+
| 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) |
|
|
105
|
+
| rotateWhenOrientationChanged | boolean | (optional) Rotate preview when orientation changes (applicable to the ios platforms only; default value is true) |
|
|
106
|
+
| storeToFile | boolean | (optional) Capture images to a file and return back the file path instead of returning base64 encoded data, default false. |
|
|
107
|
+
| 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) |
|
|
108
|
+
| 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 |
|
|
109
|
+
| disableAudio | boolean | (optional) Disables audio stream to prevent permission requests, default false. (applicable to web and iOS only) |
|
|
110
|
+
| lockAndroidOrientation | boolean | (optional) Locks device orientation when camera is showing, default false. (applicable to Android only) |
|
|
111
|
+
| enableOpacity | boolean | (optional) Make the camera preview see-through. Ideal for augmented reality uses. Default false (applicable to Android and web only) |
|
|
112
|
+
| enableZoom | boolean | (optional) Set if you can pinch to zoom. Default false (applicable to the android and ios platforms only) |
|
|
113
|
+
|
|
114
|
+
<!-- <strong>Options:</strong>
|
|
115
|
+
All options stated are optional and will default to values here
|
|
116
|
+
|
|
117
|
+
* `x` - Defaults to 0
|
|
118
|
+
* `y` - Defaults to 0
|
|
119
|
+
* `width` - Defaults to window.screen.width
|
|
120
|
+
* `height` - Defaults to window.screen.height
|
|
121
|
+
* `camera` - See <code>[CAMERA_DIRECTION](#camera_Settings.CameraDirection)</code> - Defaults to front camera
|
|
122
|
+
* `toBack` - Defaults to false - Set to true if you want your html in front of your preview
|
|
123
|
+
* `tapPhoto` - Defaults to true - Does not work if toBack is set to false in which case you use the takePicture method
|
|
124
|
+
* `tapFocus` - Defaults to false - Allows the user to tap to focus, when the view is in the foreground
|
|
125
|
+
* `previewDrag` - Defaults to false - Does not work if toBack is set to false
|
|
126
|
+
* `storeToFile` - Defaults to false - Capture images to a file and return back the file path instead of returning base64 encoded data.
|
|
127
|
+
* `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) -->
|
|
128
|
+
|
|
129
|
+
```javascript
|
|
130
|
+
import { CameraPreview, CameraPreviewOptions } from '@capacitor-community/camera-preview';
|
|
131
|
+
|
|
132
|
+
const cameraPreviewOptions: CameraPreviewOptions = {
|
|
133
|
+
position: 'rear',
|
|
134
|
+
height: 1920,
|
|
135
|
+
width: 1080
|
|
136
|
+
};
|
|
137
|
+
CameraPreview.start(cameraPreviewOptions);
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
Remember to add the style below on your app's HTML or body element:
|
|
141
|
+
|
|
142
|
+
```css
|
|
143
|
+
ion-content {
|
|
144
|
+
--background: transparent;
|
|
145
|
+
}
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
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:
|
|
149
|
+
|
|
150
|
+
```css
|
|
151
|
+
.my-custom-camera-preview-content {
|
|
152
|
+
--background: transparent;
|
|
153
|
+
}
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
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
|
|
157
|
+
Ex: VueJS >> App.vue component
|
|
158
|
+
|
|
159
|
+
```html
|
|
160
|
+
<template>
|
|
161
|
+
<ion-app id="app">
|
|
162
|
+
<ion-router-outlet />
|
|
163
|
+
</ion-app>
|
|
164
|
+
</template>
|
|
165
|
+
|
|
166
|
+
<style>
|
|
167
|
+
#app {
|
|
168
|
+
background-color: transparent !important;
|
|
169
|
+
}
|
|
170
|
+
<style>
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
### stop()
|
|
174
|
+
|
|
175
|
+
<info>Stops the camera preview instance.</info>
|
|
176
|
+
<br />
|
|
177
|
+
|
|
178
|
+
```javascript
|
|
179
|
+
CameraPreview.stop();
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
### flip()
|
|
183
|
+
|
|
184
|
+
<info>Switch between rear and front camera only for android and ios, web is not supported</info>
|
|
185
|
+
```javascript CameraPreview.flip() ```
|
|
186
|
+
|
|
187
|
+
<!-- ### switchCamera([successCallback, errorCallback])
|
|
188
|
+
|
|
189
|
+
<info>Switch between the rear camera and front camera, if available.</info><br/>
|
|
190
|
+
|
|
191
|
+
```javascript
|
|
192
|
+
CameraPreview.switchCamera();
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
### show([successCallback, errorCallback])
|
|
196
|
+
|
|
197
|
+
<info>Show the camera preview box.</info><br/>
|
|
198
|
+
|
|
199
|
+
```javascript
|
|
200
|
+
CameraPreview.show();
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
### hide([successCallback, errorCallback])
|
|
204
|
+
|
|
205
|
+
<info>Hide the camera preview box.</info><br/>
|
|
206
|
+
|
|
207
|
+
```javascript
|
|
208
|
+
CameraPreview.hide();
|
|
209
|
+
``` -->
|
|
210
|
+
|
|
211
|
+
### capture(options)
|
|
212
|
+
|
|
213
|
+
| Option | values | descriptions |
|
|
214
|
+
| ------- | ------ | --------------------------------------------------------- |
|
|
215
|
+
| quality | number | (optional) The picture quality, 0 - 100, default 85 |
|
|
216
|
+
| width | number | (optional) The picture width, default 0 (Device default) |
|
|
217
|
+
| height | number | (optional) The picture height, default 0 (Device default) |
|
|
218
|
+
|
|
219
|
+
<!-- <info>Take 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`.</info><br/> -->
|
|
220
|
+
|
|
221
|
+
```javascript
|
|
222
|
+
import { CameraPreviewPictureOptions } from '@capacitor-community/camera-preview';
|
|
223
|
+
|
|
224
|
+
const cameraPreviewPictureOptions: CameraPreviewPictureOptions = {
|
|
225
|
+
quality: 50
|
|
226
|
+
};
|
|
227
|
+
|
|
228
|
+
const result = await CameraPreview.capture(cameraPreviewPictureOptions);
|
|
229
|
+
const base64PictureData = result.value;
|
|
230
|
+
|
|
231
|
+
// do sometime with base64PictureData
|
|
232
|
+
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
### captureSample(options)
|
|
236
|
+
|
|
237
|
+
| Option | values | descriptions |
|
|
238
|
+
| ------- | ------ | --------------------------------------------------- |
|
|
239
|
+
| quality | number | (optional) The picture quality, 0 - 100, default 85 |
|
|
240
|
+
|
|
241
|
+
<info>
|
|
242
|
+
Captures a sample image from the video stream. Only for Android and iOS, web implementation falls back to `capture`
|
|
243
|
+
method. This can be used to perform real-time analysis on the current frame in the video. The argument `quality`
|
|
244
|
+
defaults to `85` and specifies the quality/compression value: `0=max compression`, `100=max quality`.
|
|
245
|
+
</info>
|
|
246
|
+
<br />
|
|
247
|
+
|
|
248
|
+
```javascript
|
|
249
|
+
import { CameraSampleOptions } from '@capacitor-community/camera-preview';
|
|
250
|
+
|
|
251
|
+
const cameraSampleOptions: CameraSampleOptions = {
|
|
252
|
+
quality: 50
|
|
253
|
+
};
|
|
254
|
+
|
|
255
|
+
const result = await CameraPreview.captureSample(cameraSampleOptions);
|
|
256
|
+
const base64PictureData = result.value;
|
|
257
|
+
|
|
258
|
+
// do something with base64PictureData
|
|
259
|
+
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
### getSupportedFlashModes()
|
|
263
|
+
|
|
264
|
+
<info>
|
|
265
|
+
Get the flash modes supported by the camera device currently started. Returns an array containing supported flash
|
|
266
|
+
modes. See <code>[FLASH_MODE](#camera_Settings.FlashMode)</code> for possible values that can be returned
|
|
267
|
+
</info>
|
|
268
|
+
<br />
|
|
269
|
+
|
|
270
|
+
```javascript
|
|
271
|
+
import { CameraPreviewFlashMode } from '@capacitor-community/camera-preview';
|
|
272
|
+
|
|
273
|
+
const flashModes = await CameraPreview.getSupportedFlashModes();
|
|
274
|
+
const supportedFlashModes: CameraPreviewFlashMode[] = flashModes.result;
|
|
275
|
+
```
|
|
276
|
+
|
|
277
|
+
### setFlashMode(options)
|
|
278
|
+
|
|
279
|
+
<info>
|
|
280
|
+
Set the flash mode. See <code>[FLASH_MODE](#camera_Settings.FlashMode)</code> for details about the possible values
|
|
281
|
+
for flashMode.
|
|
282
|
+
</info>
|
|
283
|
+
<br />
|
|
284
|
+
|
|
285
|
+
```javascript
|
|
286
|
+
const CameraPreviewFlashMode: CameraPreviewFlashMode = 'torch';
|
|
287
|
+
|
|
288
|
+
CameraPreview.setFlashMode(cameraPreviewFlashMode);
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
### startRecordVideo(options) ---- ANDROID and iOS only
|
|
292
|
+
|
|
293
|
+
<info>Start capturing video</info>
|
|
294
|
+
<br />
|
|
295
|
+
|
|
296
|
+
```javascript
|
|
297
|
+
const cameraPreviewOptions: CameraPreviewOptions = {
|
|
298
|
+
position: 'front',
|
|
299
|
+
width: window.screen.width,
|
|
300
|
+
height: window.screen.height,
|
|
301
|
+
};
|
|
302
|
+
|
|
303
|
+
CameraPreview.startRecordVideo(cameraPreviewOptions);
|
|
304
|
+
```
|
|
305
|
+
|
|
306
|
+
### stopRecordVideo() ---- ANDROID and iOS only
|
|
307
|
+
|
|
308
|
+
<info>Finish capturing a video. The captured video will be returned as a file path and the video format is .mp4</info>
|
|
309
|
+
<br />
|
|
310
|
+
|
|
311
|
+
```javascript
|
|
312
|
+
const resultRecordVideo = await CameraPreview.stopRecordVideo();
|
|
313
|
+
```
|
|
314
|
+
|
|
315
|
+
### setOpacity(options: CameraOpacityOptions): Promise<{}>; ---- ANDROID only
|
|
316
|
+
|
|
317
|
+
<info>Set the opacity for the camera preview</info>
|
|
318
|
+
<br />
|
|
319
|
+
|
|
320
|
+
```javascript
|
|
321
|
+
const myCamera = CameraPreview.start({ enableOpacity: true });
|
|
322
|
+
myCamera.setOpacity({ opacity: 0.4 });
|
|
323
|
+
```
|
|
324
|
+
|
|
325
|
+
### isCameraStarted() ---- ANDROID and iOS only
|
|
326
|
+
|
|
327
|
+
<info>Check or detect if the camera has been started</info>
|
|
328
|
+
<br />
|
|
329
|
+
|
|
330
|
+
```javascript
|
|
331
|
+
const { value } = await CameraPreview.isCameraStarted();
|
|
332
|
+
```
|
|
333
|
+
|
|
334
|
+
# Settings
|
|
335
|
+
|
|
336
|
+
<a name="camera_Settings.FlashMode"></a>
|
|
337
|
+
|
|
338
|
+
### FLASH_MODE
|
|
339
|
+
|
|
340
|
+
<info>Flash mode settings:</info>
|
|
341
|
+
<br />
|
|
342
|
+
|
|
343
|
+
| Name | Type | Default | Note |
|
|
344
|
+
| ------- | ------ | ------- | ------------ |
|
|
345
|
+
| OFF | string | off | |
|
|
346
|
+
| ON | string | on | |
|
|
347
|
+
| AUTO | string | auto | |
|
|
348
|
+
| RED_EYE | string | red-eye | Android Only |
|
|
349
|
+
| TORCH | string | torch | |
|
|
350
|
+
|
|
351
|
+
<!--
|
|
352
|
+
|
|
353
|
+
# Settings
|
|
354
|
+
|
|
355
|
+
<a name="camera_Settings.FocusMode"></a>
|
|
356
|
+
|
|
357
|
+
### FOCUS_MODE
|
|
358
|
+
|
|
359
|
+
<info>Focus mode settings:</info><br/>
|
|
360
|
+
|
|
361
|
+
| Name | Type | Default | Note |
|
|
362
|
+
| --- | --- | --- | --- |
|
|
363
|
+
| FIXED | string | fixed | |
|
|
364
|
+
| AUTO | string | auto | |
|
|
365
|
+
| CONTINUOUS | string | continuous | IOS Only |
|
|
366
|
+
| CONTINUOUS_PICTURE | string | continuous-picture | Android Only |
|
|
367
|
+
| CONTINUOUS_VIDEO | string | continuous-video | Android Only |
|
|
368
|
+
| EDOF | string | edof | Android Only |
|
|
369
|
+
| INFINITY | string | infinity | Android Only |
|
|
370
|
+
| MACRO | string | macro | Android Only |
|
|
371
|
+
|
|
372
|
+
<a name="camera_Settings.FlashMode"></a>
|
|
373
|
+
|
|
374
|
+
### FLASH_MODE
|
|
375
|
+
|
|
376
|
+
<info>Flash mode settings:</info><br/>
|
|
377
|
+
|
|
378
|
+
| Name | Type | Default | Note |
|
|
379
|
+
| --- | --- | --- | --- |
|
|
380
|
+
| OFF | string | off | |
|
|
381
|
+
| ON | string | on | |
|
|
382
|
+
| AUTO | string | auto | |
|
|
383
|
+
| RED_EYE | string | red-eye | Android Only |
|
|
384
|
+
| TORCH | string | torch | |
|
|
385
|
+
|
|
386
|
+
<a name="camera_Settings.CameraDirection"></a>
|
|
387
|
+
|
|
388
|
+
### CAMERA_DIRECTION
|
|
389
|
+
|
|
390
|
+
<info>Camera direction settings:</info><br/>
|
|
391
|
+
|
|
392
|
+
| Name | Type | Default |
|
|
393
|
+
| --- | --- | --- |
|
|
394
|
+
| BACK | string | back |
|
|
395
|
+
| FRONT | string | front |
|
|
396
|
+
|
|
397
|
+
<a name="camera_Settings.ColorEffect"></a>
|
|
398
|
+
|
|
399
|
+
### COLOR_EFFECT
|
|
400
|
+
|
|
401
|
+
<info>Color effect settings:</info><br/>
|
|
402
|
+
|
|
403
|
+
| Name | Type | Default | Note |
|
|
404
|
+
| --- | --- | --- | --- |
|
|
405
|
+
| AQUA | string | aqua | Android Only |
|
|
406
|
+
| BLACKBOARD | string | blackboard | Android Only |
|
|
407
|
+
| MONO | string | mono | |
|
|
408
|
+
| NEGATIVE | string | negative | |
|
|
409
|
+
| NONE | string | none | |
|
|
410
|
+
| POSTERIZE | string | posterize | |
|
|
411
|
+
| SEPIA | string | sepia | |
|
|
412
|
+
| SOLARIZE | string | solarize | Android Only |
|
|
413
|
+
| WHITEBOARD | string | whiteboard | Android Only |
|
|
414
|
+
|
|
415
|
+
<a name="camera_Settings.ExposureMode"></a>
|
|
416
|
+
|
|
417
|
+
### EXPOSURE_MODE
|
|
418
|
+
|
|
419
|
+
<info>Exposure mode settings:</info><br/>
|
|
420
|
+
|
|
421
|
+
| Name | Type | Default | Note |
|
|
422
|
+
| --- | --- | --- | --- |
|
|
423
|
+
| AUTO | string | auto | IOS Only |
|
|
424
|
+
| CONTINUOUS | string | continuous | |
|
|
425
|
+
| CUSTOM | string | custom | |
|
|
426
|
+
| LOCK | string | lock | IOS Only |
|
|
427
|
+
|
|
428
|
+
Note: Use AUTO to allow the device automatically adjusts the exposure once and then changes the exposure mode to LOCK.
|
|
429
|
+
|
|
430
|
+
<a name="camera_Settings.WhiteBalanceMode"></a>
|
|
431
|
+
|
|
432
|
+
### WHITE_BALANCE_MODE
|
|
433
|
+
|
|
434
|
+
<info>White balance mode settings:</info><br/>
|
|
435
|
+
|
|
436
|
+
| Name | Type | Default | Note |
|
|
437
|
+
| --- | --- | --- | --- |
|
|
438
|
+
| LOCK | string | lock | |
|
|
439
|
+
| AUTO | string | auto | |
|
|
440
|
+
| CONTINUOUS | string | continuous | IOS Only |
|
|
441
|
+
| INCANDESCENT | string | incandescent | |
|
|
442
|
+
| CLOUDY_DAYLIGHT | string | cloudy-daylight | |
|
|
443
|
+
| DAYLIGHT | string | daylight | |
|
|
444
|
+
| FLUORESCENT | string | fluorescent | |
|
|
445
|
+
| SHADE | string | shade | |
|
|
446
|
+
| TWILIGHT | string | twilight | |
|
|
447
|
+
| WARM_FLUORESCENT | string | warm-fluorescent | |
|
|
448
|
+
|
|
449
|
+
# IOS Quirks
|
|
450
|
+
It is not possible to use your computers webcam during testing in the simulator, you must device test.
|
|
451
|
+
|
|
452
|
+
# Customize Android Support Library versions (Android only)
|
|
453
|
+
The default `ANDROID_SUPPORT_LIBRARY_VERSION` is set to `26+`.
|
|
454
|
+
If you need a different version, add argument `--variable ANDROID_SUPPORT_LIBRARY_VERSION="{version}"`.
|
|
455
|
+
|
|
456
|
+
Or edit `config.xml` with following,
|
|
457
|
+
|
|
458
|
+
```xml
|
|
459
|
+
<plugin name="cordova-plugin-camera-preview" spec="X.X.X">
|
|
460
|
+
<variable name="ANDROID_SUPPORT_LIBRARY_VERSION" value="26+" />
|
|
461
|
+
</plugin>
|
|
462
|
+
```
|
|
463
|
+
|
|
464
|
+
# Sample App
|
|
465
|
+
|
|
466
|
+
<a href="https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview-sample-app">cordova-plugin-camera-preview-sample-app</a> for a complete working Cordova example for Android and iOS platforms.
|
|
467
|
+
|
|
468
|
+
# Screenshots
|
|
469
|
+
|
|
470
|
+
<img src="https://raw.githubusercontent.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview/master/img/android-1.png"/> <img hspace="20" src="https://raw.githubusercontent.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview/master/img/android-2.png"/>
|
|
471
|
+
|
|
472
|
+
# Credits
|
|
473
|
+
|
|
474
|
+
Maintained by [Weston Ganger](https://westonganger.com) - [@westonganger](https://github.com/westonganger)
|
|
475
|
+
|
|
476
|
+
Created by Marcel Barbosa Pinto [@mbppower](https://github.com/mbppower)
|
|
477
|
+
 -->
|
|
478
|
+
|
|
479
|
+
# Demo/Example App
|
|
480
|
+
|
|
481
|
+
A working example can be found at [Example App](https://github.com/capacitor-community/camera-preview/tree/master/example-app)
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
ext {
|
|
2
|
+
junitVersion = project.hasProperty('junitVersion') ? rootProject.ext.junitVersion : '4.13.2'
|
|
3
|
+
androidxAppCompatVersion = project.hasProperty('androidxAppCompatVersion') ? rootProject.ext.androidxAppCompatVersion : '1.7.0'
|
|
4
|
+
androidxExifInterfaceVersion = project.hasProperty('androidxExifInterfaceVersion') ? rootProject.ext.androidxExifInterfaceVersion : '1.3.7'
|
|
5
|
+
androidxJunitVersion = project.hasProperty('androidxJunitVersion') ? rootProject.ext.androidxJunitVersion : '1.2.1'
|
|
6
|
+
androidxEspressoCoreVersion = project.hasProperty('androidxEspressoCoreVersion') ? rootProject.ext.androidxEspressoCoreVersion : '3.6.1'
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
buildscript {
|
|
10
|
+
repositories {
|
|
11
|
+
mavenCentral()
|
|
12
|
+
google()
|
|
13
|
+
}
|
|
14
|
+
dependencies {
|
|
15
|
+
classpath 'com.android.tools.build:gradle:8.7.2'
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
apply plugin: 'com.android.library'
|
|
20
|
+
|
|
21
|
+
android {
|
|
22
|
+
namespace "com.ahm.capacitor.camera.preview.capacitorcamerapreview"
|
|
23
|
+
compileSdk project.hasProperty('compileSdkVersion') ? rootProject.ext.compileSdkVersion : 35
|
|
24
|
+
defaultConfig {
|
|
25
|
+
minSdkVersion project.hasProperty('minSdkVersion') ? rootProject.ext.minSdkVersion : 23
|
|
26
|
+
targetSdkVersion project.hasProperty('targetSdkVersion') ? rootProject.ext.targetSdkVersion : 35
|
|
27
|
+
versionCode 1
|
|
28
|
+
versionName "1.0"
|
|
29
|
+
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
|
|
30
|
+
}
|
|
31
|
+
buildTypes {
|
|
32
|
+
release {
|
|
33
|
+
minifyEnabled false
|
|
34
|
+
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
lintOptions {
|
|
38
|
+
abortOnError false
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
repositories {
|
|
43
|
+
google()
|
|
44
|
+
mavenCentral()
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
dependencies {
|
|
49
|
+
implementation fileTree(dir: 'libs', include: ['*.jar'])
|
|
50
|
+
implementation project(':capacitor-android')
|
|
51
|
+
implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
|
|
52
|
+
implementation "androidx.exifinterface:exifinterface:$androidxExifInterfaceVersion"
|
|
53
|
+
testImplementation "junit:junit:$junitVersion"
|
|
54
|
+
androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
|
|
55
|
+
androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
|
|
56
|
+
}
|
|
57
|
+
|