Отладка кода текстуры холста в A-Frame (поток FFmpeg в качестве источника холста)
Я пытаюсь отобразить холст в качестве текстуры в A-Frame. Изображение холста — это видеопоток, полученный от FFmpeg. Этот канал отлично отображается на примере 2d canvas https://github.com/sbidolach/video-live-streaming , но я просто получаю пустое окно браузера при попытке перенести код для чтения FFmpeg в Canvas в структуру страницы A-frame.
Пожалуйста, найдите ниже мою текущую версию, любая помощь при отладке будет принята с благодарностью:
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script type="text/javascript" src="js/jsmpg.js"></script></head>
<body><script>
// Setup the WebSocket connection and start the player
var client = new WebSocket( 'ws://127.0.0.1:8084/' );
var canvas = document.getElementById('my-canvas');
var player = new jsmpeg(client, {canvas:canvas});
</script><script>
AFRAME.registerComponent('draw-canvas', {
schema: {default: ''},
init: function () {
this.canvas = document.getElementById(this.data);
this.ctx = this.canvas.getContext('2d');
}
});
</script><a-scene>
<a-assets>
<canvas id="my-canvas" crossorigin="anonymous"></canvas>
</a-assets>
<a-entity geometry="primitive: plane"material="src: #my-canvas"draw-canvas="my-canvas"></a-entity>
</a-scene>
</body>
</html>Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …