├── .gitignore ├── index.js ├── README.md ├── index.html ├── package.json ├── Cargo.toml ├── webpack.config.js ├── src └── lib.rs └── Cargo.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | target/ -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 2 | import('./pkg') 3 | .catch(console.error); 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WebCam DOM Stream over WASM 2 | 3 | You can build the example locally with: 4 | 5 | ``` 6 | $ npm run serve 7 | ``` 8 | 9 | and then visiting http://localhost:8080 in a browser should run the example! 10 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

7 | 8 | 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "build": "webpack", 4 | "serve": "webpack-dev-server" 5 | }, 6 | "devDependencies": { 7 | "@wasm-tool/wasm-pack-plugin": "1.0.1", 8 | "text-encoding": "^0.7.0", 9 | "html-webpack-plugin": "^3.2.0", 10 | "webpack": "^4.29.4", 11 | "webpack-cli": "^3.1.1", 12 | "webpack-dev-server": "^3.1.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "webcam-strem-on-dom" 3 | version = "0.0.1" 4 | authors = ["@luisvonmuller "] 5 | edition = "2018" 6 | 7 | [lib] 8 | crate-type = ["cdylib"] 9 | 10 | [dependencies] 11 | js-sys = "0.3.42" 12 | wasm-bindgen = "0.2.65" 13 | wasm-bindgen-futures = "0.4.15" 14 | 15 | [dependencies.web-sys] 16 | version = "0.3.4" 17 | features = [ 18 | 'console', 19 | 'Document', 20 | 'Element', 21 | 'Window', 22 | 'VideoTrack', 23 | 'HtmlVideoElement', 24 | 'Navigator', 25 | 'MediaStream', 26 | 'MediaStreamConstraints', 27 | 'Permissions', 28 | 'MediaDevices', 29 | ] 30 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const webpack = require('webpack'); 4 | const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin"); 5 | 6 | module.exports = { 7 | entry: './index.js', 8 | output: { 9 | path: path.resolve(__dirname, 'dist'), 10 | filename: 'index.js', 11 | }, 12 | plugins: [ 13 | new HtmlWebpackPlugin({ 14 | template: 'index.html' 15 | }), 16 | new WasmPackPlugin({ 17 | crateDirectory: path.resolve(__dirname, ".") 18 | }), 19 | // Have this example work in Edge which doesn't ship `TextEncoder` or 20 | // `TextDecoder` at this time. 21 | new webpack.ProvidePlugin({ 22 | TextDecoder: ['text-encoding', 'TextDecoder'], 23 | TextEncoder: ['text-encoding', 'TextEncoder'] 24 | }) 25 | ], 26 | mode: 'development' 27 | }; 28 | -------------------------------------------------------------------------------- /src/lib.rs: -------------------------------------------------------------------------------- 1 | use wasm_bindgen::prelude::*; 2 | use wasm_bindgen::JsCast; 3 | use wasm_bindgen_futures::*; 4 | 5 | #[wasm_bindgen(start)] 6 | pub async fn start() { 7 | let window = web_sys::window().expect("no global `window` exists"); 8 | let document = window.document().expect("should have a document on window"); 9 | let _body = document.body().expect("document should have a body"); 10 | 11 | /* Dom Reference */ 12 | let video = document.get_element_by_id("webcam-stream").unwrap(); 13 | 14 | /* Parsing it into a wasm sysm video track */ 15 | let video: web_sys::HtmlVideoElement = video.dyn_into::().unwrap(); 16 | 17 | /* later I'll need to implement a event listner here */ 18 | video.set_width(1280); 19 | video.set_height(720); 20 | 21 | let navigator = web_sys::Window::navigator(&window); 22 | let media_devices = web_sys::Navigator::media_devices(&navigator); 23 | let permissions = web_sys::Navigator::permissions(&navigator); 24 | 25 | let user_media_promisse = match media_devices { 26 | Ok(user_media_content) => web_sys::MediaDevices::get_user_media_with_constraints( 27 | &user_media_content, 28 | web_sys::MediaStreamConstraints::video( 29 | &mut web_sys::MediaStreamConstraints::new(), 30 | &video.clone().into(), 31 | ), 32 | ), 33 | Err(err_msg) => Err(err_msg), 34 | }; 35 | 36 | let user_media = match user_media_promisse { 37 | Ok(media_input) => wasm_bindgen_futures::JsFuture::from(media_input).await, 38 | Err(err_msg) => Err(err_msg), 39 | }; 40 | 41 | let media_stream = match user_media { 42 | Ok(media_stream_input) => media_stream_input.dyn_into::(), 43 | Err(err_msg) => Err(err_msg), 44 | }; 45 | 46 | match media_stream { 47 | Ok(input) => { 48 | video.set_src_object(Some(&input)); 49 | }, 50 | Err(err_msg) => { 51 | web_sys::console::log(&err_msg.into()); 52 | }, 53 | } 54 | 55 | } 56 | -------------------------------------------------------------------------------- /Cargo.lock: -------------------------------------------------------------------------------- 1 | # This file is automatically @generated by Cargo. 2 | # It is not intended for manual editing. 3 | [[package]] 4 | name = "bumpalo" 5 | version = "3.4.0" 6 | source = "registry+https://github.com/rust-lang/crates.io-index" 7 | checksum = "2e8c087f005730276d1096a652e92a8bacee2e2472bcc9715a74d2bec38b5820" 8 | 9 | [[package]] 10 | name = "cfg-if" 11 | version = "0.1.10" 12 | source = "registry+https://github.com/rust-lang/crates.io-index" 13 | checksum = "4785bdd1c96b2a846b2bd7cc02e86b6b3dbf14e7e53446c4f54c92a361040822" 14 | 15 | [[package]] 16 | name = "js-sys" 17 | version = "0.3.42" 18 | source = "registry+https://github.com/rust-lang/crates.io-index" 19 | checksum = "52732a3d3ad72c58ad2dc70624f9c17b46ecd0943b9a4f1ee37c4c18c5d983e2" 20 | dependencies = [ 21 | "wasm-bindgen", 22 | ] 23 | 24 | [[package]] 25 | name = "lazy_static" 26 | version = "1.4.0" 27 | source = "registry+https://github.com/rust-lang/crates.io-index" 28 | checksum = "e2abad23fbc42b3700f2f279844dc832adb2b2eb069b2df918f455c4e18cc646" 29 | 30 | [[package]] 31 | name = "log" 32 | version = "0.4.11" 33 | source = "registry+https://github.com/rust-lang/crates.io-index" 34 | checksum = "4fabed175da42fed1fa0746b0ea71f412aa9d35e76e95e59b192c64b9dc2bf8b" 35 | dependencies = [ 36 | "cfg-if", 37 | ] 38 | 39 | [[package]] 40 | name = "proc-macro2" 41 | version = "1.0.18" 42 | source = "registry+https://github.com/rust-lang/crates.io-index" 43 | checksum = "beae6331a816b1f65d04c45b078fd8e6c93e8071771f41b8163255bbd8d7c8fa" 44 | dependencies = [ 45 | "unicode-xid", 46 | ] 47 | 48 | [[package]] 49 | name = "quote" 50 | version = "1.0.7" 51 | source = "registry+https://github.com/rust-lang/crates.io-index" 52 | checksum = "aa563d17ecb180e500da1cfd2b028310ac758de548efdd203e18f283af693f37" 53 | dependencies = [ 54 | "proc-macro2", 55 | ] 56 | 57 | [[package]] 58 | name = "syn" 59 | version = "1.0.34" 60 | source = "registry+https://github.com/rust-lang/crates.io-index" 61 | checksum = "936cae2873c940d92e697597c5eee105fb570cd5689c695806f672883653349b" 62 | dependencies = [ 63 | "proc-macro2", 64 | "quote", 65 | "unicode-xid", 66 | ] 67 | 68 | [[package]] 69 | name = "unicode-xid" 70 | version = "0.2.1" 71 | source = "registry+https://github.com/rust-lang/crates.io-index" 72 | checksum = "f7fe0bb3479651439c9112f72b6c505038574c9fbb575ed1bf3b797fa39dd564" 73 | 74 | [[package]] 75 | name = "wasm-bindgen" 76 | version = "0.2.65" 77 | source = "registry+https://github.com/rust-lang/crates.io-index" 78 | checksum = "f3edbcc9536ab7eababcc6d2374a0b7bfe13a2b6d562c5e07f370456b1a8f33d" 79 | dependencies = [ 80 | "cfg-if", 81 | "wasm-bindgen-macro", 82 | ] 83 | 84 | [[package]] 85 | name = "wasm-bindgen-backend" 86 | version = "0.2.65" 87 | source = "registry+https://github.com/rust-lang/crates.io-index" 88 | checksum = "89ed2fb8c84bfad20ea66b26a3743f3e7ba8735a69fe7d95118c33ec8fc1244d" 89 | dependencies = [ 90 | "bumpalo", 91 | "lazy_static", 92 | "log", 93 | "proc-macro2", 94 | "quote", 95 | "syn", 96 | "wasm-bindgen-shared", 97 | ] 98 | 99 | [[package]] 100 | name = "wasm-bindgen-futures" 101 | version = "0.4.15" 102 | source = "registry+https://github.com/rust-lang/crates.io-index" 103 | checksum = "41ad6e4e8b2b7f8c90b6e09a9b590ea15cb0d1dbe28502b5a405cd95d1981671" 104 | dependencies = [ 105 | "cfg-if", 106 | "js-sys", 107 | "wasm-bindgen", 108 | "web-sys", 109 | ] 110 | 111 | [[package]] 112 | name = "wasm-bindgen-macro" 113 | version = "0.2.65" 114 | source = "registry+https://github.com/rust-lang/crates.io-index" 115 | checksum = "eb071268b031a64d92fc6cf691715ca5a40950694d8f683c5bb43db7c730929e" 116 | dependencies = [ 117 | "quote", 118 | "wasm-bindgen-macro-support", 119 | ] 120 | 121 | [[package]] 122 | name = "wasm-bindgen-macro-support" 123 | version = "0.2.65" 124 | source = "registry+https://github.com/rust-lang/crates.io-index" 125 | checksum = "cf592c807080719d1ff2f245a687cbadb3ed28b2077ed7084b47aba8b691f2c6" 126 | dependencies = [ 127 | "proc-macro2", 128 | "quote", 129 | "syn", 130 | "wasm-bindgen-backend", 131 | "wasm-bindgen-shared", 132 | ] 133 | 134 | [[package]] 135 | name = "wasm-bindgen-shared" 136 | version = "0.2.65" 137 | source = "registry+https://github.com/rust-lang/crates.io-index" 138 | checksum = "72b6c0220ded549d63860c78c38f3bcc558d1ca3f4efa74942c536ddbbb55e87" 139 | 140 | [[package]] 141 | name = "web-sys" 142 | version = "0.3.42" 143 | source = "registry+https://github.com/rust-lang/crates.io-index" 144 | checksum = "8be2398f326b7ba09815d0b403095f34dd708579220d099caae89be0b32137b2" 145 | dependencies = [ 146 | "js-sys", 147 | "wasm-bindgen", 148 | ] 149 | 150 | [[package]] 151 | name = "webcam-strem-on-dom" 152 | version = "0.0.1" 153 | dependencies = [ 154 | "js-sys", 155 | "wasm-bindgen", 156 | "wasm-bindgen-futures", 157 | "web-sys", 158 | ] 159 | --------------------------------------------------------------------------------