Crate dioxus_cameras 

Dioxus integration for the cameras crate.

This crate owns only the Dioxus-specific glue, the HTTP preview server, the Registry backing it, the <canvas>-side WebGL2 renderer, and the hooks consumers plug into their components. Every other primitive (single-frame capture, pause/resume pump, source abstraction) lives upstream in cameras itself so non-Dioxus callers can use it too.

What’s here

• PreviewServer + start_preview_server + register_with, a loopback HTTP server that publishes the latest Frame for each stream id over /preview/{id}.bin. The listener thread is torn down when the last PreviewServer clone drops.
• Registry + LatestFrame, shared map of stream id → latest frame. The server reads from it; pumps publish to it. Cleaned up automatically when the owning component unmounts.
• use_camera_stream, high-level hook returning UseCameraStream: a status signal, an active/paused toggle, and a single-frame capture_frame callback. Wraps cameras::pump under the hood.
• use_devices / use_streams, hooks for the camera list and multi-stream id management.
• PreviewScript + StreamPreview, components that render live frames into a <canvas> via WebGL2 (NV12, BGRA, or RGBA shaders).

Wiring a Dioxus app

use dioxus_cameras::cameras::{self, CameraSource, PixelFormat, Resolution, StreamConfig};
use dioxus::prelude::*;
use dioxus_cameras::{PreviewScript, StreamPreview, register_with, start_preview_server, use_camera_stream};

fn main() {
    let server = start_preview_server().expect("preview server");
    register_with(&server, dioxus::LaunchBuilder::desktop()).launch(app);
}

fn app() -> Element {
    let source = use_signal::<Option<CameraSource>>(|| None);
    let config = StreamConfig {
        resolution: Resolution { width: 1280, height: 720 },
        framerate: 30,
        pixel_format: PixelFormat::Bgra8,
    };
    let stream = use_camera_stream(0, source, config);
    rsx! {
        StreamPreview { id: 0 }
        p { "{stream.status}" }
        button {
            onclick: move |_| stream.active.clone().set(!*stream.active.read()),
            "Toggle preview"
        }
        button {
            onclick: move |_| { let _ = stream.capture_frame.call(()); },
            "Take picture"
        }
        PreviewScript {}
    }
}

Re-exports

pub use component::PreviewScript;

pub use component::PreviewScript;

pub use component::StreamPreview;

pub use component::StreamPreview;

pub use cameras;

Structs

LatestFrame

A shareable slot holding the latest Frame for one stream.

PreviewServer

A running preview server.

Registry

A shared map from stream id to LatestFrame.

UseCameraStream

Handle returned by use_camera_stream.

UseDevices

Handle returned by use_devices.

UseStreams

Handle returned by use_streams.

Enums

StreamStatus

The lifecycle state surfaced by use_camera_stream.

Constants

PREVIEW_JS

The JavaScript blob that drives the WebGL2 preview renderer.

Functions

PreviewScript

Injects the WebGL2 preview renderer script once into the page.

StreamPreview

A <canvas> bound to the preview server for id.

get_or_create_sink

Return the LatestFrame slot for id, creating one if absent.

publish_frame

Publish frame as the latest value on sink, replacing any previous frame.

register_with

Inject the registry, port, and a keep-alive clone of server into a LaunchBuilder so that StreamPreview, use_camera_stream, and consumers of Registry can pick them up via use_context.

remove_sink

Drop the LatestFrame slot for id.

start_preview_server

Start the preview server on a random loopback port, backed by a fresh Registry.

use_camera_stream

Hook that drives a single preview stream end-to-end.

use_devices

Hook that keeps a Signal<Vec<Device>> populated with the current camera list.

use_streams

Hook that manages a dynamic list of stream ids for multi-stream apps.