Webrtc 如何将网络摄像头提要用作a帧纹理？

我想将网络摄像头流作为纹理附加到一个实体中，这可能吗？我将如何实现

我想要的效果示例包括：

在虚拟现实中将我的网络摄像头视频投影到电视上 面对虚拟现实中的某个人 在虚拟现实中查看自己以进行调试 添加资产 第一步是将视频添加为资产：

<a-assets>
  <video id="webcam" playsinline></video>
</a-assets>

如果代码运行器不工作，您也可以在此处使用它：

添加资产 第一步是将视频添加为资产：

<a-assets>
  <video id="webcam" playsinline></video>
</a-assets>

---

如果代码运行程序不起作用，您也可以在此处使用它：

这真的很酷。如果我们在移动浏览器中运行它，它可以使用前后摄像头吗？这是一个很好的答案，但请注意，在脚本标记中添加代码（至少从版本1.0.4开始）会破坏它，并且在框架中被认为是非语义的。如果我这样做，它对我不起作用，但是如果我在页面加载后在控制台中运行代码，一切都很好。这正是在使用aframe手动运行脚本标记时应该预期的错误类型，您需要为aframe提供对执行时间的控制。如果我们在移动浏览器中运行它，它可以使用前后摄像头吗？这是一个很好的答案，但请注意，在脚本标记中添加代码（至少从版本1.0.4开始）会破坏它，并且在框架中被认为是非语义的。如果我这样做，它对我不起作用，但是如果我在页面加载后在控制台中运行代码，一切都很好。这正是使用aframe手动运行脚本标记时应该预料到的错误类型，您需要为aframe提供对执行时间的控制。

<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>

<!-- Create an empty video tag to hold our webcam stream -->
<a-assets>
  <video id="webcam" playsinline></video>
</a-assets>

<!-- Creates -->
<a-scene background="color: #ECECEC">
  <a-box position="-1 0.5 -3" rotation="0 45 0" shadow material="src: #webcam"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
</a-scene>

<!-- Start the webcam stream and attach it to the video element -->
<script>
  // You can also set which camera to use (front/back/etc)
  // @SEE https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
  navigator.mediaDevices.getUserMedia({audio: false, video: true})
  .then(stream => {
    let $video = document.querySelector('video')
    $video.srcObject = stream
    $video.onloadedmetadata = () => {
      $video.play()
    }
  })
</script>