CODEWITHSUNDEEP
three.jsaframe
Eric0x
Eric0x

Reputation: 17

Use camera as background, while display objects in A-frame

I want to use camera video feed as background in a-frame, while overlaying objects on it. I know it is possible but I don't know how exactly to do it. so I am here to ask for help!

Upvotes: 1

Views: 2429

Answers (2)

Kyle Baker
Kyle Baker

Reputation: 3712

I took the above example and turned it into a glitch so the demo could be run on a phone. I also modified the aframe example code to look like a basketball game.

https://glitch.com/edit/#!/3dof-ar?path=index.html%3A33%3A33

Upvotes: 0

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14645

You can have a simple overlay by adding an element before the scene:

<img src='overlay.jpg' />
<a-scene></a-scene>

fiddle here.

Here is a nice article about using a camera stream, I'll just use a basic version of it:

html

<video autoplay></video>
<a-scene></a-scene>

js

// grab the video element
const video = document.querySelector('video');
// this object needs to be an argument of getUserMedia
const constraints = {
   video: true
};
// when you grab the stream - display it on the <video> element
navigator.mediaDevices.getUserMedia(constraints).
    then((stream) => {video.srcObject = stream});

Fiddle here.

Upvotes: 3

Related Questions