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 (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.
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>
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:
<video> element is covering the entire viewport preferably with its width (100%, 100vw etc.), height (100%, 100vh, etc,) and position (absolute, or fixed) set.<a-sky> )