带有设备摄像头的 A-Frame：如何在 a-scene 后面看到视频？

A-Frame with device camera: how to see video behind the a-scene?

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

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

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

问题是我在 A 帧场景 上显示视频 并使其半透明，以便通过它可以看到 3d 场景。

我这样做是因为如果视频在场景下方（即具有较低的 z-index），它不会显示，即使我确实为 a 场景设置了背景="transparent"。如果我将 "embedded" 添加到场景中，则不会出现 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>

您不需要操纵 z-index，也不需要嵌入场景。使用这样的设置：

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

您只需确保：

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

故障 here. Also 类似的答案 + 示例。