В этом уроке мы будем использовать Stream Chat и клиентский SDK Dolby.io для создания приложения, которое позволяет вам создать комнату, которая транслирует содержимое вашего экрана и ваш голос для большого количества зрителей и позволяет им общаться друг с другом в чате. Это будет как можно проще, чтобы этот учебник был как можно короче, но его хватит, чтобы весело провести время с друзьями.
Эта анимация показывает, что iPhone обращается к каналу, созданному пользователем iPad, который играет в Minecraft. Пользователь iPhone может слышать голос стримера, видеть игровой процесс и общаться с другими наблюдателями через чат.
Если вы заблудились во время этого урока, вы можете проверить готовый проект в этом репозитории GitHub.
Хотите прочитать эту историю позже? Сохраните в Журнале.
Что такое потоковый чат?
Создавайте чат в реальном времени за меньшее время. Быстро отправляйте сообщения в приложении с помощью нашей высоконадежной инфраструктуры чата. Повышайте конверсию, вовлеченность и удержание пользователей в приложении с помощью API и SDK платформы обмена сообщениями Stream Chat.
Что такое клиентский SDK Dolby.io?
API-интерфейсы Dolby Interactivity предоставляют платформу для унифицированных коммуникаций и совместной работы. Связь в потоке означает комбинацию голоса, видео и обмена сообщениями, интегрированную в ваше приложение таким образом, чтобы это было согласовано для ваших конечных пользователей. Это контрастирует с общением вне приложения, когда пользователи должны прекратить использовать ваше приложение и вместо этого обратиться к сторонним инструментам.
Требования
Настроить проект
Создайте проект Xcode
Сначала мы открываем Xcode и создаем проект приложения для единого представления.
И не забудьте выбрать «UIKit» для пользовательского интерфейса.
Установить зависимости
Для установки зависимостей Stream Chat и Dolby.io Client SDK мы будем использовать CocoaPods. Если вы предпочитаете Carthage, оба фреймворка также его поддерживают.
В папке, в которой вы сохранили проект, запустите pod init и добавьте StreamChat, VoxeetSDK и VoxeetScreenShareKit в Podfile. Это должно выглядеть примерно так:
После этого запустите pod install, немного подождите, пока он завершится, и откройте проект через созданный .xcworkspace.
Настроить панель управления Stream Chat
Зарегистрируйтесь на GetStream.io, создайте приложение и обязательно выберите разработку вместо продакшена.
Чтобы упростить задачу, отключим проверки авторизации и разрешений. Обязательно нажмите "Сохранить". Когда ваше приложение находится в производстве, вы должны оставить их включенными.
Вы можете увидеть документацию по аутентификации здесь и разрешениям здесь.
Теперь сохраните свои учетные данные Stream, поскольку они понадобятся нам для работы чата в приложении. Поскольку мы отключили аутентификацию и разрешения, на данный момент нам действительно понадобится только ключ, но в производственной среде вы будете использовать секрет в своем бэкэнде для создания JWT, чтобы пользователи могли безопасно взаимодействовать с вашим приложением.
Как видите, я закрасил свои ключи. Убедитесь, что ваши учетные данные в безопасности.
Настройте приборную панель Dolby.io
Настроить дашборд Dolby.io проще. Просто создайте там учетную запись, и она уже должна создать для вас начальное приложение.
Теперь сохраните свои учетные данные, так как они понадобятся нам для обеспечения потоковой передачи аудио и видео в приложении. Как и учетные данные Stream, вы используете их для разработки. В производственной среде вам потребуется настроить правильную аутентификацию. Подробно это описано здесь.
Настроить Stream Chat и SDK Dolby
Первый шаг с кодом - настроить Stream и Dolby SDK с учетными данными из информационных панелей. Откройте файл AppDelegate.swift и измените его, чтобы он выглядел примерно так:
Этот код инициализирует SDK Dolby.io и Stream Chat с учетными данными, полученными на предыдущих двух шагах.
Создать экран присоединения
Приступим к созданию экрана «Присоединиться». Этот экран состоит из двух элементов: UITextField для определения имени канала и UIButton для присоединения или создания канала в зависимости от того, был ли он уже создан. Если вы создаете его, вы автоматически его администратор и можете поделиться кодом с другими пользователями, чтобы они могли присоединиться к нему в качестве наблюдателей. Это будет похоже на скриншот ниже.
Перейдите в раскадровку, выберите контроллер представления по умолчанию и щелкните Editor > Embed In > Navigation Controller. Это поместит его под контроллер навигации, который мы будем использовать для перехода к экрану канала.
Не забудьте переименовать ViewController в JoinViewController, чтобы потом не запутаться. Это легко сделать, щелкнув правой кнопкой мыши ViewController в ViewController.swift и выбрав refactor.
Чтобы упростить задачу, оставим раскадровку вот так и с этого момента будем использовать только код. Для настройки UITextField и UIButton нам понадобится следующий код в JoinViewController.swift:
Этот код устанавливает представления, ограничения и обработчики, которые нам нужны. Начнем с расширения JoinViewController, чтобы определить setupViews:
Этот код создаст UITextField, UIButton и добавит их в представление контроллера. Затем нам нужно определить ограничения между этими тремя. Давайте сделаем это, расширив JoinViewController, чтобы определить setupConstraints:
Этот код гарантирует, что channelTextField останется вверху и в центре экрана, а joinButton - прямо под ним. Теперь нам нужно настроить обработчик, когда пользователь нажимает кнопку. Давайте сделаем это еще раз, расширив контроллер до определения setupHandlers:
Этот код сделает так, что когда пользователь нажимает кнопку, создается WatchViewController со свойством .channelName, установленным на содержимое UITextField. На следующем шаге мы создадим WatchViewController.
Создайте экран часов
Теперь давайте создадим экран, на котором мы можем просматривать или передавать поток и общаться в чате. Начнем с определения WatchViewController. Это будет похоже на анимацию ниже.
Первый шаг - создать файл WatchViewController.swift и вставить приведенный ниже код.
Этот код просто определяет некоторые переменные, которые нам могут понадобиться часто, и вызывает некоторые функции, чтобы настроить все на viewDidLoad. Мы создадим их дальше. Он также обеспечивает выход из конференции после освобождения представления из памяти в deinit и скрывает строку состояния на viewDidAppear для целей презентации.
Кроме того, generateUserId() - это простая функция, которая генерирует случайный идентификатор для пользователя. Вы должны определить его в файле generateUserId.swift, как показано ниже.
Затем давайте определим функции для настройки просмотров, чата и трансляции. Сначала определите setupViews, как показано ниже.
Этот код просто добавляет представления видео и чата в иерархию представлений.
Затем давайте определим setupConstraints, чтобы указать макет, который должны принимать эти представления.
Этот код гарантирует, что вид видео находится поверх окна чата с соотношением высоты 1 к 3.
Затем давайте определим функцию setupChat.
Этот код просто указывает chatViewController представить канал с идентификатором, равным свойству channelName, и с типом livestream. Есть несколько типов каналов с разным поведением, и можно создать больше. О них можно прочитать здесь. Livestream лучше всего подходит для нашего случая использования.
Далее нам потребуются функции для настройки видео части.
Эти функции настроят сеанс конференции. Если конференция новая, будет представлен экран пользователя. В противном случае пользователь будет смотреть презентацию пользователя, создавшего канал.
Теперь нам нужно согласовать WatchViewController с VTConferenceDelegate протоколом.
Этот код отображает видеопоток при обнаружении демонстрации экрана и скрывает видео после завершения демонстрации экрана.
Включить общесистемный общий доступ к экрану
Если вы запустите приложение сейчас и создадите канал, когда вы поместите его в фоновый режим, видеопоток останется в приложении. Конечно, это нехорошо, потому что мы хотим транслировать игры и другие приложения. Чтобы исправить это, вам необходимо настроить группы приложений и расширение широковещательной загрузки. Этот процесс прост и хорошо описан в документации Dolby.io. Щелкните эту ссылку, чтобы перейти туда.
На момент написания этого руководства ReplayKit не работал с новым жизненным циклом UIScene, поэтому вам нужно вернуться к старому подходу AppDelegate.
Подведение итогов
Поздравляю! Вы создали основу для работающего приложения для потоковой передачи игр с помощью Stream Chat и Dolby.io. Я рекомендую вам просмотреть документацию Stream Chat, документацию Dolby и поэкспериментировать с проектом, который вы только что создали.
📝 Сохраните этот рассказ в Журнале.
👩💻 Просыпайтесь каждое воскресное утро и слышите самые интересные истории недели в области технологий, ожидающие в вашем почтовом ящике. Прочтите информационный бюллетень« Примечательные в технологиях ».
