Видеосвязь в виртуальной реальности на основе WebRTC и WebVR

внешний интерфейс WebRTC WebVR Виртуальная реальность
 Добро пожаловать в гостиСообщество разработчиков RTC, чтобы обменяться опытом с другими разработчиками WebRTC. 

WebRTC на веб-платформе — не единственный медиа API. Спецификация WebVR была введена несколько лет назад для обеспечения поддержки устройств виртуальной реальности в браузере. теперь стал новымСпецификация API устройства WebXR.

Дэн Дженкин говорит, что добавить поток видеоконференций WebRTC в среду виртуальной реальности с помощью WebVR, FreeSWITCH относительно просто. FreeSWITCH — популярная платформа телефонии с открытым исходным кодом, в которой уже несколько лет используется WebRTC.

Дэн — разработчик Google, который любит рассказывать о сочетании новейших веб-API с приложениями RTC. В следующей статье приведен его код, иллюстрирующий, как он превратил видеоконференцию FreeSWITCH Verto WebRTC в конференцию виртуальной реальности с помощью WebVR.

01

Несколько недель назад я посетил семинар по WebRTC иWebVR деятельность. Добавление VR-контента в ваш браузер и мобильный телефон увеличивает потенциал приложения для привлечения множества людей. За последние два-три года благодаря Google Cardboard виртуальная реальностьмобильный телефонОн уже доступен по цене и широко доступен, а Oculus Go вообще не требует мобильного устройства. Я хочу изучить, как приложения могут использовать эту новую дешевую среду в среде WebRTC.

На самом деле, прежде чем загружать обсуждение в Call For Papers, яWebVRУ меня нет никаких подсказок, но я знаю, что могу кое-что узнать, посмотрев другие демоверсии. Я думаю, что нужно просто набраться смелости, загрузить сумасшедшую дискуссию и посмотреть, кто с ней согласится.

А-образная рама

Есть несколько способов начать работу с WebVR, я выбрал один из них, который называетсяA-Frameframework, который позволяет мне писать HTML и импортироватьJavaScriptбиблиотека для непосредственного создания опыта виртуальной реальности. Хотя демонстрация оказалась не совсем такой, как я ожидал, она показывает, что вы действительно можете добиться потрясающих впечатлений от виртуальной реальности с очень небольшим количеством кода.

если вы знакомы сВеб-композиция, вы сразу будете знать, что делает A-Frame. Теперь вы можете спросить, почему я буду использовать его вместо непосредственного использования WebGL, полифилла WebVR иThree.jsдля создания объектов WebGL или другого фреймворка. Проще говоря, мне нравится писать меньше кода, и A-Frame, кажется, удовлетворяет это.

Если вам не нравится A-Frame, вы можете попробовать другие варианты, такие какwebvr.infoВверхReact360.

Создание опыта WebVR с помощью WebRTC

Многие возможности WebRTC VR теперь возможны с использованием A-Frame.Команда МозиллыПонятно, что в VR-сцене пользователи могут видеть друг друга, представленного точками, и слышать голоса друг друга. Они реализовали этот процесс с использованием каналов данных WebRTC и аудио WebRTC, но я не смог найти нигде, где использовалось бы видео WebRTC, так что возникает вопрос, как использовать живое видео в 3D-среде.

Моя демонстрация основана на открытом исходном кодеFreeSWITCH Verto Communicator. Verto использует WebRTC, и я уже знаю, как взаимодействовать с компонентами Verto с помощью клиентской библиотеки Verto в FreeSWITCH, так что половина задачи выполнена. Клиентская библиотека Verto является отправляющей частью — замена SIP через Websocket, подключение SIP PBX с точками останова WebRTC.

HTML

Посмотрите код A-Frame, который я добавил в Verto Communicator, всего 8 строк.


Сначала элемент a-scene создает сцену, содержащую все процессы в виртуальной реальности, пустой тег a-assets используется для размещения тега видео WebRTC.

Следующая строка, a-entity, является самой важной строкой в ​​простом опыте, который погружает пользователя. Это каркасный монолит с предварительно настроенными средами, которые расширяют общий опыт.

Другие объекты отвечают за управление камерой и фантазией. Ознакомьтесь с поддерживаемыми A-образными рамками, которые вы можете использовать при создании 3D-фигур и объектов.компоненты.

Это просто набор сцен, а затем мы строим код управляющей логики, используяJavaScript.

JavaScript

Verto Communicator — это приложение на основе angular, поэтому элементы можно добавлять или перемещать из основного пространства приложения. Нам нужна логика для соединения Verto и A-frame. Эта логика требуетМенее 40 строк кода:

function link(scope, element, attrs) {

  var newVideo = document.createElement('a-video');
  newVideo.setAttribute('height', '9');
  newVideo.setAttribute('width', '16');
  newVideo.setAttribute('position', '0 5 -15');
  console.log('ATTACH NOW');
  var newParent = document.getElementsByClassName('video-holder');
  newParent[0].appendChild(newVideo);

  window.attachNow = function(stream) {
    var video = document.createElement('video');

    var assets = document.querySelector('a-assets');

    assets.addEventListener('loadeddata', () => {
      console.log('loaded asset data');
    })

    video.setAttribute('id', 'newStream');
    video.setAttribute('autoplay', true);
    video.setAttribute('src', '');
    assets.appendChild(video);

    video.addEventListener('loadeddata', () => {
      video.play();

      // Pointing this aframe entity to that video as its source
      newVideo.setAttribute('src', `#newStream`);
    });

    video.srcObject = stream;
  }

Вышеупомянутая функция Link устанавливается, когда вы используете приложение Verto Communicator для входа в интерфейс собрания.

Изменить Верто

Как видите, когда вызывается ссылка, она создает новый элемент видео и присваивает ему свойства ширины и высоты, добавляя его в трехмерную среду.

В функции AttachNow происходит настоящее волшебство. Я модифицировал библиотеку Verto для вызова функции с именем attachNow при установлении сеанса. По умолчанию библиотека Verto использует теги в стиле jQuery для инициализации и добавления или удаления мультимедиа в теги и из них. Мне нужен поток, чтобы управлять собой, чтобы я мог добавить тег видео к пустому объекту, показанному выше. Это позволяет A-Frame выполнять свою логику — извлекать данные и загружать их на холст в теге a-video в 3D-среде.

Я такжеvertoService.jsДобавлена ​​функция для:

function updateVideoRes() {
    data.conf.modCommand('vid-res', (unmutedMembers * 1280) + 'x720');
    attachNow();
    document.getElementsByTagName('a-video')[0].setAttribute('width', unmutedMembers*16);
  }

UpdateVideoRes предназначен для изменения выходного разрешения сеансов FreeSWITCH Verto. Когда пользователь присоединяется к собранию, мы хотим создать более продолжительную видеопрезентацию в 3D. Обязательно, каждый раз, когда присоединяется новый участник, мы расширяем вывод, чтобы пользователи могли видеть других пользователей на каждом конце.

визуальный

Это конечный результат, виртуальная среда, в которую входят я и Саймон Вудхед.

002

Одна приятная особенность WebVR заключается в том, что для того, чтобы все это работало, вам не нужно иметь гарнитуру VR, вы просто нажимаете кнопку, и вы получаете полноэкранный опыт виртуальной реальности, как будто вы носите гарнитуру VR. вы можете просмотретьВидео на YouTube.

Чему мы научились?

Только половина демо работала, и самый большой вывод заключался в том, что даже если работала только половина демо, это был отличный способ посмотреть видеоконференцию. Для зрителей VR добавление их в поток не является жизнеспособным вариантом, когда они смотрят с помощью гарнитуры. Возможно, именно поэтому HoloLens от Microsoft оптимизирует его для смешанной реальности.



Категории