Computer Vision Tutorial: Build a Hand-Controlled Space Shooter with Next.js

Give it a try 👉 meteor-dash.ve...
Github repo: github.com/Kou...
Want to play a game controlled by your hand movements? This series will show you how to build a responsive computer vision game entirely in your browser, no plugins required!
In this first video, we'll lay the groundwork by setting up the project structure and getting our webcam feed working. We'll also introduce the MediaPipe.js library, which will be used to detect hand gestures in the upcoming videos.
No prior experience is necessary! We'll walk you through everything step-by-step, even showing you how to install Node.js. Throughout the series, we'll break down the project into manageable chunks, making it perfect for beginners.
Here's what you'll learn in this video:
Setting up a Next.js project
Creating a webcam feed component
Using MediaPipe.js (introduction)
This is just the beginning! Stay tuned for the next videos where we'll build the game logic, implement hand detection, and add exciting features like collision detection and sound effects.
Don't forget to:
Like and subscribe! for more tutorials
Leave a comment below with any questions
Let's build something awesome together!
web-assembly link
const wasm = await FilesetResolver.forVisionTasks("cdn.jsdelivr.n...");
model-path
modelAssetPath: "storage.google..."

[@ranakshah9167]

hey, quick question where can we get the wasm and model links that are at 10:00

[@maplearcadecode]

Hi, I have updated the video description with the links. Also you can get the complete code for free in case you are interested: 👉 ko-fi.com/s/abe25c5e70

[@jesus_peña]

you're amazing! thanks

[@akshatanand6919]

also where are u getting the modelAssetPath .?

[@maplearcadecode]

here's the cdn location for the model: storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task