adds audio streaming

README.md

@@ -1,2 +1,6 @@
 # rust-projects
-Some simple rust projects for learning
+
+This is a playground for quick-and-dirty projects in Rust for learning. Once a
+project matures, I usually moves it to its own repository.
+
+1. [Leptos UI](./leptos) a simple SPA using leptos.

leptos/Cargo.toml

@@ -6,15 +6,19 @@ edition = "2024"
 [dependencies]
 codee = { version = "0.3.0", features = ["json_serde"] }
 console_error_panic_hook = "0.1.7"
-leptos = { version = "0.7.7", features = ["csr", "nightly", "tracing"] }
+leptos = { version = "0.7.7", features = ["csr", "tracing"] }
 leptos-qr-scanner = { git = "https://github.com/dilawar/leptos-qr-scanner" }
-leptos-use = { version = "0.15.7", features = ["storage", "docs" ] }
+leptos-use = { version = "0.15.7", features = [
+  "storage",
+  "docs",
+  "use_user_media",
+] }
 leptos_meta = "0.7.7"
 leptos_router = { version = "0.7.7", features = ["tracing"] }
 reactive_stores = "0.1.8"
 serde = { workspace = true, features = ["derive"] }
 stylance = "0.5.5"
-thaw = { version = "0.4.4", features = ["csr", "nightly"] }
+thaw = { version = "0.4.4", features = ["csr"] }
 tracing.workspace = true
 tracing-subscriber.workspace = true
 tracing-subscriber-wasm = "0.1.0"

leptos/README.md

@@ -0,0 +1,6 @@
+# Leptos UI
+
+A simple SPA using leptos. 
+
+- A QR Scanner
+- A Audio Recorder

leptos/rust-toolchain.toml

@@ -1,3 +1,2 @@
 [toolchain]
-channel = "nightly"
 targets = ["wasm32-unknwon-unknown"]

leptos/src/app.rs

@@ -26,6 +26,7 @@ pub fn App() -> impl IntoView {
                     <a href="/">"Home"</a>
                     <a href="/form">"Form"</a>
                     <a href="/qr">"QR Scanner"</a>
+                    <a href="/audio">"Audio Rec"</a>
                     <Show when=move || { logged_in.get() }>
                         <login::Logout />
                     </Show>
@@ -34,6 +35,7 @@ pub fn App() -> impl IntoView {
                     <Routes fallback=|| "Page not found.">
                         <Route path=path!("/") view=Home />
                         <Route path=path!("/qr") view=QrScanner />
+                        <Route path=path!("/audio") view=AudioStream />
                     </Routes>
                 </main>
                 <div class=styles::loading>

leptos/src/components/audio.rs

@@ -0,0 +1,61 @@
+//! Audio Streamer component
+
+use leptos::prelude::*;
+use leptos_use::{use_user_media_with_options, UseUserMediaOptions, UseUserMediaReturn};
+use thaw::*;
+
+use crate::css::styles;
+
+#[component]
+pub fn AudioStream() -> impl IntoView {
+    let node = NodeRef::<leptos::html::Audio>::new();
+
+    let start_rec = RwSignal::new(true);
+    let result = RwSignal::new_local("".to_string());
+
+    // Create options to fetch only audio stream.
+    let options = UseUserMediaOptions::default().video(false).audio(true);
+
+    let UseUserMediaReturn {
+        stream,
+        start,
+        stop,
+        ..
+    } = use_user_media_with_options(options);
+
+    // start/stop recording 
+    let _effect = Effect::watch(
+        move || start_rec.get(),
+        move |val, _prev, _| {
+            if !val {
+                tracing::info!("Stopping recording.");
+                stop();
+            } else {
+                tracing::info!("Starting recording.");
+                start();
+            }
+        },
+        true, /* Trigger it as soon as possible */
+    );
+
+    Effect::new(move |_| {
+        tracing::debug!("State of the recording: {}.", start_rec.get_untracked());
+        node.get().map(|v| match stream.get() {
+            Some(Ok(s)) => {
+                tracing::debug!("Setting stream {s:?} to src...");
+                v.set_src_object(Some(&s));
+            },
+            Some(Err(e)) => tracing::error!("Failed to get media stream: {e:?}"),
+            None => tracing::debug!("No stream yet"),
+        });
+    });
+
+    view! {
+        <Space vertical=true>
+            // Eventually I was to draw something related to audio stream here.
+            <canvas />
+            <audio node_ref=node controls  />
+            <Switch checked=start_rec label="Start Record" />
+        </Space>
+    }
+}

leptos/src/components/mod.rs

@@ -8,3 +8,6 @@ pub use login::*;
 
 pub(crate) mod qr;
 pub use qr::*;
+
+pub(crate) mod audio;
+pub use audio::*;