带设备摄像头的 A-Frame：如何查看 a-scene 背后的视频？答案

【问题标题】：A-Frame with device camera: how to see video behind the a-scene?带设备摄像头的 A-Frame：如何查看 a-scene 背后的视频？
【发布时间】：2019-08-14 10:54:04
【问题描述】：

我正在尝试通过在活动视频之上显示一些带有 A-Frame 的对象来实现穷人的 AR。

注意：我没有使用 ar.js，因为我不想使用标记。

总而言之，应用运行良好，但视频是半透明的，而不是我想要的完全不透明的。

问题是我将视频显示在 A-Frame 场景的顶部，并使其半透明，以便通过它可以看到 3d 场景。

我这样做是因为如果视频位于场景下方（即 z-index 较低），则不会显示它，即使我确实为 a-scene 设置了 background="transparent"。如果我将“嵌入”添加到场景中，则不会出现 3d 元素。

这是我的代码：

<!doctype html>
<html lang="en">
<head>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <style>
        a-scene {
            height: 50%; width: 50%;
            z-index: 10;
            opacity:1
        }      
        #webcam {
            z-index: 20;
            opacity:0.4;
            position: absolute;
            background-size: 100% 100%;
            top: 0; left: 0; 
            min-width: 100%; min-height: 100%;
            width: auto; height: auto;
        }
    </style>
    <script>
        var cameraView;

        var constraints = {
            audio: false,
            video: {
                facingMode: "environment",
            }
        };

        // Access the device camera and stream to cameraView
        function cameraStart() {
            cameraView = document.querySelector("#webcam");
            navigator.mediaDevices
                .getUserMedia(constraints)
                .then(function(stream) {
                cameraView.srcObject = stream;
            })
            .catch(function(error) {
                console.error("Oops. Something is broken.", error);
            });
        }

        // Start the video stream when the window loads
        window.addEventListener("load", cameraStart, false);

        // Component to change to a sequential color on cursor suspension.
        AFRAME.registerComponent('cursor-listener', {
          init: function () {
            var lastIndex = -1;
            var COLORS = ['red', 'green', 'blue'];
            this.el.addEventListener('click', function (evt) {
              lastIndex = (lastIndex + 1) % COLORS.length;
              this.setAttribute('material', 'color', COLORS[lastIndex]);
              console.log('I was clicked at: ', evt.detail.intersection.point);
            });
          }
        });
    </script>      
</head>
<body>
    <video id="webcam" autoplay playsinline></video>
    <a-scene vr-mode-ui="enabled: false" background="transparent">
        <a-sphere cursor-listener position="-7 0 7" radius="1.25" color="yellowgreen"></a-sphere>
        <a-sphere cursor-listener position="-7 0 -7" radius="1.25" color="green"></a-sphere>
        <a-sphere cursor-listener position="7 0 7" radius="1.25" color="aqua"></a-sphere>
        <a-sphere cursor-listener position="7 0 -7" radius="1.25" color="orange"></a-sphere>
        <a-entity camera look-controls>
            <a-entity cursor="fuse: true; fuseTimeout: 500"
                position="0 0 -0.6"
                geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                material="color: blue; shader: flat">
            </a-entity>
        </a-entity>
    </a-scene>
</body>
</html>

【问题讨论】：

标签： javascript augmented-reality aframe virtual-reality

【解决方案1】：

您无需操作 z-index 或嵌入场景。使用这样的设置：

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

您只需确保：

<video> 元素覆盖整个视口，最好设置其宽度（100%、100vw 等）、高度（100%、100vh 等）和位置（绝对或固定）。
场景中没有实体覆盖背景（如飞机，或<a-sky>）

故障here。还有here's 一个类似的anwser + 例子。

【讨论】：

非常感谢！我玩了几个小时试图得到这个结果。我实际上仍然不明白为什么您的版本与我的非常相似，而我的版本正在为 a-scene 创建纯白色背景。