Потоковое MJPG с A-рамкой - PullRequest
Новая
       24

Потоковое MJPG с A-рамкой

0 голосов
/ 02 июля 2019

Я новичок в A-frame и HTML в целом. Я хочу передать видео на объект в A-кадре для просмотра VR. В настоящее время я использую mjpg-streamer. Приведенный ниже код просто отображает белую сферу, даже если http://IP:port/video передает потоковое видео (но отображает изображение, подобное этому one ). 

<html>
  <head>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <!-- <script src="foo-component.js"></script> -->
  </head>
  <body>
    <a-scene>

        <a-sphere src="http://IP:port/video" position="0 0 -4" radius="2" segments-height="53"></a-sphere>


    </a-scene>
  </body>
</html>

Глядя на этот пример , я думаю, что мне нужно создать компонент, который обновляет сам себя и включает компонент в сцену (<a-entity foo></a-entity>, но он ничего не показывает, когда я открываю HTML .. . Компонент, который я создал, выглядит так: 

AFRAME.registerComponent('foo', {
    schema: {
        width: { type: 'number', default: 10 },
        height: { type: 'number', default: 10 },
        depth: { type: 'number', default: 1 },
        color: { type: 'color', default: '#AAA' }
    },

    init: function () {
        var data = this.data;
        var el = this.el;

        this.loader = new THREE.TextureLoader();

        this.geometry = new THREE.BoxBufferGeometry(data.width, data.height, data.depth);
        this.material = new THREE.MeshPhongMaterial({
            map: this.getImage()
        });
        this.material.needsUpdate = true;
        this.mesh = new THREE.Mesh(this.geometry, this.material);
        el.setObject3D('mesh', this.mesh);
    },

    tick: function (time, timeDelta) {
        this.mesh.material.map.img = this.getImage();
        this.mesh.material.map.needsUpdate = true;
    },

    getImage: function() {
        return this.loader.load("http://IP:port/video");
    }
});
...