Amazon IVS: как быстро добавить видеотрансляции в приложение или на сайт
Video live streaming — это технология потоковой трансляции видео тысячам и миллионам зрителей в режиме близком к реальному времени. Видеостриминг находит своё применение в различных областях:
фитнес и образование;
онлайн события: презентации, конференции, семинары;
электронная коммерция;
музыкальные концерты;
игры и киберспорт.
В этой статье мы рассмотрим, как можно легко интегрировать видеотрансляции в приложение или на сайт, используя Amazon Interactive Video Service.
Что такое AWS Interactive Video Service?
AWS Interactive Video Service — это решение для прямых трансляций, которое быстро интегрируется в мобильные и веб-приложения.
В рамках своего сервиса Amazon предлагает:
быстрое создание новых трансляций в течении пары минут;
низкая (менее 3 секунд) задержка доставки видеопотока для зрителей;
простая интеграция с мобильными приложениями и веб-сайтами через SDK для трансляции и проигрывания видео;
масштабирование до десятков тысяч одновременных зрителей;
сохранение трансляции для просмотра в записи.
Ещё одна интересная возможность — это встраивание в трансляцию метаданных с гарантией их получения всеми зрителями. Метаданные будут синхронизированы с видео- и аудиопотоками. С помощью этой функциональности можно добавлять интерактивное взаимодействие со зрителями:
обновлять статистику в видеоигре;
показывать зрителю опросник и давать возможность выбрать ответ во время вебинара;
предоставлять информацию о продукте и давать возможность купить демонстрируемый товар во время трансляций в e-commerce приложениях.
Amazon предоставляет SDK для iOS, Android и Web для интеграции вещания и проигрывания видео. Также на сайте AWS можно найти SDK для работы с IVS более чем на 10 языках программирования, включая Java, Python и Go.
Чтобы понять как работать с AWS IVS, давайте реализуем пример, состоящий из трёх компонент:
стриминг видео из браузера;
проигрывание видео в браузере;
управление каналами и отправка метаданных зрителям на бэкенде.
Отправка видео- и аудиопотоков
Начнём с создания минималистичной веб-страницы, на которой мы организуем вещание видеотрансляции.
Создадим html страницу и включим туда ссылку на broadcast SDK:
Далее нужно добавить canvas для отображения видео, которое мы будем транслировать:
Добавим также на страницу input элементы для ingest endpoint и stream key:
Ingest endpoint — это url сервера Amazon, куда будут отправляться видео- и аудиопотоки. Stream Key — текстовый ключ, который уникально идентифицирует канал вещания. Они предоставляются Amazon после создания канала.
Ну и ещё нам понадобятся 2 кнопки для запуска и остановки трансляции:
Как вы видите, на событиях onclick вызываются функции startBroadcast() и stopBroadcast(). Про них поговорим чуть позже.
С веб-страницей мы закончили, поэтому теперь перейдем к javascript коду.
Первым делом нам надо создать broadcast client:
const streamConfig = IVSBroadcastClient.BASIC_LANDSCAPE;
const client = IVSBroadcastClient.create({
streamConfig: streamConfig,
});
SDK предлагает несколько предопределенных конфигураций, которыми можно воспользоваться. Полный список можно посмотреть в документации к библиотеке. Давайте для примера возьмём IVSBroadcastClient.BASIC_LANDSCAPE.
Чтобы отобразить на странице видео, которое мы будем захватывать с помощью камеры, привяжем созданный клиент к элементу preview:
const previewEl = document.getElementById('preview');
client.attachPreview(previewEl);
Чтобы получить список устройств, с которых мы можем производить захват видео и аудио, сделаем navigator.mediaDevices.enumerateDevices():
const devices = await navigator.mediaDevices.enumerateDevices();
const videoDevices = devices.filter((d) => d.kind === 'videoinput');
const audioDevices = devices.filter((d) => d.kind === 'audioinput');
Теперь нужно получить поток одного из доступных видео устройств и зарегистрировать его в broadcast client:
const cameraStream = await navigator.mediaDevices.getUserMedia({
video: {
deviceId: videoDevices[0].deviceId,
width: {
ideal: streamConfig.maxResolution.width,
max: streamConfig.maxResolution.width,
},
height: {
ideal: streamConfig.maxResolution.height,
max: streamConfig.maxResolution.height,
},
},
});
client.addVideoInputDevice(cameraStream, 'camera1', {index: 0});
То же самое нужно сделать и для аудиопотока:
const microphoneStream = await navigator.mediaDevices.getUserMedia({
audio: {deviceId: audioDevices[0].deviceId},
});
client.addAudioInputDevice(microphoneStream, 'mic1');
На этом мы закончили с конфигурацией клиента. Если открыть получившуюся html страницу, то браузер запросит разрешение на использование видеокамеры и микрофона. После полученных разрешений на странице появится изображение с камеры.
Всё почти готово к отправке медиапотоков на сервера AWS и началу трансляции. Осталось несколько штрихов.
Во-первых, напишем обработчика для кнопки Start Broadcast:
async function startBroadcast() {
const streamKeyEl = document.getElementById("stream-key");
const endpointEl = document.getElementById("ingest-endpoint");
const start = document.getElementById("start");
try {
start.disabled = true;
await window.client.startBroadcast(streamKeyEl.value, endpointEl.value);
} catch (err) {
start.disabled = false;
setError(err.toString());
}
}
Тут мы получаем ingest endpoint и stream key из input элементов на странице и вызываем метод startBroadcast() у клиента.
Во-вторых, сделаем остановку вещания через метод stopBroadcast:
async function stopBroadcast() {
const start = document.getElementById("start");
start.disabled = false;
try {
await window.client.stopBroadcast();
} catch (err) {
setError(err.toString());
}
}
Итак, для вещания трансляции всё готово.
Проигрывание видеопотока
Перейдем к интеграции веб-плеера для проигрывания трансляции зрителям. Также, как и в примере с вещанием, создадим простую веб-страницу.
Включим ссылку на Amazon IVS Player на нашу страницу:
