Created basic webcam stream using video element

mahadeer · Mar 29, 2019 · 87967d9 · 87967d9
1 parent 3c8a890
commit 87967d9
Show file tree

Hide file tree

Showing 9 changed files with 6,029 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,10 +1,13 @@
 # Generated by Cargo
 # will have compiled files and executables
 /target/
+/pkg/
+/.cargo/
 
 # Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
 # More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
 Cargo.lock
 
 # These are backup files generated by rustfmt
 **/*.rs.bk
+node_modules
diff --git a/Cargo.toml b/Cargo.toml
@@ -0,0 +1,34 @@
+[package]
+name = "webcam_stream_wasm"
+version = "0.1.0"
+authors = ["mahadeer13 <[email protected]>"]
+edition = "2018"
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+rand = "0.6.5"
+wasm-bindgen = { version = "0.2.40", features = ["serde-serialize"]  }
+js-sys = "0.3.17"
+serde = { version = "1.0.80", features = ["derive"] }
+serde_derive = "^1.0.59"
+
+[dependencies.web-sys]
+version = "0.3.5"
+features = [
+  'Document',
+  'Element',
+  'HtmlElement',
+  'Node',
+  'Window',
+  'Navigator',
+  'HtmlCanvasElement',
+  'CanvasRenderingContext2d',
+  'ImageCapture',
+  'VideoStreamTrack',
+  'MediaDevices',
+  'MediaStreamConstraints',
+  'MediaStream',
+  'HtmlMediaElement'
+]
diff --git a/index.html b/index.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Webcam Streamer</title>
+    <style>
+        div#container {
+            width: 90%;
+            margin: 5% 5%;
+        }
+
+        video#video-src {
+            width: 100%;
+            height: 400px;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="container">
+
+    </div>
+    <!-- CUSTOM IMPORTS -->
+    <script type="text/javascript" src="./index.js"></script>
+</body>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,34 @@
+const ASMEditor = import('./pkg/webcam_stream_wasm');
+ASMEditor.then((mod) => {
+    console.log("initiated...");
+    console.log(mod);
+    window.mod = mod;
+})
+
+if (navigator.mediaDevices) {
+  console.log('getUserMedia supported.');
+
+  var constraints = { video: true };
+  var chunks = [];
+
+  // navigator.mediaDevices.getUserMedia(constraints)
+  //   .then(function (stream) {
+  //     var canvas = document.getElementById("video-src");
+  //     var track = stream.getVideoTracks()[0];
+  //     let imageCapture = new ImageCapture(track);
+  //     setInterval(function () {
+  //       imageCapture.grabFrame()
+  //         .then(function (bmpImage) {
+  //           canvas.width = bmpImage.width;
+  //           canvas.height = bmpImage.height;
+  //           canvas.getContext("2d").drawImage(bmpImage, 0, 0);
+  //         })
+  //         .catch(function (err) {
+  //           console.log(err);
+  //         });
+  //     }, 100);
+  //   })
+  //   .catch(function (err) {
+  //     console.log('The following error occurred: ' + err);
+  //   })
+}