2016-11-27 5 views
0

自分のコンピュータ360カム(ricoh theta s)からストリーミングされた360ビデオのサイトを作成し、Aフレームの可能性を使用します。私は、フレーム内でYouTubeのライブストリーミングを埋め込むことで運がなかった。私はウェブサーバーを持っていて、ストリームは実際には公開されないので、おそらく自己ホスティングを含むいくつかのソリューションがありますか?誰もこのようなsthを達成するための任意の経験を持っていますか?私はいくつかの研究の後もさらに指定することができますa-frame内でのライブビデオストリーミングの可能性はありますか?

:私はこれまでの関連何かを見つける傾けると、これは私のrobotprojectに重要な役割を果たしている...

EDIT 1

A-場合、それは完璧になりますvideosphereとa-videoはsthのようなhlsやmpeg-dash-streamsをサポートします。それはクロムとアンドロイドのもののための何らかの種類のプレーヤーを必要とするので、最も簡単なルートは、作成が非常に簡単であるため、motionjpgサポートをサポートすることだと思います。 flashstreamsも良いことができますが、私はそれの将来があるとは思わない。

誰もが計画しているようなものはありません。なぜなら、それはまだ存在しないようなものは何もないからです。私は調査して2〜3日かかりましたが、そのトピックについては何も見つかりません...ウェブカメラのgetUserMedia例が現れましたが、それは私の目的にとっては良くありません。

私が暮らすことができるもう1つのアプローチは、a-skyの画像をオートリロードするルーチンです(できるだけちらつきなく)。私は通常のDivsの中でそうするはずのjavascriptを統合しようとしましたが、何も働いていませんでした...

誰かがvideosphereで動くどんな種類のストリームを手に入れましたか?

EDIT 2:私は、それが働いてしまった は...何とか...そうでもないけど有望に見える...

ストリームは、私のftpに毎秒新しい写真をアップロードし、「yawcam」で提供されています。私が今赤い球をクリックすると、スクリプトはaddEventListener 'click'を介して開始し、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() { 
 
     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>

答えて

0

ので、ここで提案した「種類-の」解決のためのソリューションは、絵「アウト」は私のサーバー上の「yawcam」を介して、1秒ごとに更新され...

ですa-skyタグで更新されました - ちらつきがなくても... - 音はありませんが、少なくとも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>

関連する問題