Внедрение HLS плеера для WebRTC потоков
WebRTC потоки конвертируются на стороне сервера в HLS и проигрываются в обычном HLS плеере
Для быстрой установки и настройки сервера воспользуйтесь этой инструкцией. Кроме этого, для тестирования вы можете подключиться к нашему демо-серверу demo.flashphoner.com.
Пошаговая инструкция по внедрению воспроизведения WebRTC потоков через HLS
Для внедрения воспроизведения WebRTC потоков через HLS на свою web страницу можно воспользоваться одним из двух предложенных ниже вариантов.
Вариант 1. Использование плеера Video.js
Необходимые для дальнейшей работы скрипты можно скачать с официального сайта проекта Video.js или с нашего демо-сервера по ссылками ниже:
Для внедрения HLS плеера на свою web-страницу, создадим два пустых файла hls-player-min.html и hls-player-min.js. Эти файлы будут содержать минимальный код для работы нашего плеера.
Разберем содержимое файлов
hls-player-min.html
Разместим в hls-player-min.html необходимые элементы:
1. Подключаем скрипты плеера Video.js
<link rel="stylesheet" href="video-js.css"> <script src="video.js"></script> <script src="videojs-hls.min.js"></script>
2. Подключаем скрипты основного API
<script type="text/javascript" src="https://flashphoner.com/downloads/builds/flashphoner_client/wcs_api-2.0/current/flashphoner.js"></script>
3. Подключаем скрипт нашего минимального плеера
<script type="text/javascript" src="hls-player-min.js"></script>
4. Инициализируем API на загрузку страницы
<body onload="initPage()">
5. Добавляем HTML элемент «Video»
<video id="remoteVideo" width="320" height="240" class="video-js vjs-default-skin"
controls="controls"
type="application/vnd.apple.mpegurl">
</video>
6. Добавляем кнопку «Play», нажатие по которой будет начинать воспроизведение видеопотока
<button id="applyBtn" type="button">Play</button>
В результате получаем вот такой плеер
Полный код HTML — страницы выглядит так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="video-js.css">
<script src="video.js"></script>
<script src="videojs-hls.min.js"></script>
<script type="text/javascript" src="https://flashphoner.com/downloads/builds/flashphoner_client/wcs_api-2.0/current/flashphoner.js"></script>
<script type="text/javascript" src="hls-player-min.js"></script>
</head>
<body onload="initPage()">
<video id="remoteVideo" width="320" height="240" class="video-js vjs-default-skin"
controls="controls"
type="application/vnd.apple.mpegurl">
</video>
<button id="applyBtn" type="button">Play</button>
</body>
</html>
hls-player-min.js
В этом файле будет всего одна функция в аргументах которой мы укажем
1. Путь для подключения к нашему WCS серверу. Для корректной работы укажите адрес своего WCS
var urlServer = "https://demo.flashphoner.com:8445";
2. Имя требуемого потока. Для корректной работы укажите имя своего WebRTC потока
var streamName = "stream1";
3. Затем функция формирует ссылку для проигрывания WebRTC потока по HLS и запускает воспроизведение в плеере
var applyFn = function() {
var streamName = "stream1";
streamName = encodeURIComponent(streamName);
var src = urlServer + "/" + streamName + "/" + streamName + ".m3u8";
player.src({
src: src,
type: "application/vnd.apple.mpegurl"
});
player.play();
};
Полный код JavaScript выглядит так:
function initPage() {
var urlServer = "https://demo.flashphoner.com:8445";
var player = videojs('remoteVideo');
var applyFn = function () {
var streamName = "stream1";
streamName = encodeURIComponent(streamName);
var src = urlServer + "/" + streamName + "/" + streamName + ".m3u8";
player.src({
src: src,
type: "application/vnd.apple.mpegurl"
});
player.play();
};
applyBtn.onclick = applyFn
}
В итоге получаем универсальный плеер, который может воспроизводить WebRTC видеопоток по HLS в браузерах на ПК и мобильных устройствах
Вариант 2. Нативный плеер для мобильных устройств
Для внедрения WebRTC HLS плеера для мобильных устройств на свою web-страницу, создадим два пустых файла hls-min.html и hls-min.js. Эти файлы будут содержать минимальный код для работы нашего плеера.
Разберем содержимое файлов
hls-min.html
Разместим в hls-min.html необходимые элементы:
- Подключаем скрипт нашего минимального плеера
<script type="text/javascript" src="hls-min.js"></script>
- Добавляем HTML элемент «Video» Мы указали ссылку на поток в свойствах элемента. Для корректной работы замените ссылку «https://demo.flashphoner.com:8445/stream1/stream1.m3u8» на свою
<video id="videoPlayer" width="600" height="400" src="https://demo.flashphoner.com:8445/stream1/stream1.m3u8" controls="controls" type="application/vnd.apple.mpegurl"> </video>
- Добавляем кнопку «Play», нажатие по которой будет начинать воспроизведение
<button onclick="play()">Play</button>
В результате получаем вот такой плеер
Полный код HTML — страницы выглядит так
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="hls-min.js"></script>
</head>
<body>
<video id="videoPlayer" width="600" height="400"
src="https://demo.flashphoner.com:8445/stream1/stream1.m3u8"
controls="controls"
type="application/vnd.apple.mpegurl">
</video>
<button onclick="play()">Play</button>
</body>
</html>
hls-min.js
В этом случае скрипт обрабатывает нажатие на кнопку «Play» и запускает в плеере воспроизведение WebRTC потока по HLS.
Разберем код скрипта
1. Объявление переменной «video»
var video;
2. При загрузке страницы вызываем функцию, которая обращается к плееру как HTML элементу
window.onload = function() {
video = document.getElementById("videoPlayer");
}
3. Затем описываем функцию, которая запускает воспроизведение видеопотока при нажатии кнопки «Play»
function play() {
video.play();
}
Полный код JavaScript выглядит так:
var video;
window.onload = function() {
video = document.getElementById("videoPlayer");
}
function play() {
video.play();
}
На скриншоте ниже вид нативного плеера на iOS с воспроизведением WebRTC потока по HLS
Загрузить Web Call Server 5
Системные требования: Linux x86_64, 1 core CPU, 2 Gb RAM, Java
Установка:
- wget https://flashphoner.com/download-wcs5.2-server.tar.gz
- Распаковать и установить с помощью скрипта 'install.sh'
- Запустить сервер с помощью команды 'service webcallserver start'
- Открыть веб-интерфейс https://host:8444 и активировать вашу лицензию
Если вы используете серверы Amazon EC2, то скачивать ничего не нужно.
