If you have ever owned or had a friend that let you use there 3DS, you probably have tried the 3D feature that looks so good, you just feel like you could jump right into the game and meet Mario, Link, Kirby, or your Mii. I want to build a web page in a very specific way so that you can switch between 2D (the original) and 3D. What I am doing is that I have an embed element viewing the webpage, and a video element getting my camera feedback.
My question is, does any one know how to track the user’s head position and rotation, and the eye position? I want to send an animationRequest to the document so it will scan the video, and update an object variable of the user’s head and eyes, then run some code (which I can figure out) to update the screen so it looks 3D.
Here is my web page:
<body style="margin: 0;">
<embed src="game/index.html" style="width: 100vw; height: 100vh; position: absolute;"></embed>
<video id="webcam" style="display: none;"></video>
</body>
<script>
const webcam = document.getElementById("webcam");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices
.getUserMedia({ video: true })
.then((stream) => {
webcam.srcObject = stream;
})
.catch((error) => {
console.error("Error accessing webcam:", error);
});
} else {
console.error("getUserMedia not supported in this browser.");
}
</script>