Screenshot size in VR Mode broken (?)

lukaszmoskwa commented 5 years ago

Description:

I'm currently trying to create programmatically a screenshot from a mobile device (in this case an Android device w/ Google Crome). Following the documentation I tried using the following code in html

<a-scene screenshot="width: 480; height: 360">

to set the desired dimension and then

var canvas = document.querySelector('a-scene').components.screenshot.getCanvas('perspective');
console.log(canvas.toDataURL("image/jpeg", 0.5))

While this works perfectly fine on desktop and mobile (not VR), in the VR mode the screenshot function actually captures the screen from the bottom left point of the canvas (0,0) to the size I specified (height: 360, width: 480)

Is this a desired behaviour? If so, how can I change my code to capture the canvas focusing the center of it?

A-Frame Version: 0.9.0
Platform / Device: Android

dmarcos commented 5 years ago

Is it a Daydream device? Are WebVR / WebXR flags enabled in chrome://flags?

dmarcos commented 5 years ago

Can you provide a link to reproduce?

lukaszmoskwa commented 5 years ago

I apologize for not noticing your answer before, here I attach the code I use to reproduce

<html>

<head>
    <meta charset="utf-8">
    <script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
</head>

<body>
    <a-scene screenshot="width: 480; height: 360">
        <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
        <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
        <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
        <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
    <a-sky color="blue"></a-sky>
    </a-scene>
</body>
<script>
    // WebSocket setup omitted
    setInterval(() => {
        var canvas = document.querySelector('a-scene').components.screenshot.getCanvas('perspective');
        var dataURL = canvas.toDataURL("image/jpeg", 0.5)
        console.log(dataURL)
      // Send dataURL via websocket omitted
    }, 2500)
</script>
</html>

This can only be reproduced opening this page from a mobile device while in VR mode (mine is MotoG5, same behaviour with Google Pixel). If you send via websocket the data, you'll notice that the screenshot is actually taken of a small portion of the main camera (the left bottom part). I already tested that websockets are not involved with the problem.

aframevr / aframe

Screenshot size in VR Mode broken (?) #4117