Video Webcam Overlay

programming web dev
1

Hi all! I am just so amazed by this community, so cool. Will you please help me?
I am trying to build a digital “magic mirror” that shows your webcam or front facing camera while a video WITH AUDIO plays ontop of it at 75% opacity.

I want them to see themselves but not completely. The video should be visible as well, it is mostly white text on a black background (best for maximizing screen reflectivity) and to make the words looks like they’re floating.

Here is my issue: I want to be able to request permission from user to use their webcam, on web and mobile. Ideally, there would be a “Begin” button that prompted the start of video playback ontop of webcam stream.

I have no code built. No idea how to do this, any help would be great!

1 Like
2

Hi @tornad0! Welcome to the forums :partying_face:

You can totally do what you are trying to build by first getting the webcam video to display. This tutorial will help you out there: https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm

From there, you can position a video element with the video you want to play on top of the webcam video. You can use CSS to set both the position as well as the opacity of the video element to 75%, giving you the effect you are looking for.

Does this help, or would you like me to go deeper into any part of this? :slight_smile:

Cheers,
Kirupa