0

下面是我的代码，我对使用框架还很陌生，而且很有趣，我似乎无法弄清楚为什么我会遇到这个问题，有经验的人可以帮助我吗？

var errorCallback = function(e) {
  console.log('Not working!', e);
};

navigator.getUserMedia({
  video: true,
  audio: true
}, function(localMediaStream) {
  var video = document.querySelector('video');
  video.src = window.URL.createObjectURL(localMediaStream);


  video.onloadedmetadata = function(e) {
    // Ready to go. Do some stuff.
  };
}, errorCallback);
video {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.5.0/aframe.min.js"></script>


<video autoplay></video>
<a-scene>
  <a-box color="red" rotation="0 45 45" scale="2 2 2"></a-box>
  <a-entity position="0 0 3.8">
    <a-camera>
    </a-camera>
  </a-entity>
  <a-sky opacity="0"></a-sky>
</a-scene>

当您不处于 VR 模式时，相机可以工作，但当您在 ​​a-frame 中进入 VR 模式时，背景会变为黑色，而不是显示相机源。有谁知道为什么？我之前在其他网站上寻求过帮助，但没有任何帮助。

4

1 回答 1

1

从我所见，您在 aframe 画布上创建了一个元素<video>。进入 vr 模式时，您只能看到 aframe 画布，这就是为什么您的 100%/100% 视频可能会消失的原因。

我认为您应该制作一个<a-video>元素，并将“src”设置为您的 localMediaStream。此外，您需要一个对象来为您的视频添加纹理。
不确定它是否会接受，以前从未尝试过。您应该查看https://github.com/jeromeetienne/AR.js/

顺便说一句，您的方法似乎已被弃用： https
://developer.mozilla.org/pl/docs/Web/API/Navigator/getUserMedia 看来您现在应该使用 navigator.mediaDevices.getUserMedia() ： https://developer。 mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

更新：我制作了一支小笔，它设法用我的相机馈送对飞机进行纹理处理，在 Firefox 上尝试过，效果很好，我的 chrome 在 plunker 或 codepen 中调用时似乎禁用了 userMedia。似乎在我的电脑上的 VRMODE 和适用于 android 的 firefox 下都可以工作。我手机上的飞机因为某种原因歪了 4，我猜它有一个糟糕的相机并且没有记忆：p

随意修改我的笔： https ://codepen.io/gftruj/pen/jwEyQN 我的丑脸作为免费奖金！！

css 部分是剩余部分，最好确保视频源具有二维的力量。正如我在 aframe 网站上看到的，我应该将视频放在<a-video>元素内：https ://aframe.io/docs/0.5.0/primitives/a-video.html ，尽管将其作为<a-plane>src 似乎可以正常工作。

于 2017-06-05T08:02:03.413 回答