Поделиться через


HoloLens (1-го поколения) и Azure 306: потоковая передача видео


Примечание

Руководства Mixed Reality Academy были разработаны для иммерсивных гарнитур HoloLens (1-го поколения) и иммерсивных гарнитур Mixed Reality. Поэтому мы считаем, что важно оставить эти руководства для разработчиков, которые ищут рекомендации по разработке для этих устройств. Данные руководства не будут обновляться с учетом последних наборов инструментов или возможностей взаимодействия для HoloLens 2. Они будут сохранены для работы на поддерживаемых устройствах. В будущем будет опубликована новая серия учебников, демонстрирующих разработку для HoloLens 2. Это уведомление будет обновлено со ссылкой на эти учебники при их публикации.


Снимок экрана: пример Windows Mixed Reality V R.Снимок экрана: интерфейс Windows Mixed Reality V R.

В этом курсе вы узнаете, как подключить службы мультимедиа Azure к Windows Mixed Reality виртуальной реальности, чтобы обеспечить потоковую 360-градусную передачу видео на иммерсивных гарнитурах.

Службы мультимедиа Azure — это набор служб, которые предоставляют службы потоковой передачи видео в широковещательном качестве для охвата более широкой аудитории на самых популярных мобильных устройствах. Дополнительные сведения см. на странице Служб мультимедиа Azure.

Завершив этот курс, вы получите иммерсивное приложение гарнитуры смешанной реальности, которое сможет сделать следующее:

  1. Получение видео с разрешением 360 градусов из службы хранилища Azure с помощью службы мультимедиа Azure.

  2. Отображение полученного видео на 360 градусов в сцене Unity.

  3. Переход между двумя сценами с двумя разными видео.

В приложении вы можете определить, как вы будете интегрировать результаты с проектом. Этот курс предназначен для обучения интеграции службы Azure с проектом Unity. Это ваша работа, чтобы использовать знания, полученные из этого курса, для улучшения приложения смешанной реальности.

Поддержка устройств

Курс HoloLens Иммерсивные гарнитуры
306. Смешанная реальность и Azure: потоковое видео ✔️

Предварительные требования

Примечание

Это руководство предназначено для разработчиков, имеющих базовый опыт работы с Unity и C#. Кроме того, имейте в виду, что предварительные требования и письменные инструкции в этом документе представляют то, что было проверено и проверено на момент написания статьи (май 2018 г.). Вы можете использовать последнюю версию программного обеспечения, как указано в статье установка инструментов, хотя не следует предполагать, что информация в этом курсе будет идеально соответствовать тому, что вы найдете в более новом программном обеспечении, чем указано ниже.

Для этого курса мы рекомендуем использовать следующее оборудование и программное обеспечение:

Перед началом работы

  1. Чтобы избежать проблем при сборке этого проекта, настоятельно рекомендуется создать проект, упомянутый в этом руководстве, в корневой или почти корневой папке (длинные пути к папкам могут вызвать проблемы во время сборки).

  2. Настройте и протестируйте иммерсивную гарнитуру Смешанная реальность.

    Примечание

    Контроллеры движения для этого курса не требуются. Если вам нужна поддержка по настройке иммерсивной гарнитуры, щелкните ссылку о настройке Windows Mixed Reality.

Глава 1. Портал Azure: создание учетной записи хранения Azure

Чтобы использовать службу хранилища Azure, необходимо создать и настроить учетную запись хранения в портал Azure.

  1. Войдите на портал Azure.

    Примечание

    Если у вас еще нет учетной записи Azure, ее необходимо создать. Если вы выполняете это руководство в учебной или лабораторной ситуации, обратитесь к преподавателю или одному из прокторов за помощью в настройке новой учетной записи.

  2. После входа щелкните Учетные записи хранения в меню слева.

    Снимок экрана: меню портала Azure. Выделены учетные записи хранения.

  3. На вкладке Учетные записи хранения щелкните Добавить.

    Снимок экрана: диалоговое окно учетной записи хранения. Выделен элемент Добавить.

  4. На вкладке Создание учетной записи хранения выполните следующие действия.

    1. Вставьте имя учетной записи, имейте в виду, что это поле принимает только цифры и строчные буквы.

    2. В поле Модель развертывания выберитеResource Manager.

    3. В поле Тип учетной записи выберите Хранилище (общего назначения версии 1).

    4. В разделе Производительность выберите Стандартный.*

    5. В поле Репликация выберите Локально избыточное хранилище (LRS).

    6. Оставьте значение Требуется безопасное перемещение как Отключено.

    7. Выберите подписку.

    8. Выберите группу ресурсов или создайте новую. Группа ресурсов предоставляет способ мониторинга, управления доступом, подготовки и управления выставлением счетов для коллекции ресурсов Azure.

    9. Определите расположение группы ресурсов (если вы создаете новую группу ресурсов). Расположение в идеале должно находиться в регионе, где будет выполняться приложение. Некоторые ресурсы Azure доступны только в определенных регионах.

  5. Вам потребуется подтвердить, что вы поняли условия, применяемые к этой Службе.

    Снимок экрана: страница создания учетной записи хранения.

  6. После нажатия кнопки Создать вам придется подождать, пока служба будет создана. Это может занять минуту.

  7. После создания экземпляра службы на портале появится уведомление.

    Снимок экрана: уведомление об успешном развертывании.

  8. На этом этапе вам не нужно следовать ресурсу, просто перейдите к следующей главе.

Глава 2. Портал Azure: создание службы мультимедиа

Чтобы использовать службу мультимедиа Azure, необходимо настроить экземпляр службы, который будет доступен вашему приложению (при этом владелец учетной записи должен быть Администратор).

  1. На портале Azure щелкните Создать ресурс в левом верхнем углу и найдите Службу мультимедиа, нажмите клавишу ВВОД. Ресурс, который вы хотите сейчас, имеет розовый значок; Щелкните эту кнопку, чтобы отобразить новую страницу.

    Снимок экрана: портал Azure. Выделен параметр Службы мультимедиа.

  2. На новой странице будет представлено описание службы мультимедиа. В левом нижнем углу этого запроса нажмите кнопку Создать , чтобы создать связь с этой службой.

    Снимок экрана: портал Azure. Выделена кнопка Создать.

  3. После нажатия кнопки Создать появится панель, в которой необходимо указать некоторые сведения о новой службе мультимедиа:

    1. Вставьте нужное имя учетной записи для этого экземпляра службы.

    2. Выберите подписку.

    3. Выберите группу ресурсов или создайте новую. Группа ресурсов предоставляет способ мониторинга, управления доступом, подготовки и управления выставлением счетов для коллекции ресурсов Azure. Рекомендуется хранить все службы Azure, связанные с одним проектом (например, этими лабораториями), в общей группе ресурсов.

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

    1. Определите расположение группы ресурсов (если вы создаете новую группу ресурсов). Расположение в идеале должно находиться в регионе, где будет выполняться приложение. Некоторые ресурсы Azure доступны только в определенных регионах.

    2. В разделе Учетная запись хранения щелкните раздел Выберите... и выберите учетную запись хранения, созданную в последней главе.

    3. Вам также потребуется подтвердить, что вы поняли условия, применяемые к этой Службе.

    4. Нажмите кнопку Создать.

      Снимок экрана: страница

  4. После нажатия кнопки Создать вам придется подождать, пока служба будет создана. Это может занять минуту.

  5. После создания экземпляра службы на портале появится уведомление.

    Снимок экрана: значок уведомления в меню портала.

  6. Щелкните уведомление, чтобы просмотреть новый экземпляр службы.

    Снимок экрана: уведомление об успешном развертывании.

  7. Нажмите кнопку Перейти к ресурсу в уведомлении, чтобы просмотреть новый экземпляр службы.

  8. На новой странице Службы мультимедиа на панели слева щелкните ссылку Активы , которая находится примерно на полпути вниз.

  9. На следующей странице в левом верхнем углу страницы нажмите кнопку Отправить.

    Снимок экрана: страница

  10. Щелкните значок Папка , чтобы просмотреть файлы, и выберите первое видео 360, которое вы хотите выполнить потоковую передачу.

    Чтобы скачать пример видео, перейдите по этой ссылке.

    Снимок экрана: страница отправки видеоматериала.

Предупреждение

Длинные имена файлов могут вызвать проблемы с кодировщиком. Поэтому, чтобы видео не было проблем, рассмотрите возможность сокращения длины имен видеофайлов.

  1. Индикатор выполнения станет зеленым после завершения отправки видео.

    Снимок экрана: индикатор выполнения отправки видеоматериала.

  2. Щелкните приведенный выше текст (yourservicename — Assets), чтобы вернуться на страницу Активы .

  3. Вы заметите, что ваше видео успешно загружено. Щелкните ее.

    Снимок экрана: страница

  4. На странице, на которую вы будете перенаправлены, будут отображаться подробные сведения о видео. Чтобы использовать видео, необходимо закодировать его, нажав кнопку Кодировать в левом верхнем углу страницы.

    Снимок экрана: страница ресурса. Кнопка кодирования выделена.

  5. Справа появится новая панель, на которой можно будет задать параметры кодирования для файла. Задайте следующие свойства (некоторые уже будут заданы по умолчанию):

    1. Имя кодировщика мультимедиа Media Encoder Standard

    2. Кодирование предустановленного содержимого Адаптивная многоскоростная скорость MP4

    3. Имя задания Media Encoder Standard обработки Video1.mp4

    4. Имя ресурса носителя выходных данныхVideo1.mp4 — Media Encoder Standard закодировано

      Снимок экрана: страница кодирования ресурса.

  6. Нажмите кнопку Создать .

  7. Вы увидите панель с добавленным заданием кодирования, щелкните эту панель, и появится панель с отображением хода кодирования.

    Снимок экрана: добавленное задание кодирования с меткой

    Снимок экрана: страница обработки кодировщика.

  8. Дождитесь завершения задания. После этого вы можете закрыть панель с помощью X в правом верхнем углу этой панели.

    Снимок экрана: индикатор выполнения с состоянием

    Снимок экрана: верхнее меню страницы обработки кодировщика мультимедиа.

    Важно!

    Это время зависит от размера файла видео. Этот процесс может занять довольно много времени.

  9. Теперь, когда закодированная версия видео создана, ее можно опубликовать, чтобы сделать ее доступной. Для этого щелкните синюю ссылку Активы , чтобы вернуться на страницу ресурсов.

    Снимок экрана: портал Azure. Выделена ссылка на ресурсы.

  10. Вы увидите видео вместе с другим, который имеет тип ресурса Multi-Bitrate MP4.

    Снимок экрана: меню ресурсов Microsoft Azure.

    Примечание

    Вы можете заметить, что новый ресурс, наряду с вашим исходным видео, имеет значение Unknown и имеет 0 байтов для его размера. Просто обновите окно, чтобы обновить его.

  11. Щелкните этот новый ресурс.

    Снимок экрана: список ресурсов каталога.

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

    Снимок экрана: верхняя строка меню. Выделена кнопка Опубликовать.

  13. Вам будет предложено задать указатель, который является точкой входа, для файлов и файлов в ресурсах. Для сценария задайте следующие свойства:

    1. Тип указателя>Прогрессивный.

    2. Дата и время будут заданы для вас, от текущей даты до времени в будущем (в данном случае — сто лет). Оставьте как есть или измените его в соответствии с потребностями.

    Примечание

    Дополнительные сведения о указателях и о том, что можно выбрать, см. в документации по Службам мультимедиа Azure.

  14. В нижней части этой панели нажмите кнопку Добавить .

    Снимок экрана: списки каталогов с диалоговым окном публикации ресурса.

  15. Теперь видео опубликовано и может быть потоковой передачи с помощью его конечной точки. Далее внизу страницы находится раздел Файлы . Здесь будут находиться различные закодированные версии видео. Выберите максимально возможное разрешение (на изображении ниже это файл 1920x960), после чего справа появится панель. Там вы найдете URL-адрес для скачивания. Скопируйте эту конечную точку , так как вы будете использовать ее позже в коде.

    Снимок экрана: раздел Microsoft Файлы Azure.

    Снимок экрана: страница сведений об активе.

    Примечание

    Вы также можете нажать кнопку Воспроизвести , чтобы воспроизвести видео и протестировать его.

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

  17. После публикации обоих видео можно перейти к следующей главе.

Глава 3. Настройка проекта Unity

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

  1. Откройте Unity и нажмите кнопку Создать.

    Снимок экрана: вкладка проектов Unity. Выделена кнопка Создать.

  2. Теперь необходимо указать имя проекта Unity, вставить MR_360VideoStreaming.. Убедитесь, что для типа проекта задано значение 3D. Задайте для параметра Расположение подходящее место (помните, что лучше ближе к корневым каталогам). Затем щелкните Создать проект.

    Снимок экрана: страница новых проектов Unity.

  3. При открытии Unity стоит проверить, что для редактора скриптов по умолчанию задано значение Visual Studio. Перейдите в раздел Изменениепараметров , а затем в новом окне перейдите к разделу Внешние инструменты. Измените внешний редактор скриптов на Visual Studio 2017. Закройте окно Параметры .

    Снимок экрана: меню внешнего редактора скриптов. Выбрана Среда Visual Studio 2017.

  4. Затем перейдите в раздел Параметры сборкифайлов и переключите платформу на универсальная платформа Windows, нажав кнопку Переключить платформу.

  5. Кроме того, убедитесь, что:

    1. Для параметра Целевое устройство задано значение Любое устройство.

    2. Для параметра Тип сборки задано значение D3D.

    3. Для пакета SDK задано значение Последняя установленная версия.

    4. Версия Visual Studio имеет значение Последняя установленная.

    5. Для сборки и запуска задано значение Локальный компьютер.

    6. Не беспокойтесь о настройке Сцены прямо сейчас, так как вы настроите их позже.

    7. Оставшиеся параметры следует оставить по умолчанию на данный момент.

      Снимок экрана: экран параметров сборки Unity.

  6. В окне Параметры сборки нажмите кнопку Параметры проигрывателя . Откроется соответствующая панель в пространстве, где находится инспектор .

  7. На этой панели необходимо проверить несколько параметров:

    1. На вкладке Другие параметры :

      1. Версия среды выполненияскриптов должна быть стабильной (эквивалент .NET 3.5).

      2. Серверная часть сценариев должна быть .NET.

      3. Уровень совместимости API должен быть .NET 4.6.

        Снимок экрана: страница

    2. Далее вниз по панели в разделе Параметры XR (см. раздел Параметры публикации) установите флажок Виртуальная реальность Поддерживается, убедитесь, что пакет SDK для Windows Mixed Reality добавлен.

      Снимок экрана: экран параметров Unity X R.

    3. На вкладке Параметры публикации в разделе Возможности проверка:

      • InternetClient;

        Снимок экрана: экран

  8. После внесения этих изменений закройте окно Параметры сборки .

  9. Сохраните файл проекта Сохранить проект.

Глава 4. Импорт пакета InsideOutSphere Unity

Важно!

Если вы хотите пропустить компонент Unity Set up этого курса и перейти непосредственно к коду, скачайте этот пакет unitypackage, импортируйте его в проект в виде пользовательского пакета, а затем перейдите к главе 5. Вам по-прежнему потребуется создать проект Unity.

Для этого курса необходимо скачать пакет ресурсов Unity с именем InsideOutSphere.unitypackage.

Практическое руководство по импорту пакета unitypackage:

  1. На панели мониторинга Unity щелкните Активы в меню в верхней части экрана, а затем выберите Импорт > пользовательского пакета.

    Снимок экрана: меню ресурсов. Открыто меню импорта пакета. Выбран пользовательский пакет.

  2. С помощью средства выбора файлов выберите пакет InsideOutSphere.unitypackage и нажмите кнопку Открыть. Отобразится список компонентов для этого ресурса. Подтвердите импорт, нажав кнопку Импорт.

    Снимок экрана: экран импорта пакета Unity.

  3. После завершения импорта вы увидите, что в папку Assets добавлены три новые папки: Материалы, Модели и Заготовки. Такой тип структуры папок является типичным для проекта Unity.

    Снимок экрана: папка assets.

    1. Откройте папку Models и увидите, что модель InsideOutSphere импортирована.

    2. В папке Materials вы найдете материал InsideOutSphereslambert1, а также материал Под названием ButtonMaterial, который используется GazeButton, который вы увидите в ближайшее время.

    3. Папка Prefabs содержит заготовку InsideOutSphere, которая содержит модельInsideOutSphere и GazeButton.

    4. Код не включен. Вы напишете код, следуя этому курсу.

  4. В иерархии выберите объект Main Camera и обновите следующие компоненты:

    1. Преобразование

      1. Position = X: 0, Y: 0, Z: 0.

      2. Поворот = X: 0, Y: 0, Z: 0.

      3. Масштаб X: 1, Y: 1, Z: 1.

    2. Камера

      1. Очистить флаги: сплошной цвет.

      2. Обрезка плоскостей: вблизи: 0,1, дальней: 6.

        Снимок экрана: экран

  5. Перейдите в папку Prefab и перетащите заготовку InsideOutSphere на панель иерархии .

    Снимок экрана: меню папки Prefab и среда разработчика.

  6. Разверните объект InsideOutSphere в иерархии , щелкнув маленькую стрелку рядом с ним. Под ним вы увидите дочерний объект с именем GazeButton. Это будет использоваться для изменения сцен и, следовательно, видео.

    Снимок экрана: вкладка иерархии.

  7. В окне инспектора щелкните компонент Преобразования InsideOutSphere и убедитесь, что заданы следующие свойства:

Преобразование — положение

X да Z
0 0 0

Преобразование — поворот

X да Z
0 -50 0

Преобразование — масштабирование

X да Z
0 0 0

Снимок экрана: экран инспектора, открытый для Inside Out Sphere.

  1. Щелкните дочерний объект GazeButton и задайте его Transform следующим образом:

Преобразование — положение

X да Z
3,6 1.3 0

Преобразование — поворот

X да Z
0 0 0

Преобразование — масштабирование

X да Z
1 1 1

Снимок экрана: открытая вкладка сцены.

Глава 5. Создание класса VideoController

Класс VideoController содержит две конечные точки видео, которые будут использоваться для потоковой передачи содержимого из службы мультимедиа Azure.

Чтобы создать этот класс, выполните указанные ниже действия.

  1. Щелкните правой кнопкой мыши папку ресурсов, расположенную на панели проектов , и выберите команду Создать > папку. Назовите папку Scripts.

    Снимок экрана: меню папки ресурсов. Откроется меню создания и выбрана папка.

    Снимок экрана: вкладка проекта. Выбрана папка Активы.

  2. Дважды щелкните папку Скрипты, чтобы открыть ее.

  3. Щелкните правой кнопкой мыши в папке и выберите команду Создать > скрипт C#. Назовите скрипт VideoController.

    Снимок экрана: файл с именем Video Controller.

  4. Дважды щелкните новый скрипт VideoController , чтобы открыть его в Visual Studio 2017.

    Снимок экрана: код для файла видео контроллера.

  5. Обновите пространства имен в верхней части файла кода следующим образом:

    using System.Collections;
    using UnityEngine;
    using UnityEngine.SceneManagement;
    using UnityEngine.Video;
    
  6. Введите следующие переменные в класс VideoController вместе с методом Awake():

        /// <summary> 
        /// Provides Singleton-like behaviour to this class. 
        /// </summary> 
        public static VideoController instance; 
    
        /// <summary> 
        /// Reference to the Camera VideoPlayer Component.
        /// </summary> 
        private VideoPlayer videoPlayer; 
    
        /// <summary>
        /// Reference to the Camera AudioSource Component.
        /// </summary> 
        private AudioSource audioSource; 
    
        /// <summary> 
        /// Reference to the texture used to project the video streaming 
        /// </summary> 
        private RenderTexture videoStreamRenderTexture;
    
        /// <summary>
        /// Insert here the first video endpoint
        /// </summary>
        private string video1endpoint = "-- Insert video 1 Endpoint here --";
    
        /// <summary>
        /// Insert here the second video endpoint
        /// </summary>
        private string video2endpoint = "-- Insert video 2 Endpoint here --";
    
        /// <summary> 
        /// Reference to the Inside-Out Sphere. 
        /// </summary> 
        public GameObject sphere;
    
        void Awake()
        {
            instance = this;
        }
    
  7. Теперь пришло время ввести конечные точки из видео службы мультимедиа Azure:

    1. Первый в переменной video1endpoint .

    2. Второй в переменной video2endpoint .

    Предупреждение

    Существует известная проблема с использованием https в Unity версии 2017.4.1f1. Если видео содержат ошибку при воспроизведении, попробуйте использовать вместо него http.

  8. Затем необходимо изменить метод Start( ). Этот метод будет запускаться каждый раз, когда пользователь переключает сцену (следовательно, переключает видео), просматривая кнопку взгляда.

        // Use this for initialization
        void Start()
        {
            Application.runInBackground = true;
            StartCoroutine(PlayVideo());
        }
    
  9. После метода Start() вставьте метод PlayVideo()IEnumerator , который будет использоваться для плавного запуска видео (поэтому заикание не видно).

        private IEnumerator PlayVideo()
        {
            // create a new render texture to display the video 
            videoStreamRenderTexture = new RenderTexture(2160, 1440, 32, RenderTextureFormat.ARGB32);
    
            videoStreamRenderTexture.Create();
    
            // assign the render texture to the object material 
            Material sphereMaterial = sphere.GetComponent<Renderer>().sharedMaterial;
    
            //create a VideoPlayer component 
            videoPlayer = gameObject.AddComponent<VideoPlayer>();
    
            // Set the video to loop. 
            videoPlayer.isLooping = true;
    
            // Set the VideoPlayer component to play the video from the texture 
            videoPlayer.renderMode = VideoRenderMode.RenderTexture;
    
            videoPlayer.targetTexture = videoStreamRenderTexture;
    
            // Add AudioSource 
            audioSource = gameObject.AddComponent<AudioSource>();
    
            // Pause Audio play on Awake 
            audioSource.playOnAwake = true;
            audioSource.Pause();
    
            // Set Audio Output to AudioSource 
            videoPlayer.audioOutputMode = VideoAudioOutputMode.AudioSource;
            videoPlayer.source = VideoSource.Url;
    
            // Assign the Audio from Video to AudioSource to be played 
            videoPlayer.EnableAudioTrack(0, true);
            videoPlayer.SetTargetAudioSource(0, audioSource);
    
            // Assign the video Url depending on the current scene 
            switch (SceneManager.GetActiveScene().name)
            {
                case "VideoScene1":
                    videoPlayer.url = video1endpoint;
                    break;
    
                case "VideoScene2":
                    videoPlayer.url = video2endpoint;
                    break;
    
                default:
                    break;
            }
    
            //Set video To Play then prepare Audio to prevent Buffering 
            videoPlayer.Prepare();
    
            while (!videoPlayer.isPrepared)
            {
                yield return null;
            }
    
            sphereMaterial.mainTexture = videoStreamRenderTexture;
    
            //Play Video 
            videoPlayer.Play();
    
            //Play Sound 
            audioSource.Play();
    
            while (videoPlayer.isPlaying)
            {
                yield return null;
            }
        }
    
  10. Последний метод, необходимый для этого класса, — это метод ChangeScene(), который будет использоваться для переключения между сценами.

        public void ChangeScene()
        {
            SceneManager.LoadScene(SceneManager.GetActiveScene().name == "VideoScene1" ? "VideoScene2" : "VideoScene1");
        }
    

    Совет

    Метод ChangeScene() использует удобный компонент C# под названием Условный оператор. Это позволяет проверять условия, а затем возвращать значения на основе результата проверка в рамках одной инструкции. Перейдите по этой ссылке, чтобы узнать больше об условном операторе.

  11. Сохраните изменения в Visual Studio перед возвращением в Unity.

  12. Вернитесь в редактор Unity, щелкните и перетащите класс VideoController [из]{.подчеркивания} в папку Scripts в объект Main Camera на панели иерархии .

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

  14. Перетащите объект InsideOutSphere из панели иерархии в слот Sphere , как показано на рисунке ниже.

    Снимок экрана: меню иерархии. Выбрана основная камера.Снимок экрана: слот Sphere.

Глава 6. Создание класса Gaze

Этот класс отвечает за создание raycast , который будет проецироваться вперед с основной камеры, чтобы определить, какой объект смотрит пользователь. В этом случае raycast должен определить, смотрит ли пользователь на объект GazeButton в сцене, и активировать поведение.

Чтобы создать этот класс, выполните указанные ниже действия.

  1. Перейдите в папку Скрипты, созданную ранее.

  2. Щелкните правой кнопкой мыши на панели проекта, создайтескрипт C#. Присвойте скрипту имя Gaze.

  3. Дважды щелкните новый скрипт Взгляда , чтобы открыть его в Visual Studio 2017.

  4. Убедитесь, что следующее пространство имен находится в верхней части скрипта, и удалите все остальные:

    using UnityEngine;
    
  5. Затем добавьте следующие переменные в класс Gaze :

        /// <summary> 
        /// Provides Singleton-like behaviour to this class. 
        /// </summary> 
        public static Gaze instance;
    
        /// <summary> 
        /// Provides a reference to the object the user is currently looking at. 
        /// </summary> 
        public GameObject FocusedGameObject { get; private set; }
    
        /// <summary> 
        /// Provides a reference to compare whether the user is still looking at 
        /// the same object (and has not looked away). 
        /// </summary> 
        private GameObject oldFocusedObject = null;
    
        /// <summary> 
        /// Max Ray Distance 
        /// </summary> 
        float gazeMaxDistance = 300;
    
        /// <summary> 
        /// Provides whether an object has been successfully hit by the raycast. 
        /// </summary> 
        public bool Hit { get; private set; }
    
  6. Теперь необходимо добавить код для методов Awake() и Start().

        private void Awake()
        {
            // Set this class to behave similar to singleton 
            instance = this;
        }
    
        void Start()
        {
            FocusedGameObject = null;
        }
    
  7. Добавьте следующий код в метод Update() для проецирования Raycast и обнаружения целевого попадания:

        void Update()
        {
            // Set the old focused gameobject. 
            oldFocusedObject = FocusedGameObject;
            RaycastHit hitInfo;
    
            // Initialise Raycasting. 
            Hit = Physics.Raycast(Camera.main.transform.position, Camera.main.transform.forward, out hitInfo, gazeMaxDistance);
    
            // Check whether raycast has hit. 
            if (Hit == true)
            {
                // Check whether the hit has a collider. 
                if (hitInfo.collider != null)
                {
                    // Set the focused object with what the user just looked at. 
                    FocusedGameObject = hitInfo.collider.gameObject;
                }
                else
                {
                    // Object looked on is not valid, set focused gameobject to null. 
                    FocusedGameObject = null;
                }
            }
            else
            {
                // No object looked upon, set focused gameobject to null.
                FocusedGameObject = null;
            }
    
            // Check whether the previous focused object is this same 
            // object (so to stop spamming of function). 
            if (FocusedGameObject != oldFocusedObject)
            {
                // Compare whether the new Focused Object has the desired tag we set previously. 
                if (FocusedGameObject.CompareTag("GazeButton"))
                {
                    FocusedGameObject.SetActive(false);
                    VideoController.instance.ChangeScene();
                }
            }
        }
    
  8. Сохраните изменения в Visual Studio перед возвращением в Unity.

  9. Щелкните и перетащите класс Gaze из папки Scripts в объект Main Camera на панели иерархии .

Глава 7. Настройка двух сцен Unity

Цель этой главы — настроить две сцены, каждая из которых содержит видео для потоковой передачи. Вы будете дублировать уже созданную сцену, чтобы ее не нужно было снова настраивать, хотя затем вы измените новую сцену, чтобы объект GazeButton был в другом расположении и имеет другой внешний вид. Здесь показано, как меняться между сценами.

  1. Для этого перейдите в файл > Сохранить сцену как.... Появится окно сохранения. Нажмите кнопку Создать папку .

    Глава 7. Настройка двух сцен Unity

  2. Назовите папку Scenes.

  3. Окно Сохранить сцену будет по-прежнему открыто. Откройте только что созданную папку Scenes .

  4. В текстовом поле Имя файла: введите VideoScene1 и нажмите кнопку Сохранить.

  5. Вернитесь в Unity, откройте папку Scenes и щелкните левой кнопкой мыши файл VideoScene1 . Используйте клавиатуру и нажмите клавиши CTRL+D , чтобы дублировать эту сцену

    Совет

    Команду Дублировать также можно выполнить, перейдя в меню Изменить > дубликат.

  6. Unity автоматически увеличивает номер имен сцен, но проверка его в любом случае, чтобы убедиться, что он соответствует ранее вставленному коду.

    У вас должны быть VideoScene1 и VideoScene2.

  7. В двух сценах перейдите в раздел Параметры сборки файлов>. Открыв окно Параметры сборки , перетащите сцены в раздел Сцены в сборке .

    Снимок экрана: окно параметров сборки.

    Совет

    Вы можете выбрать обе сцены в папке Scenes , удерживая нажатой клавишу CTRL , а затем щелкнув каждую сцену левой кнопкой мыши и перетащить обе сцены.

  8. Закройте окно Параметры сборки и дважды щелкните VideoScene2.

  9. Открыв вторую сцену, щелкните дочерний объект GazeButtonобъекта InsideOutSphere и задайте преобразование следующим образом:

Преобразование — положение

X да Z
0 1.3 3,6

Преобразование — поворот

X да Z
0 0 0

Преобразование — масштабирование

X да Z
1 1 1
  1. Выбрав дочерний элемент GazeButton , просмотрите инспектор и фильтр сетки. Щелкните маленький целевой объект рядом с полем ссылки на сетку :

    Снимок экрана инспектора для кнопки взгляда.

  2. Откроется всплывающее окно Выбор сетки . Дважды щелкните сетку кубов в списке Активы.

    Снимок экрана: всплывающее окно

  3. Фильтр сетки обновится и теперь будет кубом. Теперь щелкните значок Шестеренки рядом с полем Sphere Collider и нажмите кнопку Удалить компонент, чтобы удалить коллайдер из этого объекта.

    Снимок экрана: меню

  4. Выбрав элемент GazeButton , нажмите кнопку Добавить компонент в нижней части инспектора. В поле поиска введите box, и box Collider будет параметром . Щелкните его, чтобы добавить Box Collider в объект GazeButton .

    Снимок экрана: поле поиска

  5. GazeButton теперь частично обновлен, чтобы выглядеть по-другому, однако теперь вы создадите новый материал, чтобы он выглядел совершенно иначе и его легче распознать как другой объект, чем объект в первой сцене.

  6. Перейдите в папку Материалы на панели проекта. Дублируйте элемент ButtonMaterial Material (нажмите клавиши CTRL + D на клавиатуре или щелкните элемент Материал левой кнопкой мыши, а затем в меню Изменить файл выберите Дублировать).

    Снимок экрана: папка Снимок экрана: меню редактирования с выбранным дубликатом.

  7. Выберите новый материал ButtonMaterial (здесь называется ButtonMaterial 1) и в инспекторе щелкните окно цвета Albedo . Появится всплывающее окно, в котором можно выбрать другой цвет (выбрать любой из них), а затем закрыть всплывающее окно. Материал будет его собственным экземпляром и отличаться от исходного.

    Снимок экрана: всплывающее окно выбора цвета.

  8. Перетащите новый объект Material на дочерний элемент GazeButton , чтобы полностью обновить его внешний вид, чтобы его можно было легко отличить от первой кнопки сцен.

    Снимок экрана: вкладка сцены редактора проекта.

  9. На этом этапе можно протестировать проект в редакторе перед сборкой проекта UWP.

    • Нажмите кнопку Воспроизвести в редакторе и наденьте гарнитуру.

      Снимок экрана: кнопки воспроизведения, приостановки и пропуска. Кнопка воспроизведения выделена.

  10. Просмотрите два объекта GazeButton для переключения между первым и вторым видео.

Глава 8. Создание решения UWP

Убедившись, что в редакторе нет ошибок, можно приступать к сборке.

Для сборки:

  1. Сохраните текущую сцену, щелкнув Сохранить файл>.

  2. Установите флажок Проекты Unity C# (это важно, так как оно позволит изменять классы после завершения сборки).

  3. Перейдите в раздел Параметры сборки файла >и щелкните Сборка.

  4. Вам будет предложено выбрать папку, в которой вы хотите создать решение.

  5. Создайте папку BUILDS и создайте в ней другую папку с нужным именем.

  6. Щелкните новую папку и щелкните Выбрать папку, чтобы выбрать ее, чтобы начать сборку в этом расположении.

    Снимок экрана: выделенная папка BUILDS.Снимок экрана: выделенная папка сборки потоковой передачи видео.

  7. После завершения сборки Unity (это может занять некоторое время), откроется окно проводник в расположении сборки.

Глава 9. Развертывание на локальном компьютере

После завершения сборки в расположении сборки появится окно проводник. Откройте папку, которую вы назвали и создали, а затем дважды щелкните файл решения (SLN) в этой папке, чтобы открыть решение в Visual Studio 2017.

Остается только развернуть приложение на компьютере (или локальном компьютере).

Чтобы выполнить развертывание на локальном компьютере, выполните приведенные далее действия.

  1. В Visual Studio 2017 откройте только что созданный файл решения.

  2. В окне Платформа решения выберите x86, Локальный компьютер.

  3. В разделе Конфигурация решения выберите Отладка.

    Снимок экрана: меню

  4. Теперь вам потребуется восстановить все пакеты в решении. Щелкните решение правой кнопкой мыши и выберите команду Восстановить пакеты NuGet для решения...

    Примечание

    Это делается потому, что пакеты, созданные Unity, должны быть ориентированы на работу с локальными компьютерами.

  5. Перейдите в меню Сборка и щелкните Развернуть решение , чтобы загрузить неопубликованное приложение на компьютер. Visual Studio сначала выполнит сборку, а затем развернет приложение.

  6. Ваше приложение должно появиться в списке установленных приложений, готовых к запуску.

    Снимок экрана: список установленных приложений.

При запуске приложения Смешанная реальность вы будете находиться в модели InsideOutSphere, которая использовалась в приложении. Эта сфера будет местом потоковой передачи видео, обеспечивая 360-градусный просмотр входящего видео (которое было снято для такого рода перспективы). Не удивляйтесь, если загрузка видео занимает несколько секунд, ваше приложение зависит от вашей доступной скорости Интернета, так как видео необходимо получить, а затем скачать, чтобы выполнить потоковую передачу в приложение. Когда вы будете готовы, измените сцены и откройте свой второй видео, глядя на красный шар! Тогда не стесняйтесь вернуться назад, используя синий куб во второй сцене!

Готовое приложение Службы мультимедиа Azure

Поздравляем! Вы создали приложение смешанной реальности, которое использует Службу мультимедиа Azure для потоковой передачи 360 видео.

Снимок экрана: пример приложения смешанной реальности.

Снимок экрана: пример приложения смешанной реальности.

Бонусные упражнения

Упражнение 1.

В этом руководстве можно использовать только одну сцену для изменения видео. Поэкспериментируйте с приложением и сделайте его одной сценой! Возможно, даже добавить еще одно видео в микс.

Упражнение 2

Поэкспериментируйте с Azure и Unity и попытайтесь реализовать возможность автоматического выбора приложения видео с другим размером файла в зависимости от надежности подключения к Интернету.