以相机为背景，同时以A帧显示对象 [英] Use camera as background, while display objects in A-frame

问题描述

我想将摄像机视频源用作a帧中的背景，同时在其上覆盖对象。我知道有可能，但我不知道该怎么做。
，所以我在这里寻求帮助！

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!

推荐答案

您可以通过在元素之前添加元素来进行简单覆盖场景：

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});

提琴此处。

这篇关于以相机为背景，同时以A帧显示对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！