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

Question

我想将网络摄像头流作为纹理附加到aframe中的实体上，这有可能吗？我该怎么做？

我想要的效果示例包括：

• 将我的网络摄像头供稿投影到vr内的电视上
• “面对时机” VR中的某人
• 出于调试目的在VR中看到自己

Answer 1

https://media.giphy.com/media/cJjZg8kXSUopNzZP4V/giphy.gif

添加资产

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

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

请注意playsinline指令，该指令防止页面进入全屏模式，尤其是在移动设备上。我只想添加一点细节，因为尽管我们的应用程序无论如何都将以全屏模式运行，但我希望该应用程序来决定而不是随机的视频元素！

创建流

接下来，我们使用以下内容创建流：

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

应用纹理

最后，我们将流作为材料应用于具有以下条件的任何实体：material="src: #webcam"

工作演示

<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>

如果代码运行器不起作用，您也可以在这里使用它：https://glitch.com/~webcam-as-aframe-texture