@opexa/portal-components 0.0.954 → 0.0.955
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.
|
@@ -13,7 +13,7 @@ export interface UseCameraReturn<T extends string = never> {
|
|
|
13
13
|
open(): Promise<void>;
|
|
14
14
|
openNativeCamera(direction: 'front' | 'back'): Promise<File | null>;
|
|
15
15
|
close(): Promise<void>;
|
|
16
|
-
snap():
|
|
16
|
+
snap(): CameraData | null;
|
|
17
17
|
reopen(): Promise<void>;
|
|
18
18
|
reset(): Promise<void>;
|
|
19
19
|
data: CameraData | null;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { CameraDirection } from '@capacitor/camera';
|
|
2
2
|
import { isBoolean } from 'lodash-es';
|
|
3
3
|
import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
|
|
4
|
-
import invariant from 'tiny-invariant';
|
|
5
4
|
import { useMediaQuery } from 'usehooks-ts';
|
|
6
5
|
export function useCamera(options = {}) {
|
|
7
6
|
const videoRef = useRef(null);
|
|
@@ -122,76 +121,33 @@ export function useCamera(options = {}) {
|
|
|
122
121
|
resolve();
|
|
123
122
|
});
|
|
124
123
|
}, []);
|
|
125
|
-
const snap = useCallback(
|
|
126
|
-
setData(null);
|
|
127
|
-
setError(null);
|
|
128
|
-
setSnapping(true);
|
|
124
|
+
const snap = useCallback(() => {
|
|
129
125
|
const video = videoRef.current;
|
|
126
|
+
if (!video)
|
|
127
|
+
return null;
|
|
130
128
|
const canvas = document.createElement('canvas');
|
|
131
129
|
const context = canvas.getContext('2d');
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
video.currentTime = 1;
|
|
130
|
+
if (!context)
|
|
131
|
+
return null;
|
|
135
132
|
canvas.width = video.videoWidth;
|
|
136
133
|
canvas.height = video.videoHeight;
|
|
137
|
-
context.
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
return setError({
|
|
146
|
-
name: 'CameraError',
|
|
147
|
-
message: "'canvas.toBlob' failed to create blob",
|
|
148
|
-
});
|
|
149
|
-
}
|
|
150
|
-
const url = canvas.toDataURL('image/jpeg', 1);
|
|
151
|
-
const file = new File([blob], `${crypto.randomUUID()}.jpeg`, {
|
|
152
|
-
type: 'image/jpeg',
|
|
153
|
-
endings: 'native',
|
|
154
|
-
lastModified: Date.now(),
|
|
155
|
-
});
|
|
156
|
-
const image = new Image();
|
|
157
|
-
image.src = url;
|
|
158
|
-
image.alt = '';
|
|
159
|
-
image.width = canvas.width;
|
|
160
|
-
image.height = canvas.height;
|
|
161
|
-
if (!image.complete || image.naturalWidth === 0) {
|
|
162
|
-
await new Promise((resolve, reject) => {
|
|
163
|
-
image.onload = () => resolve();
|
|
164
|
-
image.onerror = () => reject();
|
|
165
|
-
});
|
|
166
|
-
}
|
|
167
|
-
const data = {
|
|
168
|
-
url,
|
|
169
|
-
file,
|
|
170
|
-
image,
|
|
171
|
-
};
|
|
172
|
-
if (!options.transform) {
|
|
173
|
-
setData(data);
|
|
174
|
-
setSnapping(false);
|
|
175
|
-
resolve(data);
|
|
176
|
-
return;
|
|
177
|
-
}
|
|
178
|
-
const transformResult = await options.transform({
|
|
179
|
-
...data,
|
|
180
|
-
video,
|
|
181
|
-
canvas,
|
|
182
|
-
});
|
|
183
|
-
if (transformResult.ok) {
|
|
184
|
-
setData(transformResult.data);
|
|
185
|
-
resolve(transformResult.data);
|
|
186
|
-
}
|
|
187
|
-
else {
|
|
188
|
-
setError(transformResult.error);
|
|
189
|
-
resolve(null);
|
|
190
|
-
}
|
|
191
|
-
setSnapping(false);
|
|
192
|
-
}, 'image/jpeg', 1);
|
|
134
|
+
context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
135
|
+
const url = canvas.toDataURL('image/jpeg', 0.9);
|
|
136
|
+
const arr = atob(url.split(',')[1]);
|
|
137
|
+
const u8arr = new Uint8Array(arr.length);
|
|
138
|
+
for (let i = 0; i < arr.length; i++)
|
|
139
|
+
u8arr[i] = arr.charCodeAt(i);
|
|
140
|
+
const file = new File([u8arr], `${crypto.randomUUID()}.jpeg`, {
|
|
141
|
+
type: 'image/jpeg',
|
|
193
142
|
});
|
|
194
|
-
|
|
143
|
+
const image = new Image();
|
|
144
|
+
image.src = url;
|
|
145
|
+
image.width = canvas.width;
|
|
146
|
+
image.height = canvas.height;
|
|
147
|
+
const data = { url, file, image };
|
|
148
|
+
setData(data);
|
|
149
|
+
return data;
|
|
150
|
+
}, []);
|
|
195
151
|
const reset = useCallback(() => {
|
|
196
152
|
setData(null);
|
|
197
153
|
setError(null);
|