Настройка Unreal Engine Pixel Streaming: передача проекта в браузер

Чему вы научитесь в этом руководстве?

Unreal Engine Pixel Streaming передаёт изображение и звук приложения на удалённое устройство, а также позволяет получать с него ввод. Благодаря этому проект Unreal Engine можно показать на веб-странице, а пользователи компьютеров и мобильных устройств смогут взаимодействовать с приложением с помощью клавиатуры, мыши или сенсорного ввода. Устанавливать дополнительное ПО в браузере не требуется.

В руководстве описаны подготовка проекта к трансляции, запуск серверных компонентов и подключение через браузер из той же локальной сети. В начальном руководстве Epic Games приведён пример для Windows; также указано, что в Linux и Mac серверные скрипты находятся в другой папке.

Требования и подготовка

Плагин Pixel Streaming поддерживает кодирование видео на компьютерах с Windows, Linux или Mac при наличии определённого совместимого оборудования GPU. В исходном руководстве за подробностями о совместимом оборудовании предлагается обратиться к документу Pixel Streaming Reference. Поскольку конкретные модели GPU здесь не перечислены, совместимость следует проверить отдельно перед началом трансляции.

Для начальной настройки в локальной сети порты 80 и 8888 должны быть открыты для связи. Если на компьютере работают другие веб-серверы, руководство рекомендует остановить их перед настройкой. Для подключения через интернет или между разными сетями может потребоваться дополнительная настройка сети. Для первого теста проще всего использовать тот же компьютер и адрес localhost или 127.0.0.1.

В руководстве не упоминаются требования к учётной записи. Серверная инфраструктура доступна в репозитории Pixel Streaming Infrastructure на GitHub от Epic Games. Проект следует запускать как упакованное приложение или выбрать Standalone Game в Unreal Editor; использование плагина описано для этих двух способов запуска.

Настройка: подготовка проекта и серверов

1. Откройте проект в Unreal Editor. В главном меню перейдите в Edit > Plugins, найдите категорию Graphics, включите плагин Pixel Streaming или Pixel Streaming 2 и перезапустите проект. Если в проекте есть персонаж и требуется сенсорное управление на мобильных устройствах, можно включить параметр Always Show Touch Interface в категории Engine > Input раздела Edit > Project Settings. Это необязательная настройка; компонент Player Controller персонажа также должен поддерживать сенсорный ввод.

2. Укажите параметр запуска проекта. Откройте Edit > Editor Preferences..., перейдите в категорию Level Editor > Play и добавьте адрес локального подключения в поле Additional Launch Parameters:

-PixelStreamingURL=ws://127.0.0.1:8888

Этот параметр указывает адрес сервера Pixel Streaming, к которому будет подключаться приложение. Если вы собираете проект для Windows, в меню Unreal Editor выберите Files > Package Project > Windows (64-bit) и укажите папку вывода. При каждом запуске приложение должно получать тот же параметр. В руководстве также описан вариант добавления параметра в поле Target ярлыка запуска.

1. Получите серверные компоненты Pixel Streaming. Согласно руководству, инфраструктуру можно скачать непосредственно из репозитория GitHub или выполнить в предпочитаемом терминале следующую команду. Вместо UEX.Y укажите нужную ветку; в документации приведён пример 5.7.

git clone --branch UEX.Y https://github.com/EpicGamesExt/PixelStreamingInfrastructure.git

В качестве альтернативы откройте папку \Engine\Plugins\Media\PixelStreaming\Resources\WebServers в установке Unreal Engine и запустите скрипт get_ps_servers с расширением .bat в Windows или .sh в Linux и Mac. Скрипт загрузит в папку соответствующую ветку инфраструктуры.

1. В примере для Windows запустите скрипт установки в папке SignallingWebServer загруженной инфраструктуры из PowerShell, открытого от имени администратора:

SignallingWebServer\platform_scripts\cmd\setup.bat

После завершения установки запустите скрипт старта сервера в той же структуре папок:

SignallingWebServer\platform_scripts\cmd\start_with_stun.bat

Для Linux и Mac руководство рекомендует использовать скрипты из папки SignallingWebServer\platform_scripts\bash. Когда сервер будет готов, в консоли должны появиться сообщения о прослушивании подключений транслятора на порту 8888, подключений игроков на порту 80 и HTTP-сервиса.

Запуск приложения и подключение через браузер

Когда серверы запущены, откройте упакованное приложение, указав параметр адреса подключения Pixel Streaming. Пример команды:

MyPixelStreamingApplication.exe -PixelStreamingURL=ws://127.0.0.1:8888

MyPixelStreamingApplication.exe — пример имени файла; укажите имя своего упакованного приложения. Когда приложение подключится к серверу, в его консоли должно появиться сообщение Streamer connected.

Откройте поддерживаемый браузер на том же компьютере и перейдите по адресу http://127.0.0.1. В руководстве Epic в качестве подходящих вариантов упоминаются Google Chrome и Mozilla Firefox. Нажмите на страницу, а затем — кнопку воспроизведения, чтобы запустить поток. Страница игрока по умолчанию передаёт в приложение Unreal Engine ввод с клавиатуры, мыши и сенсорного экрана.

Чтобы подключиться с другого компьютера или мобильного устройства в той же локальной сети, введите в браузере IP-адрес компьютера, который ведёт трансляцию. При таком подключении все устройства видят одну и ту же сцену одного экземпляра Unreal Engine; в настройках по умолчанию ввод с устройств также направляется в одно приложение. Для подключения через интернет или из других подсетей может понадобиться более сложная настройка сети. В исходном руководстве для таких подключений упоминаются настройки STUN/TURN-сервера.

Типичные проблемы и место в архитектурном рабочем процессе

Если подключение не удаётся установить, сначала проверьте, что серверные компоненты запущены, приложение открыто с правильным параметром PixelStreamingURL, а порты 80 и 8888 доступны. Начальной настройке также может помешать работа другого веб-сервера на том же компьютере. Если при сворачивании окна приложения поток ввода прерывается, руководство предлагает использовать параметр -RenderOffScreen, позволяющий запускать приложение без видимого окна.

В рабочих процессах архитектуры, интерьеров и archviz такая настройка может пригодиться командам, которым нужно показывать одну и ту же сцену на нескольких компьютерах или мобильных устройствах и проводить интерактивные презентации через браузер. Рендер выполняется на основном компьютере, где запущено приложение; подключённые устройства получают одно и то же изображение. Поэтому важны совместимость GPU основного компьютера и конфигурация сети. Согласно руководству, можно настраивать такие параметры, как разрешение, размер экрана, IP-адреса и порты. В источниках не разъясняются условия лицензирования и стоимость продукта, а также его совместимость с конкретным ПО для archviz.

Следующие шаги

После запуска базовой трансляции веб-страницу игрока можно адаптировать под проект. Также можно проверять пользователей, которым разрешена отправка ввода, или добавлять на страницу элементы интерфейса HTML5. Epic предлагает руководство по оптимизации потока, в котором рассматриваются настройки баланса между качеством, задержкой и надёжностью подключения. Для таких задач, как использование нескольких серверов, разных клиентов или предоставление доступа через интернет, можно изучить Hosting and Networking Guide.

Если вы вносите изменения в файлы инфраструктуры, руководство рекомендует редактировать исходную папку установки, а не её копию в папке сборки. Изменения в файлах папки сборки могут быть перезаписаны при следующей упаковке. После первоначальной настройки в локальной сети, прежде чем переходить к более сложным сценариям подключения, следует проверить требования проекта и параметры используемой сети.

Источник и лицензия

Это руководство адаптировано на турецкий язык на основе документации Epic Games по Unreal Engine Pixel Streaming и начального руководства по Pixel Streaming. Оба источника предоставлены по свободной лицензии.