@microblink/camera-manager 7.0.0-next.9 → 7.0.1

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.
Files changed (64) hide show
  1. package/README.md +75 -5
  2. package/dist/camera-manager.js +1645 -1024
  3. package/package.json +6 -6
  4. package/types/core/Camera.d.ts +40 -2
  5. package/types/core/Camera.d.ts.map +1 -1
  6. package/types/core/CameraManager.d.ts +42 -39
  7. package/types/core/CameraManager.d.ts.map +1 -1
  8. package/types/core/VideoFrameProcessor.d.ts +61 -0
  9. package/types/core/VideoFrameProcessor.d.ts.map +1 -0
  10. package/types/core/cameraManagerStore.d.ts +2 -1
  11. package/types/core/cameraManagerStore.d.ts.map +1 -1
  12. package/types/core/cameraNames.d.ts.map +1 -1
  13. package/types/core/cameraUtils.d.ts +14 -7
  14. package/types/core/cameraUtils.d.ts.map +1 -1
  15. package/types/core/utils.d.ts.map +1 -1
  16. package/types/index.d.ts +1 -0
  17. package/types/index.d.ts.map +1 -1
  18. package/types/index.rollup.d.ts +182 -42
  19. package/types/media-mock/MediaMocker.d.ts +4 -779
  20. package/types/media-mock/MediaMocker.d.ts.map +1 -1
  21. package/types/media-mock/createInputDeviceInfo.d.ts.map +1 -1
  22. package/types/media-mock/fake-devices.d.ts +1 -788
  23. package/types/media-mock/fake-devices.d.ts.map +1 -1
  24. package/types/media-mock/fakeDevices/SamsungS21FE.d.ts +6 -0
  25. package/types/media-mock/fakeDevices/SamsungS21FE.d.ts.map +1 -0
  26. package/types/media-mock/fakeDevices/iPhone15.d.ts +6 -0
  27. package/types/media-mock/fakeDevices/iPhone15.d.ts.map +1 -0
  28. package/types/media-mock/fakeDevices/iPhoneSE.d.ts +9 -0
  29. package/types/media-mock/fakeDevices/iPhoneSE.d.ts.map +1 -0
  30. package/types/media-mock/utils.d.ts +4 -0
  31. package/types/media-mock/utils.d.ts.map +1 -1
  32. package/types/ui/CameraErrorModal.d.ts +7 -0
  33. package/types/ui/CameraErrorModal.d.ts.map +1 -0
  34. package/types/ui/CameraSelector.d.ts.map +1 -1
  35. package/types/ui/CameraUiStoreContext.d.ts +15 -2
  36. package/types/ui/CameraUiStoreContext.d.ts.map +1 -1
  37. package/types/ui/CaptureScreen.d.ts +2 -0
  38. package/types/ui/CaptureScreen.d.ts.map +1 -1
  39. package/types/ui/Header.d.ts.map +1 -1
  40. package/types/ui/RootComponent.d.ts.map +1 -1
  41. package/types/ui/SolidShadowRoot.d.ts +1 -12
  42. package/types/ui/SolidShadowRoot.d.ts.map +1 -1
  43. package/types/ui/createCameraManagerUi.d.ts +16 -8
  44. package/types/ui/createCameraManagerUi.d.ts.map +1 -1
  45. package/types/ui/determineFitMode.d.ts +35 -0
  46. package/types/ui/determineFitMode.d.ts.map +1 -0
  47. package/types/ui/determineFitMode.test.d.ts +5 -0
  48. package/types/ui/determineFitMode.test.d.ts.map +1 -0
  49. package/types/ui/getVisibleVideoArea.d.ts +10 -0
  50. package/types/ui/getVisibleVideoArea.d.ts.map +1 -0
  51. package/types/ui/getVisibleVideoArea.test.d.ts +5 -0
  52. package/types/ui/getVisibleVideoArea.test.d.ts.map +1 -0
  53. package/types/ui/locales/en.d.ts +7 -1
  54. package/types/ui/locales/en.d.ts.map +1 -1
  55. package/types/ui/zustandRefStore.d.ts +2 -0
  56. package/types/ui/zustandRefStore.d.ts.map +1 -1
  57. package/types/core/createCustomImageData.d.ts +0 -14
  58. package/types/core/createCustomImageData.d.ts.map +0 -1
  59. package/types/core/imageDataUtils.d.ts +0 -6
  60. package/types/core/imageDataUtils.d.ts.map +0 -1
  61. package/types/core/videoToImageData.d.ts +0 -5
  62. package/types/core/videoToImageData.d.ts.map +0 -1
  63. package/types/ui/ErrorAlert.d.ts +0 -8
  64. package/types/ui/ErrorAlert.d.ts.map +0 -1
@@ -1,3 +1,5 @@
1
+ import { Owner } from 'solid-js';
2
+ import { Promisable } from 'type-fest';
1
3
  import { SetStoreFunction } from 'solid-js/store';
2
4
  import { StoreApi } from 'zustand/vanilla';
3
5
 
@@ -22,23 +24,53 @@ export declare class Camera {
22
24
  torchSupported: boolean;
23
25
  torchEnabled: boolean;
24
26
  singleShotSupported: boolean;
27
+ maxSupportedResolution?: VideoResolutionName;
28
+ /**
29
+ * Reference to the original instance before it was proxied.
30
+ */
25
31
  original: this;
26
32
  notify: (reason?: unknown) => void;
27
33
  notifyStateChange?: (camera: Camera, reason?: unknown) => void;
28
34
  constructor(deviceInfo: InputDeviceInfo);
29
- startStream(resolution: VideoResolution): Promise<MediaStream>;
35
+ startStream(resolution: VideoResolutionName): Promise<MediaStream>;
36
+ /**
37
+ * Acquires a camera stream with the specified resolution.
38
+ * If acquisition fails, it tries a lower resolution as fallback.
39
+ */
40
+ private acquireStreamWithFallback;
41
+ /**
42
+ * Populates the camera instance with capabilities from the stream.
43
+ */
44
+ private populateCapabilities;
30
45
  toggleTorch(): Promise<boolean>;
31
46
  stopStream(): void;
32
47
  getVideoTrack(): MediaStreamTrack | undefined;
33
48
  }
34
49
 
50
+ declare class CameraError extends Error {
51
+ code: CameraErrorCode;
52
+ constructor(message: string, code: CameraErrorCode, cause?: Error);
53
+ }
54
+
55
+ declare type CameraErrorCode = "PERMISSION_DENIED" | (string & {});
56
+
57
+ declare type CameraGetter = (cameras: Camera[]) => Camera | undefined;
58
+
35
59
  export declare class CameraManager {
36
60
  #private;
61
+ get userInitiatedAbort(): boolean;
62
+ set userInitiatedAbort(value: boolean);
63
+ /**
64
+ * Sets the area of the video frame that will be extracted.
65
+ * @param extractionArea The area of the video frame that will be extracted.
66
+ */
67
+ setExtractionArea(extractionArea: ExtractionArea): void;
68
+ constructor(options?: Partial<CameraManagerOptions>, videoFrameProcessorOptions?: VideoFrameProcessorInitOptions);
37
69
  /**
38
70
  * Sets the resolution of the camera stream
39
71
  */
40
- setResolution: (resolution: VideoResolution) => Promise<void>;
41
- get resolution(): "HD" | "FHD" | "UHD";
72
+ setResolution: (resolution: VideoResolutionName) => Promise<void>;
73
+ get resolution(): "720p" | "1080p" | "4k";
42
74
  /**
43
75
  * True if there is a video playing or capturing
44
76
  * TODO: see if we can simplify this, by observing the video playback state
@@ -49,9 +81,9 @@ export declare class CameraManager {
49
81
  * Returns the cameras that are available to the user, filtered by the facing mode.
50
82
  * If no facing mode is set, all cameras are returned.
51
83
  */
52
- getCameras(): Camera[];
84
+ getCameraDevices(): Promise<Camera[]>;
53
85
  /**
54
- * Single-time setup for a video element
86
+ * Initializes the CameraManager with a video element.
55
87
  */
56
88
  initVideoElement(videoElement: HTMLVideoElement): void;
57
89
  /**
@@ -62,9 +94,11 @@ export declare class CameraManager {
62
94
  * @returns a cleanup function to remove the callback
63
95
  */
64
96
  addFrameCaptureCallback(frameCaptureCallback: FrameCaptureCallback): () => boolean;
65
- deinitVideoElement(): void;
97
+ releaseVideoElement(): void;
66
98
  /**
67
99
  * Select a camera device from available ones.
100
+ *
101
+ * TODO: might become a private method in the future as an implementation detail of `startStream`
68
102
  */
69
103
  selectCamera(camera: Camera): Promise<void>;
70
104
  /**
@@ -78,17 +112,14 @@ export declare class CameraManager {
78
112
  */
79
113
  startPlayback(): Promise<void>;
80
114
  /**
81
- * Starts playback and frame capturing.
115
+ * Starts capturing frames from the video element.
82
116
  */
83
- startFrameCapture(): Promise<void>;
117
+ startFrameCapture: () => Promise<void>;
84
118
  /**
85
119
  * Starts a best-effort camera stream. Will pick a camera automatically if
86
120
  * none is selected.
87
- * TODO: Rename method
88
121
  */
89
- startCameraStream({ autoplay, preferredCamera, preferredFacing, }?: {
90
- autoplay?: boolean;
91
- } & CameraPreference): Promise<void>;
122
+ startCameraStream(params?: StartCameraStreamOptions): Promise<void>;
92
123
  /**
93
124
  * Pauses capturing frames without pausing playback.
94
125
  */
@@ -103,9 +134,8 @@ export declare class CameraManager {
103
134
  pausePlayback(): void;
104
135
  /**
105
136
  * If true, the video and captured frames will be mirrored horizontally.
106
- * TODO: apply when needed
107
137
  */
108
- setMirrorX(mirrorX: boolean): void;
138
+ setCameraMirrorX(mirrorX: boolean): void;
109
139
  /**
110
140
  * Allows the user to subscribe to state changes inside the Camera Manager.
111
141
  * Implemented using Zustand. For usage information, see
@@ -119,7 +149,7 @@ export declare class CameraManager {
119
149
  /**
120
150
  * Resets the CameraManager and stop all streams
121
151
  */
122
- destroy(): void;
152
+ reset(): void;
123
153
  }
124
154
 
125
155
  export declare type CameraManagerComponent = {
@@ -128,10 +158,10 @@ export declare type CameraManagerComponent = {
128
158
  updateLocalization: SetStoreFunction<CameraUiLocalizationStrings>;
129
159
  /** Dismounts the component from the DOM and unloads the SDK */
130
160
  dismount: () => void;
131
- /** Sets a callback to be called when the component is unmounted */
132
- addOnDismountCallback: (fn: DismountCallback) => void;
133
- /** Removes a callback that was set with `addOnDismountCallback` */
134
- removeOnDismountCallback: (fn: DismountCallback) => void;
161
+ /** Sets a callback to be called when the component is unmounted.
162
+ * Returns a cleanup function that removes the callback when called.
163
+ */
164
+ addOnDismountCallback: (fn: DismountCallback) => () => void;
135
165
  /**
136
166
  * The feedback layer node that can be used to append custom feedback elements
137
167
  */
@@ -140,6 +170,15 @@ export declare type CameraManagerComponent = {
140
170
  * The overlay layer node that can be used to append custom overlay elements
141
171
  */
142
172
  overlayLayerNode: HTMLDivElement;
173
+ /**
174
+ * https://docs.solidjs.com/reference/reactive-utilities/get-owner
175
+ */
176
+ owner: Owner;
177
+ };
178
+
179
+ export declare type CameraManagerOptions = {
180
+ /** If true, the camera stream will be mirrored horizontally when started. */
181
+ mirrorFrontCameras: boolean;
143
182
  };
144
183
 
145
184
  export declare type CameraManagerStore = {
@@ -179,7 +218,7 @@ export declare type CameraManagerStore = {
179
218
  /**
180
219
  * If the Camera manager has encountered an error, this will be set to the error.
181
220
  */
182
- errorState?: Error;
221
+ errorState?: Error | CameraError;
183
222
  };
184
223
 
185
224
  /**
@@ -204,15 +243,23 @@ export declare const cameraManagerStore: Omit<StoreApi<CameraManagerStore>, "sub
204
243
  };
205
244
  };
206
245
 
246
+ export declare type CameraManagerUiOptions = {
247
+ localizationStrings?: Partial<CameraUiLocalizationStrings>;
248
+ showMirrorCameraButton?: boolean;
249
+ };
250
+
207
251
  export declare type CameraPreference = {
208
- preferredCamera: Camera;
209
- preferredFacing?: never;
252
+ preferredCamera: Camera | undefined;
253
+ preferredFacing?: undefined;
254
+ } | {
255
+ preferredCamera: CameraGetter | undefined;
256
+ preferredFacing?: undefined;
210
257
  } | {
211
258
  preferredFacing: FacingMode;
212
- preferredCamera?: never;
259
+ preferredCamera?: undefined;
213
260
  } | {
214
- preferredCamera?: never;
215
- preferredFacing?: never;
261
+ preferredCamera?: undefined;
262
+ preferredFacing?: undefined;
216
263
  };
217
264
 
218
265
  export declare type CameraUiLocaleRecord = typeof _default;
@@ -221,12 +268,10 @@ export declare type CameraUiLocalizationStrings = {
221
268
  [K in keyof CameraUiLocaleRecord]: CameraUiLocaleRecord[K] | (string & {});
222
269
  };
223
270
 
224
- /**
225
- * Copyright (c) 2025 Microblink Ltd. All rights reserved.
226
- */
227
271
  export declare type CameraUiRefs = {
228
272
  feedbackLayer: HTMLDivElement;
229
273
  overlayLayer: HTMLDivElement;
274
+ owner: Owner;
230
275
  };
231
276
 
232
277
  export declare const cameraUiRefStore: Omit<StoreApi<CameraUiRefs>, "subscribe"> & {
@@ -239,28 +284,74 @@ export declare const cameraUiRefStore: Omit<StoreApi<CameraUiRefs>, "subscribe">
239
284
  };
240
285
  };
241
286
 
287
+ /**
288
+ * Copyright (c) 2025 Microblink Ltd. All rights reserved.
289
+ */
290
+ export declare type CanvasRenderingMode = "2d" | "webgl2";
291
+
242
292
  /**
243
293
  * Creates a new Camera Manager UI component.
244
294
  */
245
- export declare function createCameraManagerUi(cameraManager: CameraManager, target?: HTMLElement): Promise<CameraManagerComponent>;
295
+ export declare function createCameraManagerUi(cameraManager: CameraManager, target?: HTMLElement, { localizationStrings, showMirrorCameraButton, }?: CameraManagerUiOptions): Promise<CameraManagerComponent>;
246
296
 
247
297
  /**
248
298
  * Copyright (c) 2025 Microblink Ltd. All rights reserved.
249
299
  */
250
300
  declare const _default: {
251
301
  readonly selected_camera: "Selected camera";
302
+ readonly loading_cameras: "Loading cameras...";
303
+ readonly select_a_camera: "Select a camera";
252
304
  readonly select_camera: "Select camera";
253
305
  readonly close: "Close";
254
306
  readonly torch: "Torch";
255
307
  readonly mirror_camera: "Mirror camera";
256
- readonly modal_title: "Scan a document";
308
+ readonly scan_document: "Scan a document";
309
+ readonly camera_error_title: "Camera permission required";
310
+ readonly camera_error_details: "Please allow camera access in your browser and try again.";
311
+ readonly camera_error_cancel_btn: "Cancel";
312
+ readonly camera_error_primary_btn: "Retry";
257
313
  };
258
314
 
259
- declare type DismountCallback = () => void;
315
+ export declare const defaultCameraManagerOptions: CameraManagerOptions;
316
+
317
+ export declare type DismountCallback = () => void;
260
318
 
319
+ export declare type ExtractionArea = {
320
+ x: number;
321
+ y: number;
322
+ width: number;
323
+ height: number;
324
+ };
325
+
326
+ /**
327
+ * Copyright (c) 2025 Microblink Ltd. All rights reserved.
328
+ */
261
329
  export declare type FacingMode = "front" | "back" | undefined;
262
330
 
263
- export declare type FrameCaptureCallback = (frame: ImageData) => void | Promise<void>;
331
+ export declare function findResolutionKey(videoTrackResolution: Resolution): VideoResolutionName;
332
+
333
+ export declare type FrameCaptureCallback = (frame: ImageData) => Promisable<ArrayBufferLike | void>;
334
+
335
+ /**
336
+ * Converts a view to a buffer, since both match the type signature of
337
+ * `ArrayBufferLike`.
338
+ * @param buffer - The buffer or view to convert
339
+ * @returns The actual underlying buffer
340
+ */
341
+ export declare const getBuffer: (buffer: ArrayBufferLike) => ArrayBufferLike;
342
+
343
+ export declare function getNormalizedResolution(resolution: Resolution): Resolution;
344
+
345
+ export declare type ImageSource = HTMLVideoElement | HTMLCanvasElement | ImageBitmap;
346
+
347
+ /**
348
+ * Check if an ArrayBuffer is detached
349
+ * @param buffer - ArrayBuffer to check
350
+ * @returns true if the buffer is detached, false otherwise
351
+ */
352
+ export declare function isBufferDetached(buffer: ArrayBuffer): boolean;
353
+
354
+ export declare function matchClosestResolution(resolution: Resolution): VideoResolutionName;
264
355
 
265
356
  export declare const MOUNT_POINT_ID = "camera-manager-mount-point";
266
357
 
@@ -272,23 +363,72 @@ export declare type PlaybackState = "idle" | "playback" | "capturing";
272
363
  */
273
364
  export declare const resetCameraManagerStore: () => void;
274
365
 
275
- export declare type VideoResolution = keyof typeof videoResolutions;
366
+ export declare type Resolution = {
367
+ width: number;
368
+ height: number;
369
+ };
370
+
371
+ export declare function returnLongerSide(resolution: Resolution): number;
372
+
373
+ export declare type StartCameraStreamOptions = {
374
+ autoplay?: boolean;
375
+ } & CameraPreference;
376
+
377
+ /**
378
+ * VideoFrameProcessor captures frames from video or image sources using either 2D or WebGL2 rendering
379
+ */
380
+ export declare class VideoFrameProcessor {
381
+ #private;
382
+ constructor(options?: VideoFrameProcessorInitOptions);
383
+ /**
384
+ * Returns ownership of an ArrayBuffer to the processor for reuse
385
+ * This should only be called with ArrayBuffers that were originally from this processor
386
+ * Typically used after transferring the buffer to/from a worker
387
+ */
388
+ reattachArrayBuffer(arrayBuffer: ArrayBufferLike): void;
389
+ /**
390
+ * Used to check if the processor owns the buffer
391
+ */
392
+ isBufferDetached(): boolean;
393
+ /**
394
+ * Extracts image data from a source element
395
+ */
396
+ getImageData(source: ImageSource, area?: ExtractionArea): ImageData;
397
+ /**
398
+ * Used to get the current ImageData object with the current buffer. Useful
399
+ * when you need to get the same `ImageData` object multiple times after the
400
+ * original `ImageData` buffer has been detached
401
+ * @returns ImageData object with the current buffer
402
+ */
403
+ getCurrentImageData(): ImageData;
404
+ /**
405
+ * Clean up resources
406
+ */
407
+ dispose(): void;
408
+ }
409
+
410
+ export declare type VideoFrameProcessorInitOptions = {
411
+ canvasRenderingMode?: CanvasRenderingMode;
412
+ fallbackWebGlTo2d?: boolean;
413
+ };
414
+
415
+ export declare type VideoResolutionName = keyof typeof videoResolutions;
276
416
 
277
417
  /**
278
418
  * Available video resolutions for the camera stream.
279
419
  */
280
420
  export declare const videoResolutions: {
281
- HD: {
282
- width: number;
283
- height: number;
421
+ readonly "720p": {
422
+ readonly width: 1280;
423
+ readonly height: 720;
284
424
  };
285
- FHD: {
286
- width: number;
287
- height: number;
425
+ readonly "1080p": {
426
+ readonly width: 1920;
427
+ readonly height: 1080;
288
428
  };
289
- UHD: {
290
- width: number;
291
- height: number;
429
+ readonly "4k": {
430
+ readonly width: 3840;
431
+ readonly height: 2160;
292
432
  };
293
433
  };
294
434