Skip to content

Commit 24c773e

Browse files
MartinKavikMartinKavik
committed
examples: record_screen
1 parent c5c6839 commit 24c773e

File tree

9 files changed

+192
-4
lines changed

9 files changed

+192
-4
lines changed

‎Cargo.toml

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,14 @@ enclose = "1.1.8"
2727
gloo-timers = { version = "0.2.1", features = ["futures"] }
2828
gloo-file = { version = "0.1.0", features = ["futures"] }
2929
indexmap = "1.6.0"
30-
js-sys = "0.3.45"
30+
js-sys = "0.3.46"
3131
pulldown-cmark = "0.8.0"
3232
rand = { version = "0.8.0", features = ["small_rng"] }
3333
# https://docs.rs/getrandom/0.2.0/getrandom/#webassembly-support
3434
getrandom = { version = "0.2", features = ["js"] }
3535
serde = { version = "1.0.117", features = ['derive'] }
3636
serde_json = "1.0.59"
37-
wasm-bindgen = { version = "0.2.68", features = ["serde-serialize"] }
37+
wasm-bindgen = { version = "0.2.69", features = ["serde-serialize"] }
3838
wasm-bindgen-futures = "0.4.18"
3939
# @TODO: remove once we can use entities without `Debug` in `log!` and `error!` on `stable` Rust.
4040
# 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 = [
137137
"examples/pages_keep_state",
138138
"examples/resize_observer",
139139
"examples/rust_from_js",
140+
"examples/record_screen",
140141
"examples/service_worker",
141142
"examples/subscribe",
142143
"examples/tests",
@@ -155,3 +156,16 @@ exclude = [
155156
"examples/e2e_encryption",
156157
"examples/server_integration",
157158
]
159+
160+
[patch.crates-io]
161+
# wasm-bindgen = { path = "d:/repos/wasm-bindgen" }
162+
# wasm-bindgen-test = { path = "d:/repos/wasm-bindgen/crates/test" }
163+
# wasm-bindgen-futures = { path = "d:/repos/wasm-bindgen/crates/futures" }
164+
# js-sys = { path = "d:/repos/wasm-bindgen/crates/js-sys" }
165+
# web-sys = { path = "d:/repos/wasm-bindgen/crates/web-sys" }
166+
167+
wasm-bindgen = { git = "https://github.com/MartinKavik/wasm-bindgen", branch = "feat/webidl_getDisplayMedia" }
168+
wasm-bindgen-test = { git = "https://github.com/MartinKavik/wasm-bindgen", branch = "feat/webidl_getDisplayMedia" }
169+
wasm-bindgen-futures = { git = "https://github.com/MartinKavik/wasm-bindgen", branch = "feat/webidl_getDisplayMedia" }
170+
js-sys = { git = "https://github.com/MartinKavik/wasm-bindgen", branch = "feat/webidl_getDisplayMedia" }
171+
web-sys = { git = "https://github.com/MartinKavik/wasm-bindgen", branch = "feat/webidl_getDisplayMedia" }

‎examples/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,9 @@ How to make HTTP request using Fetch API.
8585
### [NoChange](no_change)
8686
How to increase render speed by `Node::NoChange`.
8787

88+
## [Record Screen](record_screen)
89+
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).
90+
8891
### [Todo MVC](todomvc)
8992
Classic TodoMVC example with Local Storage.
9093

‎examples/drop_zone/Cargo.toml

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,3 @@ crate-type = ["cdylib"]
99

1010
[dependencies]
1111
seed = {path = "../../"}
12-
wasm-bindgen-futures = "0.4.18"

‎examples/record_screen/Cargo.toml

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
[package]
2+
name = "record_screen"
3+
version = "0.1.0"
4+
authors = ["Martin Kavík <[email protected]>"]
5+
edition = "2018"
6+
7+
[lib]
8+
crate-type = ["cdylib"]
9+
10+
[dependencies]
11+
seed = {path = "../../"}
12+
13+
[dependencies.web-sys]
14+
version = "0.3.45"
15+
features = [
16+
"DisplayMediaStreamConstraints",
17+
"MediaDevices",
18+
"MediaStream",
19+
"HtmlMediaElement",
20+
]

‎examples/record_screen/Makefile.toml

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
extend = "../../Makefile.toml"
2+
3+
# ---- BUILD ----
4+
5+
[tasks.build]
6+
alias = "default_build"
7+
8+
[tasks.build_release]
9+
alias = "default_build_release"
10+
11+
# ---- START ----
12+
13+
[tasks.start]
14+
alias = "default_start"
15+
16+
[tasks.start_release]
17+
alias = "default_start_release"
18+
19+
# ---- TEST ----
20+
21+
[tasks.test_firefox]
22+
alias = "default_test_firefox"
23+
24+
# ---- LINT ----
25+
26+
[tasks.clippy]
27+
alias = "default_clippy"

‎examples/record_screen/README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
## Record Screen example
2+
3+
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).
4+
5+
---
6+
7+
```bash
8+
cargo make start
9+
```
10+
11+
Open [127.0.0.1:8000](http://127.0.0.1:8000) in your browser.

‎examples/record_screen/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7+
<title>Record Screen example</title>
8+
</head>
9+
10+
<body>
11+
<section id="app"></section>
12+
<script type="module">
13+
import init from '/pkg/package.js';
14+
init('/pkg/package_bg.wasm');
15+
</script>
16+
</body>
17+
18+
</html>

‎examples/record_screen/src/lib.rs

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
use seed::{prelude::*, *};
2+
use wasm_bindgen_futures::JsFuture;
3+
use web_sys::{DisplayMediaStreamConstraints, HtmlMediaElement, MediaStream};
4+
5+
// ------ ------
6+
// Init
7+
// ------ ------
8+
9+
fn init(_: Url, _: &mut impl Orders<Msg>) -> Model {
10+
Model::default()
11+
}
12+
13+
// ------ ------
14+
// Model
15+
// ------ ------
16+
17+
#[derive(Default)]
18+
struct Model {
19+
video: ElRef<HtmlMediaElement>,
20+
}
21+
22+
// ------ ------
23+
// Update
24+
// ------ ------
25+
26+
enum Msg {
27+
RecordScreen,
28+
DisplayMedia(Result<MediaStream, JsValue>),
29+
}
30+
31+
fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
32+
match msg {
33+
Msg::RecordScreen => {
34+
orders.perform_cmd(display_media());
35+
}
36+
Msg::DisplayMedia(Ok(media_stream)) => {
37+
model
38+
.video
39+
.get()
40+
.expect("get video element")
41+
.set_src_object(Some(&media_stream));
42+
}
43+
Msg::DisplayMedia(Err(error)) => {
44+
log!(error);
45+
}
46+
}
47+
}
48+
49+
async fn display_media() -> Msg {
50+
let mut constraints = DisplayMediaStreamConstraints::new();
51+
constraints.video(&JsValue::from(true));
52+
53+
let media_stream_promise = window()
54+
.navigator()
55+
.media_devices()
56+
.unwrap()
57+
.get_display_media_with_constraints(&constraints)
58+
.unwrap();
59+
60+
Msg::DisplayMedia(
61+
JsFuture::from(media_stream_promise)
62+
.await
63+
.map(MediaStream::from),
64+
)
65+
}
66+
67+
// ------ ------
68+
// View
69+
// ------ ------
70+
71+
fn view(model: &Model) -> Node<Msg> {
72+
div![
73+
button![
74+
style! {
75+
St::Display => "block",
76+
},
77+
"Record Screen",
78+
ev(Ev::Click, |_| Msg::RecordScreen)
79+
],
80+
video![
81+
el_ref(&model.video),
82+
attrs! {
83+
At::Width => 1024,
84+
At::AutoPlay => AtValue::None,
85+
}
86+
]
87+
]
88+
}
89+
90+
// ------ ------
91+
// Start
92+
// ------ ------
93+
94+
#[wasm_bindgen(start)]
95+
pub fn start() {
96+
App::start("app", init, update, view);
97+
}

‎examples/update_from_js/Cargo.toml

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,4 @@ crate-type = ["cdylib"]
99

1010
[dependencies]
1111
seed = {path = "../../"}
12-
wasm-bindgen-futures = "0.4.18"
1312
enclose = "1.1.8"

0 commit comments

Comments
 (0)