title: A-Frame with device camera: how to see video behind the a-scene?
body: <p>I'm trying to implement a poor man's AR by showing some objects with A-Frame <strong>on top of the active video</strong>.</p>
  
  <p>Note: I'm not using <strong>ar.js</strong> because I don't want to use a marker.</p>
  
  <p>All in all, app is working nicely, but video is half transparent instead of fully opaque as I want it to be.</p>
  
  <p>The problem is that I'm showing the video <strong>on top of the A-Frame scene</strong>, and making it semi transparent so that the 3d scene is visible through it.</p>
  
  <p>I did it because if the video is below the scene (i.e 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.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;script src="https://aframe.io/releases/0.9.2/aframe.min.js"&gt;&lt;/script&gt;
      &lt;style&gt;
          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;
          }
      &lt;/style&gt;
      &lt;script&gt;
          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);
              });
            }
          });
      &lt;/script&gt;      
  &lt;/head&gt;
  &lt;body&gt;
      &lt;video id="webcam" autoplay playsinline&gt;&lt;/video&gt;
      &lt;a-scene vr-mode-ui="enabled: false" background="transparent"&gt;
          &lt;a-sphere cursor-listener position="-7 0 7" radius="1.25" color="yellowgreen"&gt;&lt;/a-sphere&gt;
          &lt;a-sphere cursor-listener position="-7 0 -7" radius="1.25" color="green"&gt;&lt;/a-sphere&gt;
          &lt;a-sphere cursor-listener position="7 0 7" radius="1.25" color="aqua"&gt;&lt;/a-sphere&gt;
          &lt;a-sphere cursor-listener position="7 0 -7" radius="1.25" color="orange"&gt;&lt;/a-sphere&gt;
          &lt;a-entity camera look-controls&gt;
              &lt;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"&gt;
              &lt;/a-entity&gt;
          &lt;/a-entity&gt;
      &lt;/a-scene&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>