My idea: I want to make something that allows people interact with HTML element through webcam. When people move their heads from left to right in front of the camera, they can control the movement of an avatar in the browser. When people move their hands, they can turn to the next page in the browser.
Moreover, I'd like to make a keyboard & mouse free space game. It's also a multiplayer game. Some players can be UFOs on the top side of the screen to shoot down spaceships. Other players can be spaceships on the bottom of the screen trying to survive. Here's my sketch.
- Players allow browser to use their webcams
- Client program recognizes the head
- Client program tracks the movement of the head / hand
- Client moves the avatar around
For multiplayer games:
5. Client sends the current position data(Y axis data) to the server through socket
6. Server broadcasts all the positions to every client
7. Client gets the data, filters out it's own data, updates other player's position
Some research:
I found this Javascript library headtrackr for headtracking via webcam and WebRTC/
I'm still not sure about tracking the movement of the head or the hand. I'm looking for some suggestions.
I'm also thinking to make the video itself.