@microblink/camera-manager

This package provides camera management for web applications. It handles camera selection, permissions, video stream management, and provides access to video frames for further processing. It is framework-agnostic and can be used with or without a UI.

Overview

- Handles camera selection, permissions, and video stream lifecycle.
- Provides access to video frames for downstream processing.
- Can be used standalone or with the included UI components.
- Used by @microblink/blinkid-ux-manager and @microblink/blinkid.

Installation

Install from npm using your preferred package manager:

``sh
npm install @microblink/camera-manager


or

yarn add @microblink/camera-manager

or

pnpm add @microblink/camera-manager
`

Usage

$3

`js
import { CameraManager } from "@microblink/camera-manager";

const cameraManager = new CameraManager();

// Start the camera stream (auto-selects the best camera)
await cameraManager.startCameraStream();

// Optionally, attach the video to a DOM element
const video = document.getElementById("video");
cameraManager.initVideoElement(video);

// Capture frames for processing
const removeCallback = cameraManager.addFrameCaptureCallback((imageData) => {
// Process imageData (instance of ImageData)
});

// Stop the camera when done
cameraManager.stopStream();
`

See the camera-manager example for more usage details.

API

$3

- startCameraStream(options?): Starts the camera stream. Options allow selecting a specific camera or facing mode.
- initVideoElement(videoElement): Attaches a video element for preview.
- addFrameCaptureCallback(callback): Registers a callback to receive frames as ImageData during capture. Returns a cleanup function.
- startFrameCapture(): Starts capturing frames for processing.
- stopFrameCapture(): Stops capturing frames but keeps the stream active.
- stopStream(): Stops the camera stream and video playback.
- setResolution(resolution): Sets the desired video resolution (e.g., "1080p").
- setFacingFilter(facingModes): Filters available cameras by facing mode ("front" or "back").
- getCameraDevices(): Returns available camera devices.
- selectCamera(camera): Selects a specific camera device.
- setCameraMirrorX(mirrorX): Mirrors the video horizontally if needed.
- reset(): Resets the camera manager and stops all streams.

$3

To use the built-in UI, use:

`js
import { createCameraManagerUi } from "@microblink/camera-manager";

const cameraUi = await createCameraManagerUi(cameraManager, document.body);
// Optionally, add cleanup:
cameraUi.dismount();
`

$3

You can customize UI strings either when creating the camera UI or at runtime:

`
const cameraUi = await createCameraManagerUi(
cameraManager,
undefined,
{
localizationStrings: {
selected_camera: "My Updated String",
},
},
);
`

At runtime:

`
cameraUi.updateLocalization({
select_camera: "My updated string",
});

``

#### Provided Translations

Click to see all available translation files

- ak.ts
- am.ts
- ar.ts
- bn.ts
- cs.ts
- da.ts
- de.ts
- el.ts
- en.ts
- en_GB.ts
- es.ts
- es_MX.ts
- fa-latn.ts
- fi.ts
- fil.ts
- fr.ts
- fr_CA.ts
- ha.ts
- he.ts
- hi.ts
- hr.ts
- hu.ts
- id.ts
- is.ts
- it.ts
- ja.ts
- ka_GE.ts
- kk.ts
- km_KH.ts
- ko.ts
- lv.ts
- ms.ts
- ne.ts
- nl.ts
- no.ts
- pl.ts
- ps_AF.ts
- pt.ts
- pt_BR.ts
- ro.ts
- ru.ts
- si.ts
- sk.ts
- sl.ts
- sr.ts
- sv.ts
- sw.ts
- th.ts
- tr.ts
- uk.ts
- ur.ts
- uz.ts
- vi.ts
- yo.ts
- zh_CN.ts
- zh_TW.ts

---
You can import any of these files directly or use them as a starting point for your own localization.