@craftthingy-digital-innovation/cty-webcam-device-manager-web

Bilingual documentation: Bahasa Indonesia | English

Bahasa Indonesia

Library client-side JavaScript modular untuk menangani inisialisasi webcam, pemindaian perangkat kamera, penggantian kamera aktif, dan pengambilan gambar snapshot ke berkas canvas secara ringkas.

Fitur Utama

• 📷 Abstraksi API Kamera: Membungkus kompleksitas navigator.mediaDevices menjadi fungsi sederhana.
• ⚙️ Enumerasi Perangkat: Mengambil list kamera yang terpasang lengkap dengan label identitasnya.
• 📸 Canvas Capture: Mengambil snapshot/frame video aktif dan mengekspornya langsung menjadi Base64 DataURL (JPEG/PNG).

Instalasi

npm install @craftthingy-digital-innovation/cty-webcam-device-manager-web

Cara Penggunaan

import { WebcamDeviceManager } from '@craftthingy-digital-innovation/cty-webcam-device-manager-web';

const manager = new WebcamDeviceManager({
  videoElement: document.getElementById('webcam-video'),
  canvasElement: document.getElementById('webcam-canvas'),
  onDevicesFound: (devices) => {
    // Dipanggil saat list kamera berhasil diambil
    devices.forEach(device => {
      console.log(`Kamera: ${device.label} (ID: ${device.deviceId})`);
    });
  },
  onError: (err) => {
    console.error("Terjadi masalah akses kamera:", err);
  }
});

// 1. Dapatkan list kamera yang ada
await manager.getDevices();

// 2. Mulai streaming kamera pertama
await manager.start();

// 3. Ambil snapshot frame gambar
const dataUrl = manager.capture('image/jpeg', 0.95);
console.log("Base64 Image:", dataUrl);

// 4. Hentikan kamera saat ditutup
manager.stop();

English

A modular client-side JavaScript library to initialize webcams, scan video input devices, switch active streams, and capture snapshots to canvas elements easily.

Key Features

• 📷 Webcam API Wrapper: Wraps raw navigator.mediaDevices streaming into clean method calls.
• ⚙️ Device Enumeration: Queries available camera hardware with descriptive labels.
• 📸 Canvas Frame Capture: Snaps high-definition image frames directly into Base64 DataURLs.

Installation

npm install @craftthingy-digital-innovation/cty-webcam-device-manager-web

Usage

import { WebcamDeviceManager } from '@craftthingy-digital-innovation/cty-webcam-device-manager-web';

const manager = new WebcamDeviceManager({
  videoElement: document.getElementById('webcam-video'),
  canvasElement: document.getElementById('webcam-canvas'),
  onDevicesFound: (devices) => {
    devices.forEach(device => {
      console.log(`Device: ${device.label}`);
    });
  }
});

await manager.getDevices();
await manager.start(devices[0].deviceId);

const dataUrl = manager.capture();
manager.stop();

License

Licensed under Public-Source Corporate Royalty License (PSCRL). See LICENSE for details.