Une possibilité de diffusion vidéo en direct dans une image?

Je veux créer un site avec une vidéo 360 qui est diffusé en streaming à partir de mes ordinateurs 360 cam (ricoh theta s) et utilise les possibilités d'une image. Je n'ai pas eu de chance d'intégrer youtube livestreaming dans un cadre. J'aurais un serveur web et le flux ne serait pas vraiment public alors peut-être qu'il y a une solution qui implique l'auto-hébergement? Est-ce que quelqu'un a une expérience avec la réalisation de sth comme ça? Je ne peux pas trouver quoi que ce soit lié à ce jour et cela joue un rôle crucial dans mon robotproject ...Une possibilité de diffusion vidéo en direct dans une image?

EDIT 1:

je pourrais préciser encore plus après quelques recherches:

ce serait parfait si a- videosphere et a-video supporteraient sth comme hls ou mpeg-dash - streams. Puisque cela aurait besoin d'une sorte de lecteur pour le chrome et les trucs android, je pense que le plus simple serait de supporter un motionjpg-support car ils sont très faciles à créer. Flashstreams peut être bon aussi mais je ne pense pas qu'il y ait un avenir pour cela.

Y at-il quelque chose comme ça dans la planification par quelqu'un parce que je suis tout à fait sûr que rien de tel n'existe encore ... J'ai pris 2-3 jours de recherche et de trouver rien sur ce sujet ... juste un getUserMedia pour webcam exemple est arrivé, mais ce n'est pas bon pour mon but.

une autre approche que je pourrais vivre avec serait une routine qui charge automatiquement les images dans un ciel (si possible sans scintillement). J'ai essayé d'intégrer javascripts qui sont censés le faire dans les divs normales et ainsi de suite, mais rien n'a fonctionné ...

ou a fait quelque part quelqu'un obtenir un flux de toute nature en cours d'exécution dans une vidéosphère et si oui, comment?

EDIT 2: Je l'ai ... travailler en quelque sorte ... pas vraiment, mais semble prometteur ...

le courant est fourni par « yawcam » qui télécharge une nouvelle image chaque seconde à mon ftp. si je clique maintenant sur la sphère rouge, le script démarre via addEventListener 'click' et le contenu de a-sky est mis à jour ... est-il possible de faire une boucle sur ce script pour ne plus avoir à cliquer dessus et juste se mettre à jour chaque seconde?

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

Source

2016-11-27 Josef P. Wagner

alors voici la solution pour le projet "de type de" solution ...

l'image "out" est mis à jour via "yawcam" sur mon serveur chaque seconde et mis à jour dans la balise a-sky - même sans scintillement ... donc pas de son mais au moins une sorte de live-video-feed dans un ciel.

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

Source

2016-12-06 12:38:16

Une possibilité de diffusion vidéo en direct dans une image?

Répondre

Questions connexes