How to show a video from camera and show a 3d model on top of the video

Questions
,
1

Hi,

I would like to display video from a camera and then place a 3D model on top of the video. How can I achieve this?

Thanks & Regards

2

Use two layers:

  • bottom layer is <video> tag connected to your camera
  • top layer is transparent <canvas> where you draw the 3D model

The link below is a proof of concept – you should see spinning rhomboids, they are drawn by Three.js; click on the button [Видео] (it means “Video”) to start streaming from the camera to the screen. The browser may ask you for permission to access the camera. If everything is OK, you should see live video from the camera and the rhomboids on to of the video.

https://boytchev.github.io/CourseVAX/LecturesBG/10/E1009-AR.html

3

Thanks :grinning:, I understood the concept. Also can the transparency be avoided only for 3D model not for scene?

Also may I ask one more thing. I want to convert the Mediapipe facelandmark coordinates (based on screen) to move the 3D model (which use world space coordinates) in Three JS. I could not map the screen coordinates to world space coordinate.

Thanks Again mate !!