Question

我想创建一个360度视频的网站，该视频从我的计算机360 cam（ricoh theta s）流式传输并使用a-frame的可能性。我没有任何运气将youtube livestreaming嵌入到一个框架内。我会有一个网络服务器，流不会真的公开所以也许有一些涉及自主的解决方案？有没有人有这样的经历？到目前为止我找不到任何相关内容，这在我的机器人项目中起着至关重要的作用......

编辑1：

经过一些研究后，我可能会指出更多：

如果a-videosphere和a-video会像hls或mpeg-dash那样支持它，那将是完美的。因为那将需要某种类型的玩家用于chrome和android的东西，我认为最简单的方法是支持motionjpg支持，因为它们很容易创建。 flashstreams也可以很好，但我认为没有未来。

在某人的策划中是否有类似的东西，因为我很确定那样的东西还存在......我花了2-3天的时间研究并找不到关于那个主题的东西...只是一个getUserMedia for webcam example出现了，但它对我的目的不利。

我可以忍受的另一种方法是在天空中自动重载图像的例程（如果可能的话，没有闪烁）。我试图整合javascripts，这些javascripts应该在普通div中做到这一点，但是没有任何效果......

或者某个地方有人在视频层中运行任何类型的流，如果是这样的话？

编辑2：我让它工作......不知怎的......不是真的，但看起来很有希望...

该流由＆＃34; yawcam＆＃34;提供。每秒将一张新图片上传到我的ftp。如果我现在点击红色球体，脚本将通过addEventListener启动＆＃39;点击＆＃39;并且a-sky的内容得到更新......有没有办法从该脚本中循环出来，这样就不必再点击它了，它只是每秒更新一次？

＆＃13;

<head>

    <meta charset="utf-8">
    <title>joeinterface</title>
    <meta name="description" content="360 Video — A-Frame">
    <script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>

</head>



<body>

<script>
  AFRAME.registerComponent('set-sky', {
    schema: {default:''},
    init() {
      const sky = document.querySelector('a-sky');
      this.el.addEventListener('click', () => {
        sky.setAttribute( 'src', this.data + "?" + Math.random());
      });
    }
  });

</script>

<a-scene>
  <a-camera position="0 0 0">
    <a-cursor color="#4CC3D9" fuse="true" timeout="10"></a-cursor>
  </a-camera>

  <a-sphere color="#F44336" radius="8" position="-8 2 -8" set-sky="image1.jpg"></a-sphere>

  

  <a-sky></a-sky>
</a-scene>

 </body>

＆＃13;

Answer 1

所以这里是提出的“种类”解决方案的解决方案......

图片“out”通过我的服务器上的“yawcam”每秒更新一次，并在a-sky标签中更新 - 即使没有闪烁......所以没有声音，但至少是一种现场视频输入-天空。

<head>

   <meta charset="utf-8">
   <title>joeinterface</title>
   <meta name="description" content="360 Video � A-Frame">
   <script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>

</head>



<body>

<script>
 AFRAME.registerComponent('set-sky', {
   schema: {default:''},
   init: function() {
     this.timeout = setInterval(this.updateSky.bind(this), 100);
     this.sky = this.el;
     
   },
   remove: function() {
     clearInterval(this.timeout);
     this.el.removeObject3D(this.object3D);
   },
   updateSky: function() {
     this.sky.setAttribute( 'src', this.data + "?" + Math.random());
   }
 });

</script>

<a-scene>
 <a-camera position="0 0 0">
   <a-cursor color="#4CC3D9 " fuse="true" timeout="10"></a-cursor>
 </a-camera>

 <a-sphere color="#F44336 " radius="2" position="-8 2 -8"></a-sphere>

 

 <a-sky set-sky="out"></a-sky>
</a-scene>

</body>

在一帧内进行实时视频流的任何可能性？

1 个答案: