tutorial

Tutorial

This is a step-by-step guide on how to build BemTV peer-to-peer plugin and Clappr player to be used on your HTTP Live Streaming (HLS) transmission.

⚠️ BemTV doesn't require any additional software installation on user side. Viewers just need a WebRTC enabled browser and flash as almost every browser.

For now, BemTV is supported on Clappr Player only and this tutorial will guide you on the deployment of a Clappr player with BemTV plugin. Generating a HLS signal is out of scope of this document, but a lot of resources on the internet covers all the steps for doing this.

Requisites

I'm assuming you have node and npm installed on your machine. If not so, please visit nodejs and install it by yourself.

1) Install gulp.js

$ npm install gulp -g

2) Fetch & Install

$ git clone -q https://github.com/bemtv/clappr-p2phls-plugin.git
$ cd clappr-p2phls-plugin
$ npm install

Before you build the plugin, I recommend you to look at and adjust the settings on src/settings.js file.

3) Build your BemTV P2P+HLS plugin

$ gulp build

And then:

$ gulp serve

Now, accessing http://localhost:3000 on your browser will show you the player.

💡 Clappr embed parameters

Poster and watermark are both built-in plugins of Clappr player and you can set your own images by adjusting embed parameters. There you'll also point the player to the right HLS transmission address.

Open index.html which is located at project's root path. Change player parameters to point to the right resources. I strongly recommend you to set bemtvTracker parameter also.

  player = new Clappr.Player({
        sources: ['http://cdn.bem.tv/stream/soccer2sec/playlist.m3u8'],
                plugins: {playback: [P2PHLS]},
                width: 640, height: 360,
                poster: "http://www.bem.tv/assets/poster.png",
                watermark: "http://bem.tv/assets/watermark3.png",
                bemtvTracker: "http://put/your/tracker/here",
  });

Actually, a default tracker is available (you probably saw it on settings.js) and your peer-to-peer overlay should work without setting another one, but it is hosted on a really small DigitalOcean droplet and will probably fall down if your transmission grow up.

The default tracker is used for the demonstration at bem.tv also and if server's usage grow quickly, I'll need to shut it down in order to spare money for my beers 🍺.

Hosting your own tracker is very easy. Just deploy a rtc-switchboard on your host. Detailed instructions are described here.

Logging

Logs regarding messages exchanged by you and other peers on the swarm will appear in your browser's console if you shoot ctrl+shift+a or ⌘+shift+a. You can turn it on and off by typing this shortcut.

Oh, you're missing that cool stats for nerds box at the player? That one is another plugin.

Building Stats for Nerds Box

1) Fetch clappr-p2phls-stats-plugin

$ git clone -q https://github.com/bemtv/clappr-p2phls-stats-plugin.git

2) Installing dependencies

$ cd clappr-p2phls-stats-plugin
$ npm install

There you have settings to define. The stats plugin isn't just a stats box, it is capable for sending all QoE stats for a given URL.

In src/settings.js you can set the URL and the period in which the box will ping your server. This way you can follow how effective is BemTV on your transmission. A dashboard is being planned for rendering this pings in colored and beautiful graphics for you to watch.

3) Build

$ gulp build

After this step you have everything ready. Now, get dist/p2phlsstats.js and dist/assets/visitor.* files and put together to the others on your first build. Your dist/ three must be this way:

├── assets
│   ├── HLSPlayer.swf
│   ├── P2PHLSPlayer.swf
│   ├── Player-Regular.eot
│   ├── Player-Regular.svg
│   ├── Player-Regular.ttf
│   ├── Player.swf
│   ├── default.png
│   ├── visitor.eot
│   ├── visitor.svg
│   ├── visitor.ttf
│   └── watermark.png
├── clappr.js
├── clappr.min.js
├── jquery.js
├── jquery.min.js
├── p2phls.js
├── p2phlsstats.js
├── p2phlsstats.min.js
├── underscore-min.js
└── underscore.js

Now edit your index.html to add p2phlsstats.js box to your player:

(...)
  <script src="/dist/p2phlsstats.js"></script>
(...)
  player = new Clappr.Player({
        sources: ['http://cdn.bem.tv/stream/soccer2sec/playlist.m3u8'],
                plugins: {playback: [P2PHLS], container: [P2PHLStats]},
                width: 640, height: 360,
                poster: "http://www.bem.tv/assets/poster.png",
                watermark: "http://bem.tv/assets/watermark3.png"
  });

Reload your http://localhost:3000 website and play! 🎉

This box can be hidden by typing ctrl+shift+s or ⌘+shift+s.

Don't forget to tell me where you're using BemTV. I'll be more than happy to help and celebrate with you. Enjoy. 🍻

Full demo page HTML

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script type="text/javascript" charset="utf-8" src="jquery.js"></script>
  <script type="text/javascript" charset="utf-8" src="underscore.js"></script>
  <script type="text/javascript" charset="utf-8" src="clappr.js"></script>
  <script type="text/javascript" charset="utf-8" src="p2phls.js"></script>
  <script type="text/javascript" charset="utf-8" src="p2phlsstats.js"></script>
  <title>Test Page</title>
  <script type="text/javascript" charset="utf-8">
window.onload = function() {
  player = new Clappr.Player({sources: ['http://cdn.bem.tv/stream/soccer2sec/playlist.m3u8'],
                            plugins: {playback: [P2PHLS], container: [P2PHLSStats]},
                            width: 640, height: 360,
                            poster: "http://www.bem.tv/assets/poster.png",
                            watermark: "http://bem.tv/assets/watermark3.png",
                          });
  player.attachTo(document.getElementById('player-wrapper'));
}
  </script>
</head>
<body>
  <div align=center>
    <div id="player-wrapper"></div>
  </div>
</body>
</html>