带有设备摄像头的A框架：如何在a场景后面观看视频？

Question

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

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

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

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

我这样做是因为如果视频低于场景（即Z索引较低），即使我为a场景放置background =“ transparent”，也不会显示该视频。 如果将“嵌入”添加到a场景中，则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>

Answer 1

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

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

您只需要确保：

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

小故障在这里。 这也是一个类似的答案和例子。

带有设备摄像头的A框架：如何在a场景后面观看视频？

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-08-14 21:18:36

带有设备摄像头的A框架：如何在a场景后面观看视频？

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-08-14 21:18:36

解决方案1
1 已采纳 2019-08-14 21:18:36