帶有設備攝像頭的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