@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:

npm install @microblink/camera-manager
# or
yarn add @microblink/camera-manager
# or
pnpm add @microblink/camera-manager

Usage

Basic Example

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

CameraManager class

• 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.

UI Integration

To use the built-in UI, use:

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

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

Internationalization

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

• 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.