From 96ceb86bca38f5c7302e1d5f141d36d776b9450d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Kav=C3=ADk?= Date: Mon, 18 Jan 2021 21:01:27 +0100 Subject: [PATCH] examples: record_screen --- Cargo.toml | 18 +++++- examples/README.md | 3 + examples/drop_zone/Cargo.toml | 1 - examples/record_screen/Cargo.toml | 20 ++++++ examples/record_screen/Makefile.toml | 27 ++++++++ examples/record_screen/README.md | 11 ++++ examples/record_screen/index.html | 18 ++++++ examples/record_screen/src/lib.rs | 97 ++++++++++++++++++++++++++++ examples/update_from_js/Cargo.toml | 1 - 9 files changed, 192 insertions(+), 4 deletions(-) create mode 100644 examples/record_screen/Cargo.toml create mode 100644 examples/record_screen/Makefile.toml create mode 100644 examples/record_screen/README.md create mode 100644 examples/record_screen/index.html create mode 100644 examples/record_screen/src/lib.rs diff --git a/Cargo.toml b/Cargo.toml index 3c0ec91f8..c7bc11d3d 100644 --- 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 index eee15d77a..ecf3ca0bc 100644 --- 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 index d33337405..07e47863e 100644 --- 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 new file mode 100644 index 000000000..a9a8ea8c4 --- /dev/null +++ b/examples/record_screen/Cargo.toml @@ -0,0 +1,20 @@ +[package] +name = "record_screen" +version = "0.1.0" +authors = ["Martin Kavík "] +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 new file mode 100644 index 000000000..e188fabea --- /dev/null +++ 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 new file mode 100644 index 000000000..999aef299 --- /dev/null +++ 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 new file mode 100644 index 000000000..fe8646e42 --- /dev/null +++ b/examples/record_screen/index.html @@ -0,0 +1,18 @@ + + + + + + + Record Screen example + + + +
+ + + + diff --git a/examples/record_screen/src/lib.rs b/examples/record_screen/src/lib.rs new file mode 100644 index 000000000..d8f2735a2 --- /dev/null +++ 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) -> Model { + Model::default() +} + +// ------ ------ +// Model +// ------ ------ + +#[derive(Default)] +struct Model { + video: ElRef, +} + +// ------ ------ +// Update +// ------ ------ + +enum Msg { + RecordScreen, + DisplayMedia(Result), +} + +fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders) { + 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 { + 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/update_from_js/Cargo.toml b/examples/update_from_js/Cargo.toml index 36d662c2c..f801b6da7 100644 --- 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"