В нашей последней статье мы рассмотрели, как начать работу с прямым потоковым вещанием в облаке с помощью Amazon Interactive Video Service (Amazon IVS). Если вы еще не знакомы с созданием канала прямого вещания с помощью Amazon IVS, то вам стоит прочитать эту статью, прежде чем продолжить. Если только вы уже не знаете, как создать канал. В любом случае, давайте разберемся, как начать работу по созданию возможности воспроизведения живого потока.
В этом посте мы сосредоточимся на веб-воспроизведении для Amazon IVS. Если вы создаете мобильное приложение, есть SDK для Android и iOS, но в этом посте мы остановимся на веб-версии. Если вы застряли, добавьте в закладки «официальный» [docs for web playback], но мы рассмотрим весь процесс здесь, в этом посте. Готовы? Тогда давайте приступим!
Прежде чем мы начнем
Нам понадобится URL-адрес воспроизведения для нашего канала Amazon IVS. Есть несколько способов получить его, если у вас его еще нет под рукой. Первый способ — войти в консоль управления Amazon IVS Management Console и перейти на канал, для которого вы хотите создать опыт воспроизведения. На странице сведений о канале прокрутите вниз до панели конфигурации воспроизведения и скопируйте URL-адрес воспроизведения.
В этом посте я буду использовать один из наших тестовых потоков, поскольку это позволит мне продемонстрировать воспроизведение в реальном времени прямо здесь, в этом блоге. Когда вы создаете свой собственный опыт воспроизведения, используйте URL воспроизведения для создаваемого канала. URL, который я буду использовать для воспроизведения в этой статье, следующий:
https://3d26876b73d7.us-west-2.playback.live-video.net/api/video/v1/us-west-2.913157848533.channel.rkCBS9iD1eyd.m3u8
Если мы вставим этот URL (или ваш собственный URL для воспроизведения) в наш браузер и перейдем на него, наш браузер, вероятно, загрузит файл на наш рабочий стол. Мы, вероятно, должны сделать небольшой экскурс, чтобы объяснить, что это за файл!
ELI5: HLS
Если мы откроем файл .m3u8 в текстовом редакторе, он будет выглядеть примерно так (усечено для краткости):
#EXTM3U
#EXT-X-SESSION-DATA:DATA-ID="NODE",VALUE="video-edge-82bfe8.ord02"
#EXT-X-SESSION-DATA:DATA-ID="MANIFEST-NODE-TYPE",VALUE="weaver_cluster"
#EXT-X-SESSION-DATA:DATA-ID="MANIFEST-NODE",VALUE="video-weaver.ord02"
#EXT-X-SESSION-DATA:DATA-ID="SUPPRESS",VALUE="true"
#EXT-X-SESSION-DATA:DATA-ID="SERVER-TIME",VALUE="1659448883.23"
#EXT-X-SESSION-DATA:DATA-ID="TRANSCODESTACK",VALUE="2017TranscodeQS_V2"
#EXT-X-SESSION-DATA:DATA-ID="USER-IP",VALUE="[redcated]"
#EXT-X-SESSION-DATA:DATA-ID="SERVING-ID",VALUE="21f1214cd2604a4cb3b47701256d515a"
#EXT-X-SESSION-DATA:DATA-ID="CLUSTER",VALUE="ord02"
#EXT-X-SESSION-DATA:DATA-ID="ABS",VALUE="false"
#EXT-X-SESSION-DATA:DATA-ID="VIDEO-SESSION-ID",VALUE="5506365207855764860"
#EXT-X-SESSION-DATA:DATA-ID="BROADCAST-ID",VALUE="46909101677"
#EXT-X-SESSION-DATA:DATA-ID="STREAM-TIME",VALUE="81635.231166"
#EXT-X-SESSION-DATA:DATA-ID="FUTURE",VALUE="true"
#EXT-X-SESSION-DATA:DATA-ID="MANIFEST-CLUSTER",VALUE="ord02"
#EXT-X-SESSION-DATA:DATA-ID="ORIGIN",VALUE="cmh01"
...
Выглядит довольно странно, верно? Причина в том, что файл .m3u8 на самом деле является файлом списка воспроизведения (или «манифеста»). Amazon IVS использует протокол HTTP Live Streaming (HLS) для доставки ваших прямых потоков, и этот файл содержит всю информацию, необходимую плееру для поиска и воспроизведения вашего потока. Для стандартного канала Amazon IVS манифест HLS будет содержать расположение 5 различных версий потока:
- 1080p
- 720p
- 480p
- 360p
- 160p
Это позволяет плееру выбрать наилучший поток, основываясь на текущем состоянии сети зрителя (или, в зависимости от плеера, позволяет зрителю выбрать другое разрешение для экономии пропускной способности). Поскольку мы загрузили манифест, давайте попробуем открыть его с помощью видеоплеера на рабочем столе. Я открыл этот манифест с помощью VLC, и первое, что мне представляется, это список воспроизведения, который VLC определил через манифест.
Если мы выберем первый элемент в списке воспроизведения, VLC начнет воспроизведение живого потока.
Если мы просмотрим детали кодека в VLC (через CTRL+i или CMD+i), мы увидим, что выбранный нами поток имеет разрешение 1920x1080, так что это поток 1080p для этого канала.
Мы можем проверить разрешение с помощью того же процесса для всех остальных элементов в списке воспроизведения.
Обратите внимание, что расположение видеофайла, содержащееся в манифесте HLS, представляет собой только короткую часть прямого потока. В действительности плеер будет загружать и регулярно обновлять манифест с последними файлами в потоке. Это очень крутая система для передачи живого видео!
Использование проигрывателя Amazon IVS
Итак, теперь, когда мы поняли, что такое HLS и как он работает, давайте создадим веб-плеер и воспроизведем поток! В этом примере мы будем использовать «официальный» плеер Amazon IVS, но полезно знать, что существуют и другие варианты веб-проигрывателя (например, интеграции для Video.js и JW Player).
Сценарий проигрывателя Amazon IVS
Первым шагом здесь является включение сценария веб-плеера. Рекомендуемый способ включения этого скрипта — использовать Amazon IVS CDN. Мы будем использовать последнюю версию плеера на момент публикации этой статьи (версия 1.11.0).
<script src="https://player.live-video.net/1.11.0/amazon-ivs-player.min.js">
Вам не обязательно использовать CDN. Существуют варианты импорта SDK из NPM, но поскольку плеер использует WebAssembly, есть некоторые соображения, которые вы должны знать.
Разметка HTML
Плеер Amazon IVS работает напрямую с родным тегом HTML <video>, поэтому нам потребуется включить его. Мы можем использовать любые стандартные атрибуты для этого тега, как показано ниже.
<video id="video-player" controls autoplay playsinline />
Стилизация с помощью CSS
Поскольку мы используем родной тег <video>, мы можем стилизовать его с помощью CSS. Давайте сделаем так, чтобы наш демо-плеер заполнял все тело с помощью следующего CSS:
video {
height: 100%;
width: 100%;
left: 0;
top: 0;
position: fixed;
}
Инициализация плеера и запуск потока
Остается только создать экземпляр плеера, прикрепить его к нашему элементу HTML <video>, загрузить поток и воспроизвести его. Все эти задачи мы будем выполнять в функции init(), запускаемой при наступлении события DOMContentLoaded.
const init = () => {
if(!IVSPlayer.isPlayerSupported) {
alert('Your browser does not support the IVS video player. Please try a different browser.')
}
const videoEl = document.getElementById('video-player');
const streamUrl = 'https://3d26876b73d7.us-west-2.playback.live-video.net/api/video/v1/us-west-2.913157848533.channel.rkCBS9iD1eyd.m3u8';
const ivsPlayer = IVSPlayer.create();
ivsPlayer.attachHTMLVideoElement(videoEl);
ivsPlayer.load(streamUrl);
ivsPlayer.play();
}
document.addEventListener('DOMContentLoaded', init);
Воспроизведение в реальном времени!
Наш поток готов к воспроизведению!
Если ваш плеер не работает, посмотрите код в CodePen выше или оставьте комментарий ниже!
Резюме
В этом посте мы узнали о протоколе HTTP Live Streaming (HLS) и создали наш первый экземпляр плеера Amazon IVS для воспроизведения нашего прямого потока Amazon IVS. В следующем посте мы рассмотрим некоторые из различных методов и событий, которые открывает проигрыватель Amazon IVS, и то, как мы можем использовать их для улучшения пользовательского опыта. Если у вас есть вопросы, оставьте комментарий или свяжитесь со мной в Twitter.
Изображение Antonio Cansino с сайта Pixabay