react-native-uvc-camera

UVC camera component for React Native powered by UVCAndroid.
Android only.

Installation

npm install @prasiddha-n/react-native-uvc-camera

Quick start

import React, { useEffect, useRef } from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { UVCCamera } from '@prasiddha-n/react-native-uvc-camera';

export function UvcScreen() {
  const cameraRef = useRef<UVCCamera>(null);

  useEffect(() => {
    cameraRef.current?.openCamera();
    return () => cameraRef.current?.closeCamera();
  }, []);

  const capture = async () => {
    const photo = await cameraRef.current?.takePhoto();
    console.log(photo?.path);
  };

  return (
    <SafeAreaView style={styles.container}>
      <UVCCamera ref={cameraRef} style={styles.camera} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#000' },
  camera: { flex: 1 },
});

Add your own UI button to call capture() when you need a still image.

API surface

<UVCCamera /> is a pure view that forwards all standard ViewProps. Every interaction happens through the ref.

Imperative methods

| Method | What it does | | --- | --- | | openCamera() | Starts discovery, picks the preferred UVC device, and begins streaming to the surface. | | closeCamera() | Stops the preview and releases the active USB camera. Call on unmount or app background. | | takePhoto(): Promise<PhotoFile> | Captures a JPEG to the device temp dir and returns { path }. Add file:// when displaying the image. | | updateAspectRatio(width, height) | Persists a preferred preview size. The closest matching mode is selected on the next openCamera(). | | setCameraBright(value) | Forwards value to the UVC brightness control (library expects a 0–100 percentage). | | setCameraContrast(value) | Sets UVC contrast (integer range depends on the camera; usually 0–255). | | setCameraSaturation(value) | Adjusts saturation via the UVC control (device-specific range). | | setCameraSharpness(value) | Updates sharpness (device-specific range). | | setCameraZoom(value) | Sends a relative zoom value to the camera and toggles autofocus. Default is 500. | | setDefaultCameraVendorId(vendorId) | Stores the USB vendor id to auto-select when multiple cameras are connected. Provide the decimal form (e.g. 0x0bda → 3034). |

All setters resolve immediately; they don’t reject even if the device silently ignores out-of-range values. Clamp inputs on the JS side if your hardware requires specific limits.

Example: tweaking controls

await cameraRef.current?.updateAspectRatio(1920, 1080);
await cameraRef.current?.setCameraBright(70);
await cameraRef.current?.setCameraContrast(40);
await cameraRef.current?.setCameraSaturation(128);
await cameraRef.current?.setCameraSharpness(64);
await cameraRef.current?.setCameraZoom(600);
await cameraRef.current?.setDefaultCameraVendorId(3034);

PhotoFile shape

type PhotoFile = {
  path: string; // temp file path, prepend file:// for <Image />
};

Remember that temp files may be deleted when the app closes—move them if you need persistence.

R8 / ProGuard

If you are using R8 the shrinking and obfuscation rules are included automatically.

ProGuard users must manually add the below options.

-keep class com.herohan.uvcapp.** { *; }
-keep class com.serenegiant.usb.** { *; }
-keepclassmembers class * implements com.serenegiant.usb.IButtonCallback {*;}
-keepclassmembers class * implements com.serenegiant.usb.IFrameCallback {*;}
-keepclassmembers class * implements com.serenegiant.usb.IStatusCallback {*;}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library