Powered by Viro - это серия публикаций и руководств, демонстрирующих возможности виртуальной реальности, созданные на основе платформы Viro. Viro Media позволяет разработчикам мобильных приложений быстро создавать возможности виртуальной реальности (VR). Разработчики пишут на React Native, а Viro запускает свой код на всех мобильных VR-устройствах. Зарегистрируйтесь бесплатно и начните создавать свои VR-приложения уже сегодня - Viro Media Github
VR - отличное средство для использования как традиционных, так и иммерсивных медиа. Вы можете перенести кого-то в частный домашний кинотеатр, испытать IMAX или окружить его видео 360 °. Из этого туториала Вы узнаете, как создать медиаплеер VR на базе Viro.
Вот ссылка на последний файл js theatre, который мы рассмотрим шаг за шагом. Рекомендуется открывать этот файл в отдельном окне браузера по мере того, как вы будете следовать инструкциям.
Мы разберем каждый компонент шаг за шагом. Загрузите полный образец на Github, чтобы получить доступ к указанным растровым изображениям и изображениям - VR Media Player: образец кода
Создание театральной сцены
React Native использует метод render () для формирования пользовательского интерфейса. Метод render () состоит из тегов JSX, представляющих сцену. В Viro каждая сцена имеет тег верхнего уровня ViroScene. Все компоненты, которые являются частью сцены, относятся к ViroScene. Для создания театральной среды мы используем предварительно отрендеренную 360-градусную фотографию театра. (Мы предоставляем это изображение бесплатно в разделе Бесплатные ресурсы. Загрузите его здесь.) Мы вставляем его в нашу сцену ниже под тегом ViroScene с помощью компонента Viro360Image:
Теперь нам нужно разместить фактическое 2D-видео поверх нашего 360-градусного изображения, где находится экран фильма. Это делается путем добавления компонента ViroVideo с позицией и масштабирования его так, чтобы он вписывался в сцену:
Как видите, мы используем потоковое видео для фильма, тогда как изображение в кинотеатре 360 было локальным активом. Viro поддерживает оба варианта, поэтому вы можете использовать путь к файлу, который вам больше всего подходит. На данный момент у нас есть иммерсивный кинотеатр с фильмом, играющим на экране.
Теперь давайте добавим элементы управления проигрывателем, чтобы приостанавливать, воспроизводить, останавливать и переключать видео!
Добавление элементов управления проигрывателем
Давайте посмотрим на метод _renderVideoControl () нашего класса ViroTheater, который возвращает элементы управления проигрывателем:
Мы используем классы ViroNode, ViroButton и ViroImage для правильного размещения элементов управления в _renderVideoControl () . Теперь давайте определим методы onClick, определенные в каждом ViroButton. Эти методы onClick будут управлять состоянием видео. Для этого мы будем использовать переменные состояния React.
Метод getInitialState () содержит некоторые значения состояния по умолчанию, которые определяют состояние нашей сцены при загрузке:
Кроме того, мы добавили массив видео, в котором есть ссылки на несколько видео, чтобы мы могли сделать эти кнопки «Пропустить» и «Далее» полезными.
Теперь давайте рассмотрим методы, на которые указывает параметр onClick наших кнопок в _renderVideoControl (). Эти методы, _togglePauseVideo (), _playPreviousVideo (), _playNextVideo () просто изменяют наши переменные состояния:
Наконец, чтобы вышеуказанные методы действительно что-либо делали, нам нужно привязать переменные состояния к нашему видеокомпоненту. Нам также необходимо вызвать наш метод _renderVideoControl () для отображения элементов управления в нашем методе render (). Как только мы это сделаем, наши кнопки будут влиять на видео, позволяя ему приостанавливать или переходить к следующему и предыдущему видео, изменяя источник. На этом завершается наш метод render ():
Теперь управление нашим плеером работает! Однако было бы неплохо изменить состояние кнопки воспроизведения, чтобы оно отражало состояние видео. Давайте переделаем наш метод _renderVideoControl () для этого:
Сверху видно, что мы проверяем состояние видео с помощью this.state.videoPaused и возвращаем другую обработанную кнопку в зависимости от ее значения. Эта логика инкапсулирована в _renderPlayerControl ().
Добавление панорамного видео
А теперь добавим еще немного. Предположим, у вас есть панорамное видео, которое вы хотите переключить, чтобы дать пользователю более захватывающий опыт. Давайте добавим еще одну кнопку в _renderVideoControl () для перехода к сцене 360:
<ViroButton
position={[0.0, -0.4 ,-2]}
scale={[1, 1, 1]}
width={0.5}
height={0.5}
source={require("./res/icon_360.png")}
gazeSource={require("./res/icon_360_hover.png")}
tapSource={require("./res/icon_360_hover.png")}
onClick={this._launchTheatreScene}/>
_launchTheatreScene будет перемещаться к нашей 360-градусной сцене с помощью sceneNavigator, который является опорой каждой ViroScene .:
Теперь давайте определим сцену Viro360Theater, которая отображает панорамное видео:
Сцена просто импортирует компонент Viro360Video и устанавливает источник 360-градусного видео для воспроизведения. Основываясь на том, что мы здесь рассмотрели, мы оставим вам добавить код, чтобы вернуться к предыдущей сцене!
Вот и все! Теперь у вас есть полностью визуализированная сцена театра с элементами управления воспроизведением. Загляните в github с образцом Viro Media Player, чтобы увидеть полный код с еще несколькими примочками.
Начните создавать свой собственный VR Media Player прямо сегодня бесплатно. Получите настройку и код менее чем за 5 минут с помощью нашего Краткого руководства.
