examples: record_screen

seed-rs · Jan 18, 2021 · 1942206 · 1942206
1 parent acc49be
commit 1942206
Show file tree

Hide file tree

Showing 10 changed files with 192 additions and 5 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -27,14 +27,14 @@ enclose = "1.1.8"
 gloo-timers = { version = "0.2.1", features = ["futures"] }
 gloo-file = { version = "0.1.0", features = ["futures"] }
 indexmap = "1.6.0"
-js-sys = "0.3.45"
+js-sys = "0.3.46"
 pulldown-cmark = "0.8.0"
 rand = { version = "0.8.0", features = ["small_rng"] }
 # https://docs.rs/getrandom/0.2.0/getrandom/#webassembly-support
 getrandom = { version = "0.2", features = ["js"] }
 serde = { version = "1.0.117", features = ['derive'] }
 serde_json = "1.0.59"
-wasm-bindgen = { version = "0.2.68", features = ["serde-serialize"] }
+wasm-bindgen = { version = "0.2.69", features = ["serde-serialize"] }
 wasm-bindgen-futures = "0.4.18"
 # @TODO: remove once we can use entities without `Debug` in `log!` and `error!` on `stable` Rust.
 # https://github.com/Centril/rfcs/blob/rfc/quick-debug-macro/text/0000-quick-debug-macro.md#types-which-are-not-debug
@@ -137,6 +137,7 @@ members = [
     "examples/pages_keep_state",
     "examples/resize_observer",
     "examples/rust_from_js",
+    "examples/record_screen",
     "examples/service_worker",
     "examples/subscribe",
     "examples/tests",
@@ -155,3 +156,16 @@ exclude = [
     "examples/e2e_encryption",
     "examples/server_integration",
 ]
+
+[patch.crates-io]
+# wasm-bindgen = { path = "d:/repos/wasm-bindgen" }
+# wasm-bindgen-test = { path = "d:/repos/wasm-bindgen/crates/test" }
+# wasm-bindgen-futures = { path = "d:/repos/wasm-bindgen/crates/futures" }
+# js-sys = { path = "d:/repos/wasm-bindgen/crates/js-sys" }
+# web-sys = { path = "d:/repos/wasm-bindgen/crates/web-sys" }
+
+wasm-bindgen = { git = "https://github.com/MartinKavik/wasm-bindgen", branch = "feat/webidl_getDisplayMedia" }
+wasm-bindgen-test = { git = "https://github.com/MartinKavik/wasm-bindgen", branch = "feat/webidl_getDisplayMedia" }
+wasm-bindgen-futures = { git = "https://github.com/MartinKavik/wasm-bindgen", branch = "feat/webidl_getDisplayMedia" }
+js-sys = { git = "https://github.com/MartinKavik/wasm-bindgen", branch = "feat/webidl_getDisplayMedia" }
+web-sys = { git = "https://github.com/MartinKavik/wasm-bindgen", branch = "feat/webidl_getDisplayMedia" }
diff --git a/examples/README.md b/examples/README.md
@@ -85,6 +85,9 @@ How to make HTTP request using Fetch API.
 ### [NoChange](no_change)
 How to increase render speed by `Node::NoChange`.
 
+## [Record Screen](record_screen)
+How to record the screen using the [Screen Capture API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture).
+
 ### [Todo MVC](todomvc)
 Classic TodoMVC example with Local Storage.
 

diff --git a/examples/drop_zone/Cargo.toml b/examples/drop_zone/Cargo.toml
@@ -9,4 +9,3 @@ crate-type = ["cdylib"]
 
 [dependencies]
 seed = {path = "../../"}
-wasm-bindgen-futures = "0.4.18"
diff --git a/examples/record_screen/Cargo.toml b/examples/record_screen/Cargo.toml
@@ -0,0 +1,20 @@
+[package]
+name = "record_screen"
+version = "0.1.0"
+authors = ["Martin Kavík <martin@kavik.cz>"]
+edition = "2018"
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+seed = {path = "../../"}
+
+[dependencies.web-sys]
+version = "0.3.45"
+features = [
+    "DisplayMediaStreamConstraints",
+    "MediaDevices",
+    "MediaStream",
+    "HtmlMediaElement",
+]
diff --git a/examples/record_screen/Makefile.toml b/examples/record_screen/Makefile.toml
@@ -0,0 +1,27 @@
+extend = "../../Makefile.toml"
+
+# ---- BUILD ----
+
+[tasks.build]
+alias = "default_build"
+
+[tasks.build_release]
+alias = "default_build_release"
+
+# ---- START ----
+
+[tasks.start]
+alias = "default_start"
+
+[tasks.start_release]
+alias = "default_start_release"
+
+# ---- TEST ----
+
+[tasks.test_firefox]
+alias = "default_test_firefox"
+
+# ---- LINT ----
+
+[tasks.clippy]
+alias = "default_clippy"
diff --git a/examples/record_screen/README.md b/examples/record_screen/README.md
@@ -0,0 +1,11 @@
+## Record Screen example
+
+How to record the screen using the [Screen Capture API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture).
+
+---
+
+```bash
+cargo make start
+```
+
+Open [127.0.0.1:8000](http://127.0.0.1:8000) in your browser.
diff --git a/examples/record_screen/index.html b/examples/record_screen/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <title>Record Screen example</title>
+</head>
+
+<body>
+  <section id="app"></section>
+  <script type="module">
+    import init from '/pkg/package.js';
+    init('/pkg/package_bg.wasm');
+  </script>
+</body>
+
+</html>
diff --git a/examples/record_screen/src/lib.rs b/examples/record_screen/src/lib.rs
@@ -0,0 +1,97 @@
+use seed::{prelude::*, *};
+use wasm_bindgen_futures::JsFuture;
+use web_sys::{DisplayMediaStreamConstraints, HtmlMediaElement, MediaStream};
+
+// ------ ------
+//     Init
+// ------ ------
+
+fn init(_: Url, _: &mut impl Orders<Msg>) -> Model {
+    Model::default()
+}
+
+// ------ ------
+//     Model
+// ------ ------
+
+#[derive(Default)]
+struct Model {
+    video: ElRef<HtmlMediaElement>,
+}
+
+// ------ ------
+//    Update
+// ------ ------
+
+enum Msg {
+    RecordScreen,
+    DisplayMedia(Result<MediaStream, JsValue>),
+}
+
+fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
+    match msg {
+        Msg::RecordScreen => {
+            orders.perform_cmd(display_media());
+        }
+        Msg::DisplayMedia(Ok(media_stream)) => {
+            model
+                .video
+                .get()
+                .expect("get video element")
+                .set_src_object(Some(&media_stream));
+        }
+        Msg::DisplayMedia(Err(error)) => {
+            log!(error);
+        }
+    }
+}
+
+async fn display_media() -> Msg {
+    let mut constraints = DisplayMediaStreamConstraints::new();
+    constraints.video(&JsValue::from(true));
+
+    let media_stream_promise = window()
+        .navigator()
+        .media_devices()
+        .unwrap()
+        .get_display_media_with_constraints(&constraints)
+        .unwrap();
+
+    Msg::DisplayMedia(
+        JsFuture::from(media_stream_promise)
+            .await
+            .map(MediaStream::from),
+    )
+}
+
+// ------ ------
+//     View
+// ------ ------
+
+fn view(model: &Model) -> Node<Msg> {
+    div![
+        button![
+            style! {
+                St::Display => "block",
+            },
+            "Record Screen",
+            ev(Ev::Click, |_| Msg::RecordScreen)
+        ],
+        video![
+            el_ref(&model.video),
+            attrs! {
+                At::Width => 1024,
+                At::AutoPlay => AtValue::None,
+            }
+        ]
+    ]
+}
+
+// ------ ------
+//     Start
+// ------ ------
+
+#[wasm_bindgen(start)]
+pub fn start() {
+    App::start("app", init, update, view);
+}
diff --git a/examples/tests/Cargo.toml b/examples/tests/Cargo.toml
@@ -8,7 +8,6 @@ edition = "2018"
 crate-type = ["cdylib"]
 
 [dev-dependencies]
-wasm-bindgen-test = "0.3.18"
 regex = "1.4.1"
 
 [dependencies]

diff --git a/examples/update_from_js/Cargo.toml b/examples/update_from_js/Cargo.toml
@@ -9,5 +9,4 @@ crate-type = ["cdylib"]
 
 [dependencies]
 seed = {path = "../../"}
-wasm-bindgen-futures = "0.4.18"
 enclose = "1.1.8"