Основные настройки
Tuesday, March 31, 2020 5:24 AMTeleport - это платформа распределенной доставки потокового видео.
Использование платформы позволяет значительно снизить нагрузку на ваш медиасервер при трансляции вид еоконтента и повысить качество трансляции. Это происходит благодаря автоматической организации пиринговой сети из браузеров, которые транслируют одинаковое видео и обмениваются частями этого контента между ними.
Table of Contents
Принцип работы
Teleport состоит из cервера и SDK. Решение позволяет подключать браузеры пользователей к пиринговой сети с помощью WebRTC и переключать источник получения каждого куска контента для каждого узла с медиасервера на пиринговую сеть и обратно. Teleport поддерживает только адаптивные транспортные протоколы видео, основанные на HTTP, такие как HLS и DASH.
Для использования Teleport SDK можно воспользоваться одним из готовых плагинов. Плагины берут на себя всю работу по инициализации скрипта и его интеграции с определенный медиаплеером.
При инициализации Teleport SDK устанавливает соединение c трекер-сервером. Он используется для координирования соединений пиров. Общение с трекер-сервером происходит по протоколу Websocket с использованием шифрованного соединения. После подключения к трекер-серверу пир получает сообщение с уникальными идентификаторами пиров для установки соединения с ними. После установки соединений пиры обмениваются сообщениями и самостоятельно принимают решение об обмене сегментами.
Хранение полученных данных на устройствах пользователей организовано в памяти таким образом, что каждый кусок видео независимо от источника получения (пиринговая сеть или сервер) хранится на устройстве, заданное через параметр TTL время (по умолчанию TTL=180 сек). По истечении этого времени кусок удаляется с устройства. Передача данных в пиринговой сети через WebRTC-канал происходит с разбивкой передаваемых данных на куски размером 16КБ, их обратной сборкой на принимающей стороне и проверкой целостности (хеш-сумма от содержимого).
Teleport совместим с любыми CAS/DRM системами, но требует дополнительной интеграции с ними.
Список готовых плагинов для интеграции с медиаплеером
Список плагинов будет пополняться.
Интеграция
Регистрация домена в Teleport PDN
Последовательность действий:
- Необходимо зарегистрироваться на cabinet.teleport.media.
- В разделе "Интеграция" пройти процедуру валидации домена любым удобным из указанных способов.
- После подтверждения домена, во вкладке "My domains" вы получите API ключи для работы скрипта.
- Теперь вы можете начать подключение Teleport с помощью дальнейших инструкций.
Интеграция Teleport SDK
Подключение
Существует несколько вариантов подключения библиотеки Teleport:
- Подключение основного скрипта Teleport и лоадер для используемого плеера, например:
<script src="https://cdn.teleport.media/stable/teleport.js"></script>
<script src="https://cdn.teleport.media/stable/teleport.hlsjs.js"></script>
- Подключение основного скрипта Teleport, лоадер для используемого плеера и скрипт с полифилами для поддержки старых браузеров, например:
<script src="https://cdn.teleport.media/stable/teleport.polyfill.js"></script>
<script src="https://cdn.teleport.media/stable/teleport.js"></script>
<script src="https://cdn.teleport.media/stable/teleport.hlsjs.js"></script>
- Подключения бандла, который включает в себя основной скрипт, лоадер и полифил:
<script src="https://cdn.teleport.media/stable/teleport.hlsjs.bundle.js"></script>
Наименование бандлов происходит по следующей форме к имени скрипта в ссылке лоадера добавляется суффикс bundle
.
Для приведённых выше вариантов подключения важен порядок подключения на странице.
Список всех существующих бандлов:
-
https://cdn.teleport.media/stable/teleport.shaka.bundle.js
-
https://cdn.teleport.media/stable/teleport.clappr-hls.bundle.js
-
https://cdn.teleport.media/stable/teleport.clappr-dash.bundle.js
-
https://cdn.teleport.media/stable/teleport.hlsjs.bundle.js
-
https://cdn.teleport.media/stable/teleport.videojs-hls.bundle.js
-
https://cdn.teleport.media/stable/teleport.uppod.bundle.js
-
https://cdn.teleport.media/stable/teleport.dashjs.bundle.js
Подключив библиотеку Teleport, необходимо инициализировать её. Варианты инициализации могут отличаться в зависимости от используемого плеера. Подробнее смотрите документацию по каждому плееру в отдельности.
Пример инициализации для Shaka Player
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TELEPORT SHAKA EXAMPLE</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/shaka-player/2.2.5/shaka-player.compiled.debug.js"></script>
</head>
<body>
<video id="video"
width="640"
muted
poster="//shaka-player-demo.appspot.com/assets/poster.jpg"
controls autoplay></video>
<!--Подключение основного SDK-->
<script src="https://cdn.teleport.media/stable/teleport.js"></script>
<!--Подключение плагина для Shaka Player-->
<script src="https://cdn.teleport.media/stable/teleport.shaka.js"></script>
<!--Скрипт инициализации-->
<script>
var tlprt;
var STREAM_URL = "<URL видео-манифеста>";
var API_KEY = "<APIKEY полученных из кабинета>"
function initApp() {
shaka.polyfill.installAll();
var video = document.getElementById("video");
var player = new shaka.Player(video);
player.addEventListener("error", onErrorEvent);
// инициализируем экземпляр Teleport
teleport.initialize({
apiKey: API_KEY,
loader: { // параметры интеграции с плеером
type: "shaka", // идентификатор плагина
params: {
player: player // экземпляр плеера
}
}
})
.then(function (instance) {
// запускаем плеер и сохраняем экземпляр teleport
tlprt = instance;
return player.load(manifestUri);
})
.then(function (instance) {
tlprt = instance;
// This runs if the asynchronous load is successful.
console.log('The video has now been loaded!');
// подписываемся за событие закрытия страницы, чтобы корректно освободить ресурсы
window.addEventListener("unload", function () {
if (tlprt) {
tlprt.dispose();
tlprt = null;
}
});
})
.catch(onError);
}
function onErrorEvent(event) {
// Extract the shaka.util.Error object from the event.
onError(event.detail);
}
function onError(error) {
// Log the error.
console.error("Error code", error.code, "object", error);
}
document.addEventListener("DOMContentLoaded", initApp);
</script>
</body>
</html>