Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

use_user_media

Reactive mediaDevices.getUserMedia streaming.

Demo

Usage

use leptos::prelude::*;
use leptos::logging::{log, error};
use leptos_use_user_media::{use_user_media, UseUserMediaReturn};

#[component]
fn Demo() -> impl IntoView {
let video_ref = NodeRef::<leptos::html::Video>::new();

let UseUserMediaReturn { stream, start, .. } = use_user_media();

start();

Effect::new(move |_|
    video_ref.get().map(|v| {
        match stream.get() {
            Some(Ok(s)) => v.set_src_object(Some(&s)),
            Some(Err(e)) => error!("Failed to get media stream: {:?}", e),
            None => log!("No stream yet"),
        }
    })
);

view! { <video node_ref=video_ref controls=false autoplay=true muted=true></video> }
}

Server-Side Rendering

Make sure you follow the instructions in Server-Side Rendering.

On the server calls to start or any other way to enable the stream will be ignored and the stream will always be None.

Installation

cargo add leptos-use-user-media

Options

UseUserMediaOptions

Options for use_user_media_with_options.

Either or both constraints must be specified. If the browser cannot find all media tracks with the specified types that meet the constraints given, then the returned promise is rejected with NotFoundError

Every option is set with a builder method of the same name, e.g. UseUserMediaOptions::default().enabled(...). See also the API docs.

enabled

Type: MaybeRwSignal<bool>

If the stream is enabled. Defaults to false.

video

Type: VideoConstraints

Constraint parameter describing video media type requested The default value is true.

audio

Type: AudioConstraints

Constraint parameter describing audio media type requested The default value is false.

Types

Source

Source • Demo • Docs