Skip to content
This repository has been archived by the owner on Jun 24, 2022. It is now read-only.

tutorial

Jump to bottom
Flávio Ribeiro edited this page Aug 18, 2014 · 28 revisions

Tutorial

This is a step-by-step guide on how to build and use BemTV on your HTTP Live Streaming (HLS) transmission.

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 BemTV plugin 

$ 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 by adjusting embed parameters. There you'll also point the player to the right HLS transmission address.

Open on index.html which is located at project's root path. There you'll see some player parameters that you'll need to change. I strongly recommend you to set bemtvTracker parameter also.

  player = new WP3.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 it, but the server defined there is hosted on a really small DigitalOcean droplet and will probably fall down if your transmission grow up.

This is the address used for the demonstration at bem.tv also and If server's use 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 on top of 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. You can set an URL and the period in which the box will ping you with QoE statistics. 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:

$ tree dist/
dist/
├── 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.light.js
├── clappr.light.min.js
├── clappr.min.js
├── jquery.js
├── p2phls.js
├── p2phlsstats.js
└── underscore.js

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

(...)
  <script type="text/javascript" charset="utf-8" src="/dist/p2phlsstats.js">
  </script>
(...)
  player = new WP3.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 in what transmissions you're using BemTV. I'll be glad to help and celebrate with you. Enjoy. 🍻

Clone this wiki locally