Documentation
StreamsPlaybackEncodingBitmovin Dashboard

Integrating Bitmovin Player with Teleport

Learn how to integrate Teleport's webRTC-based peer-to-peer delivery technology for Live and VoD use cases with the Bitmovin Player Web SDK.

Suggest Edits

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.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- any code -->
    <script src="https://cdn.teleport.media/stable/teleport.bitmovin.bundle.js"></script>
    <script type="text/javascript" src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>
    <!-- any code -->
</head>
<body>
  <!-- any code -->
</body>
</html>

Configuration

For the configuration of the Bitmovin Player and Teleport.js you need

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.

const playerConfig = {
    key: BITMOVIN_LICENSE_KEY,
    network: {}
};

Teleport.js

  1. Initialize Teleport by specifying bitmovin as the loader, and provide the reference to the 'playerConfig' network API as parameter.
  2. Once Teleport is initialized, get the API loader
  3. Overwrite the sendHttpRequest method of the Bitmovin Network API with the sendHttpRequest method of the API loader.
  4. Initialize the Bitmovin Player with its playerConfig and provide its instance to Teleport using the setPlayer method.
  let player;
  let container = document.getElementById('my-player');

  //Step 1
  teleport.initialize({
    apiKey: TELEPORT_API_KEY,
    loader: {
      type: "bitmovin",
      params: { networkConfig: playerConfig.network },
    },
  }).then(function(instance) {
    //Step 2
    var teleportBitmovinPlugin = instance.getLoader();
    
    //Step 3
    if (teleportBitmovinPlugin) {
      playerConfig.network.sendHttpRequest = teleportBitmovinPlugin.sendHttpRequest;
    }
    
    //Step 4
    player = new bitmovin.player.Player(container, playerConfig);
    teleportBitmovinPlugin.setPlayer(player);

    player.load(source).then(
      function(player) {
        console.log('Successfully created Bitmovin Player instance');
      },
      function(reason) {
        console.log('Error while creating Bitmovin Player instance');
      },
    );
  });

That's it, you are ready to load a player source and start with your P2P based content playback!

Full example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bitmovin SDK + Teleport</title>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.teleport.media/stable/teleport.bitmovin.bundle.js"></script>
    <!-- Bitmovin Player -->
    <script type="text/javascript" src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>
</head>
<body>
<div id="my-player"></div>
<script type="text/javascript">


  let BITMOVIN_PLAYER_KEY = "BITMOVIN PLAYER KEY";
  let TELEPORT_API_KEY = "TELEPORT API KEY";

  const playerConfig = {
    key: BITMOVIN_PLAYER_KEY,
    network: {},
  };

  let player;
  let container = document.getElementById('my-player');
  let source = {
    title: "Bitmovin Player Web SDK + Teleport.js Demo",
    dash: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
    hls: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
    progressive:
      'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4',
    poster: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg',
  };

  teleport.initialize({
    apiKey: TELEPORT_API_KEY,
    loader: {
      type: "bitmovin",
      params: { networkConfig: playerConfig.network },
    },
  }).then(function(instance) {
    let teleportBitmovinPlugin = instance.getLoader();

    if (teleportBitmovinPlugin) {
      playerConfig.network.sendHttpRequest = teleportBitmovinPlugin.sendHttpRequest;
    }

    player = new bitmovin.player.Player(container, playerConfig);

    teleportBitmovinPlugin.setPlayer(player);

    player.load(source).then(
      function(player) {
        console.log('Successfully created Bitmovin Player instance');
      },
      function(reason) {
        console.log('Error while creating Bitmovin Player instance');
      },
    );
  });

</script>
</body>
</html>

Updated about 1 year ago