Is it possible to have multiple active cameras in A-Frame?

I want to have two separate cameras in A-Frame which are both displayed side by side on the screen at the same time. Is it possible?

Solution 1:

You can draw the render of the "other camera" view to a canvas element. Lets say you have a setup two cameras:

<!–– The canvas in which we will render the secondary camera -->
<canvas width="256" heigth="256"></canvas>

<a-scene foo>
<!–– Main camera with a sphere to see the movement from the other cam -->
<a-camera><a-sphere scale="0.1 0.1 0.1"></a-sphere></a-camera>
  
<!–– the secondary camera positioned somewhere -->
<a-entity position="4 1.6 -4" rotation="0 90 0">
  <a-entity id="secondarycam" camera="active: false"></a-entity>
</a-entity>
</a-scene>

Now, we need need to render the view from the secondary camera, and draw the render on the canvas:

AFRAME.registerComponent("foo", {
  init: function() {
    // grab the canvas
    var canvas = document.querySelector("#cam");
    this.ctx = canvas.getContext("2d");
    // grab the secondary camera (the THREEjs cam within the camera component)
    this.secondaryCam = document.querySelector("#secondarycam").components.camera.camera;
    },
    tick: function() {
      // wait until init is done
      if (!this.secondaryCam) return;
      // render the secondary camera view
      this.el.renderer.render(this.el.sceneEl.object3D, this.secondaryCam);
      // draw the render on the canvas
      this.ctx.drawImage(this.el.renderer.domElement, 0, 0, 256, 256);
    }
  });

Glitch example here