Aframe 始终全屏显示，并且无法为 a-scene 标签设置 css 样式

如何解决Aframe 始终全屏显示，并且无法为 a-scene 标签设置 css 样式

我尝试使用 arjs aframe 打开页面中的网络摄像头。这是我所做的：

<!DOCTYPE html>
<html lang="{{ str_replace('_','-',app()->getLocale()) }}">

<head>
    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="app">
            <button id="take-photo" onclick="takeSnapshot();">Take Photo</button>
        </div>
    </div>

    <a-scene arjs="debugUIEnabled: false;">
        <canvas></canvas>
        <a-entity camera></a-entity>
    </a-scene>
</body>

当我跑步时，相机总是在我的按钮上方并且总是全屏显示。我试图将场景放在另一个 div 和样式宽度、高度中，但它不起作用，仍然是全屏。

我如何为此自定义宽度、高度？

非常感谢！