Блог

В настоящее время я работаю над проектом, в котором я управляю роботизированной рукой в виртуальной реальности. Я делаю это с помощью A-Frame и oculus quest 1. Чтобы пользователь мог видеть, что он делает с роботизированной рукой, я хочу транслировать видео с веб-камеры, направленной на руку, в приложение Web-VR. Веб-камера и гарнитура находятся в одной локальной сети, поэтому мне не нужно, чтобы видео было доступно из Интернета.

Что я пробовал для потоковой передачи с веб-камеры до сих пор:

• поток udp, rtp и srt с использованием OBS со следующим URL:
  • протокол: // 145.89.161.93:8087?режим = прослушиватель
  • протокол: // 127.0.0.1:8087?режим = прослушиватель
  • протокол: //145.89.161.93:8087
  • протокол: //145.89.161.93:8087
• транслируйте http, rtsp, rtp, udp с помощью vlc media player.

Я пытался просмотреть все потоки obs в vlc, единственным, который, казалось, работал, был поток srt с mode = listener . Но когда я попытался просмотреть этот поток в aframe, у меня ничего не получилось. И теперь obs больше не позволяет мне транслировать с использованием srt (я не знаю почему). Я попытаюсь переустановить obs, чтобы посмотреть, поможет ли это.

Что я пытался просмотреть поток в A-Frame:

 <a-video  src="protocol://145.89.161.93:8087" width="16" height="9" position="0 0 -10"></a-video>
 

 <a-assets>
    <video id="#webcam_stream" src="protocol://145.89.161.93:8087" playsinline> </video>
</a-assets>

<a-video  src="#webcam_stream" width="16" height="9" position="0 0 -10"></a-video>
 

Поток http, похоже, не работает, поскольку сервер, к которому подключается Oculus, запускается с использованием https. Поскольку в противном случае гарнитура не позволит использовать VR. С другими потоками A-Frame, похоже, не выдает ошибку при подключении или неизвестном исходном файле и т. Д. Но он также не отображает поток / видео.

Другие потоки VLC выдают ошибку перекрестного происхождения, но она исчезает, когда я использую crossorigin=»anonymous». Но компонент a-video не может найти ресурс #webcam_stream, если я это сделаю.

Я думаю, что этот урок немного помог бы, даже если это не a-frame. Но html-код не виден, поэтому он не очень полезен.

Я не очень хорошо разбираюсь в веб-разработке и потоковой передаче, но это довольно важная часть нашего проекта. Поэтому любая помощь приветствуется.

Если у кого-нибудь есть решение для отображения потока удаленной веб-камеры в A-Frame, уже существующий код или общее направление / предложение для изучения, это было бы очень оценено.

Хорошо, после долгих поисков я нашел решение своей проблемы! Мне пришлось решать множество проблем:

• html5 поддерживает только ограниченное количество протоколов потоковой передачи
• Поток должен быть безопасным, поскольку приложение виртуальной реальности размещено с использованием https
• Нам нужно применить видео к объекту в A-Frame
• Нам нужно запустить фактический поток.
• Нам нужна небольшая задержка

Протокол потоковой передачи

Для протокола потоковой передачи я в конечном итоге использовал HLS. По умолчанию он не поддерживается большинством браузеров и HTML5. Но, но с использованием HLS.js мы можем добавить эту поддержку очень легко.

Безопасность

Используя этот протокол, он также решает наши проблемы безопасности. Поскольку потоки HLS — это в основном просто короткие сегменты видео, поставляемые с использованием HTTP / HTTPS-сервера. Поскольку наш сервер представляет собой простой https-сервер, нам нужно только вывести файлы HLS в каталог внутри сервера, чтобы сделать их доступными для приложения.

Если ваш поток находится не на том же сервере, что и ваше приложение, вам нужно будет добавить заголовки CORS на ваш хост HLS для GET запроса. Это требование HLS.js библиотека

Применить видео к объекту в кадре

Чтобы применить поток к объекту в A-Frame, нам нужен <video> ресурс. После загрузки этого ресурса мы можем использовать скрипт для применения потока к ресурсу. Затем мы можем использовать этот ресурс в качестве источника для объектов и текстур.

Приведенный ниже код делает именно это. Поскольку объекты загружаются после ресурсов, добавление компонента к <a-video> объекту вызовет сценарий после загрузки ресурсов. Затем мы можем использовать ресурс в качестве источника для нашей <a-video> сущности.

 <!DOCTYPE html>
<html>
    <head>
        <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
        <script src="hls.js"></script>
        <script>
            AFRAME.registerComponent('hls_stream', {
                init: function(){
                    var video = document.getElementById('webcam_stream');
                    if(Hls.isSupported()) {
                    var hls = new Hls();
                    hls.loadSource('https://ip:port/path_to_hls_file/filename.m3u8');
                    hls.attachMedia(video);
                    hls.on(Hls.Events.MANIFEST_PARSED,function() {
                        video.play();
                    });
                }
                else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                    video.src = 'https://ip:port/path_to_hls_file/filename.m3u8';
                    video.addEventListener('loadedmetadata',function() {
                        video.play();
                    });
                    }
                }
            })
          </script>
    </head>   
    <body>
        <a-scene cursor="rayOrigin:mouse">
            <a-assets>
                <video id="webcam_stream" crossorigin="anonymous"></video>
            </a-assets>

            <a-video src="#webcam_stream" width="16" height="9" position="0 4.5 -20" hls_stream></a-video>

          
            <a-entity id="camera"  wasd-controls camera look-controls></a-entity>
            <a-sky color="#111"></a-sky>
        </a-scene>
    </body>
</html>

 

Как мне выполнить потоковую передачу

В настоящее время я создаю поток HLS с помощью OBS. Вы можете найти, как транслировать HLS с помощью OBS, здесь OBS относительно прост в настройке и позволяет использовать не только веб-камеру, поскольку вы можете захватывать практически любое видео, экран или другой источник ввода с помощью OBS.

Задержка

Единственное, с чем я все еще борюсь, это задержка в потоке OBS. Из-за 2-секундных сегментов и из-за того, что длина списка сегментов потока HLS OBS равна 4, мы обычно получаем задержку около 8 секунд. Это все еще больше, чем я хочу, но пока этого хватит, поскольку запуск потока HLS с низкой задержкой — тема для другого вопроса.

Запуск воспроизведения

По умолчанию в большинстве браузеров автоматическое воспроизведение видеофайлов отключено. Поэтому вам нужно будет вручную запустить video.play() команду, если автоматическое воспроизведение отключено. Или вы можете включить автозапуск в настройках вашего браузера, и видео автоматически запустится.