Teleport - это платформа распределенной доставки потокового видео.

Использование платформы позволяет значительно снизить нагрузку на ваш медиасервер при трансляции вид еоконтента и повысить качество трансляции. Это происходит благодаря автоматической организации пиринговой сети из браузеров, которые транслируют одинаковое видео и обмениваются частями этого контента между ними.

Принцип работы

Teleport состоит из cервера и SDK. Решение позволяет подключать браузеры пользователей к пиринговой сети с помощью WebRTC и переключать источник получения каждого куска контента для каждого узла с медиасервера на пиринговую сеть и обратно. Teleport поддерживает только адаптивные транспортные протоколы видео, основанные на HTTP, такие как HLS и DASH.

Для использования Teleport SDK можно воспользоваться одним из готовых плагинов. Плагины берут на себя всю работу по инициализации скрипта и его интеграции с определенный медиаплеером.

При инициализации Teleport SDK устанавливает соединение c трекер-сервером. Он используется для координирования соединений пиров. Общение с трекер-сервером происходит по протоколу Websocket с использованием шифрованного соединения. После подключения к трекер-серверу пир получает сообщение с уникальными идентификаторами пиров для установки соединения с ними. После установки соединений пиры обмениваются сообщениями и самостоятельно принимают решение об обмене сегментами.

Хранение полученных данных на устройствах пользователей организовано в памяти таким образом, что каждый кусок видео независимо от источника получения (пиринговая сеть или сервер) хранится на устройстве, заданное через параметр TTL время (по умолчанию TTL=180 сек). По истечении этого времени кусок удаляется с устройства. Передача данных в пиринговой сети через WebRTC-канал происходит с разбивкой передаваемых данных на куски размером 16КБ, их обратной сборкой на принимающей стороне и проверкой целостности (хеш-сумма от содержимого).

Teleport совместим с любыми CAS/DRM системами, но требует дополнительной интеграции с ними.

Список готовых плагинов для интеграции с медиаплеером

Список плагинов будет пополняться.

Интеграция

Регистрация домена в Teleport PDN

Последовательность действий:

  1. Необходимо зарегистрироваться на cabinet.teleport.media.
  2. В разделе "Интеграция" пройти процедуру валидации домена любым удобным из указанных способов.
  3. После подтверждения домена, во вкладке "My domains" вы получите API ключи для работы скрипта.
  4. Теперь вы можете начать подключение Teleport с помощью дальнейших инструкций.

Интеграция Teleport SDK

Подключение

Существует несколько вариантов подключения библиотеки Teleport:

  1. Подключение основного скрипта Teleport и лоадер для используемого плеера, например:
<script src="https://cdn.teleport.media/stable/teleport.js"></script>
<script src="https://cdn.teleport.media/stable/teleport.hlsjs.js"></script>
  1. Подключение основного скрипта 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>
  1. Подключения бандла, который включает в себя основной скрипт, лоадер и полифил:
<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

Подключив библиотеку 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>