Seeing Power: Building a Side-View Laser Eye Effect Using Web-Based Face Tracking

Introduction

So, who doesn't love to have superpowers in real life? And I think today, with the advancement in AI, it's getting closer and closer.

Who knows? Maybe one day technology will make us feel like real superheroes.

This is why I created the Seeing Power Project. A web-based face tracking.

I will explain some of the important parts of the code that I used and give a demo if you want to try it yourself.

But why in a web browser?

It's an easy question to run directly in a web browser; anyone can try it and use it. Don't need super phones or anything; any phone could work.

You don't need to install anything.

And most importantly, it uses camera and canvas layering.

Detecting Face Invisibility

The face is detected using dots on the face. So, real face detection is used in MediaPipe.

But I wanted it to be clean. What would it look like if you took a picture of your superpowers with dots all over your face? So, this is why face mesh works in the background.

Key Code Snippets

So, what is the code I used to build it? AI helped me a lot during the design of the code. Let's talk coding.

Eye landmark selection

const leftEye = landmarks[468];
const rightEye = landmarks[473];

Laser direction (side view logic)

ctx.moveTo(x, y);
ctx.lineTo(x + jitter, y + 1200);
ctx.stroke();

Camera initialisation

const video = document.getElementById("video");
const camera = new Camera(video, {
  onFrame: async () => {
    await faceMesh.send({ image: video });
  },
  width: 1280,
  height: 720
});
camera.start();

Face mesh setup

const faceMesh = new FaceMesh({
  locateFile: file =>
    `https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/${file}`
});
faceMesh.setOptions({
  maxNumFaces: 1,
  refineLandmarks: true,
  minDetectionConfidence: 0.6,
  minTrackingConfidence: 0.6
});

If you'd like to try it yourself or see the project in real life, here's a demo.

What This Project Proves

Real-time computer vision is possible even with simple tools.
Second, creative AR doesn't need a heavy framework.
And most importantly, making people's dreams a reality with just simple code.

Conclusion

Start anywhere with a vision. A small project can be a great deal for you if you begin with it. And this project proves that it's not that hard for anyone.