diff --git a/examples/jscam/.gitignore b/examples/jscam/.gitignore
index ccb2c80..8397ddb 100644
--- a/examples/jscam/.gitignore
+++ b/examples/jscam/.gitignore
@@ -1,2 +1,4 @@
+public/
 node_modules/
+dist/
 package-lock.json
\ No newline at end of file
diff --git a/examples/jscam/package.json b/examples/jscam/package.json
index 6d2af0e..21f153b 100644
--- a/examples/jscam/package.json
+++ b/examples/jscam/package.json
@@ -5,16 +5,18 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "serve": "webpack-serve --config ./webpack.config.js --content public"
+    "serve": "webpack-serve --config ./webpack.config.js --content public",
+    "build": "npx webpack && cp src/index.html public/ && cp dist/* public/"
   },
   "author": "l1npengtul",
   "license": "MPL-2.0",
   "dependencies": {
-    "nokhwa": "file:../../nokhwajs",
-    "webpack-serve": "^1.0.4"
+    "nokhwa": "^0.4.2",
+    "wasm-loader": "^1.3.0"
   },
   "devDependencies": {
-    "webpack": "^4.46.0",
-    "webpack-cli": "^4.8.0"
+    "webpack": "^5.51.1",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.0.0"
   }
 }
diff --git a/examples/jscam/src/index.html b/examples/jscam/src/index.html
index aa4a482..3aedc3a 100644
--- a/examples/jscam/src/index.html
+++ b/examples/jscam/src/index.html
@@ -9,9 +9,9 @@
         <h1>nokhwa js capture wasm test</h1>
         <div>
             <div>
-                <label>no permission yet :(</label>
+                <label id="requestStatus">no permission yet :(</label>
                 <div>
-                    <button>request permission</button>
+                    <button id="requestButton">request permission</button>
                 </div>
             </div>
             <div style="margin-top: 1%;">
@@ -30,5 +30,6 @@
                 </div>
             </div>
         </div>
+        <script src="main.js"></script>
     </body>
 </html>
\ No newline at end of file
diff --git a/examples/jscam/src/index.js b/examples/jscam/src/index.js
index e69de29..a254020 100644
--- a/examples/jscam/src/index.js
+++ b/examples/jscam/src/index.js
@@ -0,0 +1,10 @@
+import init, {requestPermissions} from 'nokhwa';
+
+async function start() {
+    await init();
+}
+start();
+
+document.getElementById('requestButton').addEventListener('click', function(e) {
+    requestPermissions()
+} );
diff --git a/examples/jscam/webpack.config.js b/examples/jscam/webpack.config.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/network_camera.rs b/src/network_camera.rs
index 893837a..5b61e45 100644
--- a/src/network_camera.rs
+++ b/src/network_camera.rs
@@ -10,8 +10,10 @@ use std::cell::RefCell;
 #[cfg(feature = "output-wgpu")]
 use wgpu::{
     Device as WgpuDevice, Extent3d, ImageCopyTexture, ImageDataLayout, Queue as WgpuQueue,
-    Texture as WgpuTexture, TextureDescriptor, TextureDimension, TextureFormat, TextureUsage,
+    Texture as WgpuTexture, TextureAspect, TextureDescriptor, TextureDimension, TextureFormat,
+    TextureUsages,
 };
+
 /// A struct that supports IP Cameras via the `OpenCV` backend.
 pub struct NetworkCamera {
     ip: String,
@@ -112,7 +114,7 @@ impl NetworkCamera {
             sample_count: 1,
             dimension: TextureDimension::D2,
             format: TextureFormat::Rgba8UnormSrgb,
-            usage: TextureUsage::SAMPLED | TextureUsage::COPY_DST,
+            usage: TextureUsages::TEXTURE_BINDING | TextureUsages::COPY_DST,
         });
 
         let width_nonzero = match NonZeroU32::try_from(4 * rgba_frame.width()) {
@@ -130,6 +132,7 @@ impl NetworkCamera {
                 texture: &texture,
                 mip_level: 0,
                 origin: wgpu::Origin3d::ZERO,
+                aspect: TextureAspect::All,
             },
             &rgba_frame.to_vec(),
             ImageDataLayout {