Merge pull request #130 from hcandelaria/user-media-api

Synphonyte · Jul 15, 2024 · d3de53a · d3de53a
2 parents 9c035d5 + bb01774
commit d3de53a
Show file tree

Hide file tree

Showing 16 changed files with 692 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### New Functions 🚀
+
+- `use_user_media`
+
 ### New Features 🚀
 
 - Codecs:

diff --git a/Cargo.toml b/Cargo.toml
@@ -73,6 +73,7 @@ features = [
     "MediaDevices",
     "MediaQueryList",
     "MediaStream",
+    "MediaStreamConstraints",
     "MediaStreamTrack",
     "MessageEvent",
     "MouseEvent",
@@ -146,4 +147,4 @@ wasm_ssr = []
 [package.metadata.docs.rs]
 features = ["math", "docs", "ssr"]
 rustdoc-args = ["--cfg=web_sys_unstable_apis"]
-rustc-args = ["--cfg=web_sys_unstable_apis"]
+rustc-args = ["--cfg=web_sys_unstable_apis"]
diff --git a/docs/book/src/SUMMARY.md b/docs/book/src/SUMMARY.md
@@ -49,6 +49,7 @@
 - [use_preferred_contrast](browser/use_preferred_contrast.md)
 - [use_preferred_dark](browser/use_preferred_dark.md)
 - [use_service_worker](browser/use_service_worker.md)
+- [use_user_media](browser/use_user_media.md)
 - [use_web_notification](browser/use_web_notification.md)
 
 # Sensors

diff --git a/docs/book/src/browser/use_user_media.md b/docs/book/src/browser/use_user_media.md
@@ -0,0 +1,3 @@
+# use_user_media
+
+<!-- cmdrun python3 ../extract_doc_comment.py use_user_media  -->
diff --git a/examples/Cargo.toml b/examples/Cargo.toml
@@ -55,6 +55,7 @@ members = [
     "use_throttle_fn",
     "use_timeout_fn",
     "use_timestamp",
+    "use_user_media",
     "use_web_notification",
     "use_websocket",
     "use_webtransport",

diff --git a/examples/use_user_media/Cargo.toml b/examples/use_user_media/Cargo.toml
@@ -0,0 +1,16 @@
+[package]
+name = "use_user_media"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+leptos = { version = "0.6", features = ["nightly", "csr"] }
+console_error_panic_hook = "0.1"
+console_log = "1"
+log = "0.4"
+leptos-use = { path = "../..", features = ["docs"] }
+web-sys = "0.3"
+
+[dev-dependencies]
+wasm-bindgen = "0.2"
+wasm-bindgen-test = "0.3.0"
diff --git a/examples/use_user_media/README.md b/examples/use_user_media/README.md
@@ -0,0 +1,23 @@
+A simple example for `use_user_media`.
+
+If you don't have it installed already, install [Trunk](https://trunkrs.dev/) and [Tailwind](https://tailwindcss.com/docs/installation)
+as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target:
+
+```bash
+cargo install trunk
+npm install -D tailwindcss @tailwindcss/forms
+rustup toolchain install nightly
+rustup target add wasm32-unknown-unknown
+```
+
+Then, open two terminals. In the first one, run:
+
+```
+npx tailwindcss -i ./input.css -o ./style/output.css --watch
+```
+
+In the second one, run:
+
+```bash
+trunk serve --open
+```
diff --git a/examples/use_user_media/Trunk.toml b/examples/use_user_media/Trunk.toml
@@ -0,0 +1,2 @@
+[build]
+public_url = "/demo/"
diff --git a/examples/use_user_media/index.html b/examples/use_user_media/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link data-trunk rel="css" href="style/output.css">
+  </head>
+  <body></body>
+</html>
diff --git a/examples/use_user_media/input.css b/examples/use_user_media/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/examples/use_user_media/rust-toolchain.toml b/examples/use_user_media/rust-toolchain.toml
@@ -0,0 +1,2 @@
+[toolchain]
+channel = "nightly"
diff --git a/examples/use_user_media/src/main.rs b/examples/use_user_media/src/main.rs
@@ -0,0 +1,57 @@
+use leptos::*;
+use leptos_use::docs::demo_or_body;
+use leptos_use::{use_user_media, UseUserMediaReturn};
+
+#[component]
+fn Demo() -> impl IntoView {
+    let video_ref = create_node_ref::<leptos::html::Video>();
+
+    let UseUserMediaReturn {
+        stream,
+        enabled,
+        set_enabled,
+        ..
+    } = use_user_media();
+
+    create_effect(move |_| {
+        match stream.get() {
+            Some(Ok(s)) => {
+                video_ref.get().map(|v| v.set_src_object(Some(&s)));
+                return;
+            }
+            Some(Err(e)) => logging::error!("Failed to get media stream: {:?}", e),
+            None => logging::log!("No stream yet"),
+        }
+
+        video_ref.get().map(|v| v.set_src_object(None));
+    });
+
+    view! {
+        <div class="flex flex-col gap-4 text-center">
+            <div>
+                <button on:click=move |_| set_enabled(
+                    !enabled(),
+                )>{move || if enabled() { "Stop" } else { "Start" }} video</button>
+            </div>
+
+            <div>
+                <video
+                    node_ref=video_ref
+                    controls=false
+                    autoplay=true
+                    muted=true
+                    class="h-96 w-auto"
+                ></video>
+            </div>
+        </div>
+    }
+}
+
+fn main() {
+    _ = console_log::init_with_level(log::Level::Debug);
+    console_error_panic_hook::set_once();
+
+    mount_to(demo_or_body(), || {
+        view! { <Demo/> }
+    })
+}