Requirements
- In order to use the Teleport P2P solution, you need a Teleport Account, and a verified domain of your streaming to get an API Key for its configuration.
- Teleport.js is compatible with Bitmovin Player Web SDK v8.2 and higher.
Installation
Include teleport.js strictly inside the section before the video-player initialization.
1<!DOCTYPE html>2<html lang="en">3<head>4 <!-- any code -->5 <script src="https://cdn.teleport.media/stable/teleport.bitmovin.bundle.js"></script>6 <script type="text/javascript" src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>7 <!-- any code -->8</head>9<body>10 <!-- any code -->11</body>12</html>
Configuration
For the configuration of the Bitmovin Player and Teleport.js you need
- the Bitmovin Player Key of your Bitmovin Player License, which you can find in your Bitmovin Dashboard, and
- the Teleport API Key which you can obtain your Teleport client area.
Bitmovin Player
The basic configuration of the Bitmovin Player would look like the following. The empty network object is necessary for the following steps where the Bitmovin Network API is used to integrate with the Teleport.js API.
1const playerConfig = {2 key: BITMOVIN_LICENSE_KEY,3 network: {}4};
Teleport.js
- Initialize Teleport by specifying
bitmovin
as the loader, and provide the reference to the 'playerConfig' network API as parameter. - Once Teleport is initialized, get the API loader
- Overwrite the
sendHttpRequest
method of the Bitmovin Network API with thesendHttpRequest
method of the API loader. - Initialize the Bitmovin Player with its
playerConfig
and provide its instance to Teleport using thesetPlayer
method.
1 let player;2 let container = document.getElementById('my-player');34 //Step 15 teleport.initialize({6 apiKey: TELEPORT_API_KEY,7 loader: {8 type: "bitmovin",9 params: { networkConfig: playerConfig.network },10 },11 }).then(function(instance) {12 //Step 213 var teleportBitmovinPlugin = instance.getLoader();1415 //Step 316 if (teleportBitmovinPlugin) {17 playerConfig.network.sendHttpRequest = teleportBitmovinPlugin.sendHttpRequest;18 }1920 //Step 421 player = new bitmovin.player.Player(container, playerConfig);22 teleportBitmovinPlugin.setPlayer(player);2324 player.load(source).then(25 function(player) {26 console.log('Successfully created Bitmovin Player instance');27 },28 function(reason) {29 console.log('Error while creating Bitmovin Player instance');30 },31 );32 });
That's it, you are ready to load a player source and start with your P2P based content playback!
Full example
1<!DOCTYPE html>2<html lang="en">3<head>4 <title>Bitmovin SDK + Teleport</title>5 <meta charset="UTF-8"/>6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">7 <meta name="viewport" content="width=device-width, initial-scale=1.0">8 <script src="https://cdn.teleport.media/stable/teleport.bitmovin.bundle.js"></script>9 <!-- Bitmovin Player -->10 <script type="text/javascript" src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>11</head>12<body>13<div id="my-player"></div>14<script type="text/javascript">151617 let BITMOVIN_PLAYER_KEY = "BITMOVIN PLAYER KEY";18 let TELEPORT_API_KEY = "TELEPORT API KEY";1920 const playerConfig = {21 key: BITMOVIN_PLAYER_KEY,22 network: {},23 };2425 let player;26 let container = document.getElementById('my-player');27 let source = {28 title: "Bitmovin Player Web SDK + Teleport.js Demo",29 dash: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',30 hls: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',31 progressive:32 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4',33 poster: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg',34 };3536 teleport.initialize({37 apiKey: TELEPORT_API_KEY,38 loader: {39 type: "bitmovin",40 params: { networkConfig: playerConfig.network },41 },42 }).then(function(instance) {43 let teleportBitmovinPlugin = instance.getLoader();4445 if (teleportBitmovinPlugin) {46 playerConfig.network.sendHttpRequest = teleportBitmovinPlugin.sendHttpRequest;47 }4849 player = new bitmovin.player.Player(container, playerConfig);5051 teleportBitmovinPlugin.setPlayer(player);5253 player.load(source).then(54 function(player) {55 console.log('Successfully created Bitmovin Player instance');56 },57 function(reason) {58 console.log('Error while creating Bitmovin Player instance');59 },60 );61 });6263</script>64</body>65</html>