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

Question

I'm trying to implement a poor man's AR by showing some objects with A-Frame on top of the active video .

Note: I'm not using ar.js because I don't want to use a marker.

All in all, app is working nicely, but video is half transparent instead of fully opaque as I want it to be.

The problem is that I'm showing the video on top of the A-Frame scene , and making it semi transparent so that the 3d scene is visible through it.

I did it because if the video is below the scene (ie with a lower z-index), it is not shown, even though I do put background="transparent" for the a-scene. If I add "embedded" to a-scene, the 3d elements are not appearing.

Here is my code:

<!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

You don't need to manipulate the z-index, or embed the scene. With a setup like this:

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

You only need to make sure that:

the <video> element is covering the entire viewport preferably with its width (100%, 100vw etc.), height (100%, 100vh, etc,) and position (absolute, or fixed) set.
no entity in the scene is covering the background ( like a plane, or <a-sky> )

Glitch here . Also here's a similar anwser + examples.

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

Question

1 answers

solution1
1 ACCPTED 2019-08-14 21:18:36

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

Question

1 answers

solution1 1 ACCPTED 2019-08-14 21:18:36

solution1
1 ACCPTED 2019-08-14 21:18:36