Documentation

PeerGust is a next-generation CDN that grows with your audience.

Home

Overview

Peergust is a next-generation CDN that grows with your audience. We solve the problem of media distribution by offloading the assets to the connected visitors, rather than relying on centralized servers pools. We therefore aim to create an infinitely scalable network mesh to sustain the massive growth rate of internet usage by utilizing the full power of modern browsers and HTTP/2 to design a fully redundant, unbreakable delivery network without the hassle of having visitors add any add-ons or plugins. It’s our whole purpose to fix the future of digital media delivery to handle the explosion of the content consumption.

At Peergust we believe we can do it for the better.

Table of Contents

Gust Objects

Gust(options?)

After gust.js added to page Gust object will be available within window context. Gust must be initialized once to be activated on page. Gust object also can receive options.

Options

waitReady (default: true)

Wait Gust to get ready before fetching any data. It'll fallback to actual resource provider(server) if set to false until getting ready.

loadImages (defaut: false)

Gust also will load images on page even on SPAs if enabled.

Methods

Request (XMLHTTPRequest compatible)

See how to craft your own Gust.js plugin for any player.

Example Usage

var options = {
  loadImages: true
};

Gust(options);

Custom Player Integrations

Integration

Gust object has a method called Request which comforts XMLHTTPRequest interface as a replacement to it. All you need to do is using Request instead XMLHTTPRequest on your data fetching requests. After this quick change on your video player everything will be same as before but you'll be using PeerGust infrastructure.

Example

This our videojs-contrib-hls support plugin for Gust. You can see that how simple is integration. videojs.Hls.xhr.beforeRequest called before each xhr request by videojs-contrib-hls. The function receives options as a paramater which hosts an xhr prop. We simply initialize a new Request here and assign to xhr then return options. videojs-contrib-hls will use Request instead XMLHTTPRequest from now on.

  • See here for more information about beforeRequest.
  • videojs-contrib-hls uses Raynos/xhr as it's xhr module. See details of it's xhr option.
import {Request} from 'gust';
import videojs from 'video.js';

videojs.Hls.xhr.beforeRequest = function(options) {
  options.xhr = new Request;
  return options;
};

Tinyplayer Integration

Integration

Please see Tinyplayer documentation page before continue.

Adding Video

Add a video to HTML body.

<video
  id="video"
  autoplay>
   <source
    src="frag_bunny.mp4"
    type='application/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

Adding Scripts

Scripts files should be added right before the closing body tag.

gust.js

You should add the key you get from PeerGust panel to script url as key query paramater while adding gust.js and tinyplayer.

<!-- gust.js -->
<script src="//core.peergust.com/gust.js?key=YOUR_KEY"></script>

<!-- tinyplayer -->
<script src="//core.peergust.com/tinyplayer.js?key=YOUR_KEY"></script>

Initialize Gust

Also see details of Gust Object

<script>
  Gust();
</script>

Initialize Video

<script>
  var video = document.getElementById("video");
  Tinyplayer(video);
</script>

Conclusion

All set. You should be seeing the video playing via PeerGust infrastructure.

Sample Configuration

<!doctype html>
<html>
  <head>
    <title>VideoJS HLS VOD</title>
    <link href="/assets/video.js/dist/video-js.min.css" rel="stylesheet">
    <style>
      .title {
        font-family: sans-serif;
      }
      .video {
        width: 540px;
      }
    </style>
  </head>
  <body>
    <h3 class="title">Tinyplayer</h3>

    <main>
      <video
        id="video"
        class="video"
        width="640"
        height="264"
        poster="http://vjs.zencdn.net/v/oceans.png"
        muted
        controls
        autoplay>
         <source
          src="../assets/frag_bunny.mp4"
          type='application/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
       </video>
    </main>

    <!-- NOTE: replace the keys with your own -->

    <!-- Tinyplayer -->
    <script src="//core.peergust.com/tinyplayer.js?key=YOUR_KEY"></script>

    <!-- GustJS -->
    <script src="//core.peergust.com/gust.js?key=YOUR_KEY"></script>

    <script>
      // initialize GustJS with or without options.
      var options = {
        loadImages: false, // default false
        waitReady: true, // default true
      }
      Gust(options);

      // initialize Tinyplayer
      var video = document.getElementById("video");
      Tinyplayer(video);
    </script>
  </body>
</html>

Video.js HLS Integration

Integration

Adding Styles

Add video.js css file to your head.

<link href="//static.peergust.com/video.js/dist/video-js.min.css" rel="stylesheet" />

Adding Video

Add a HLS playlist to HTML body.

<video
  class="video-js"
  preload="auto"
  width="640"
  height="264"
  controls
  data-setup="{}">
  <source
    src="http://sample.vodobox.net/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8"
    type="application/x-mpegURL" />
</video>

Adding Scripts

Scripts files should be added right before the closing body tag.

video.js

Please be sure that you're using the latest version of video.js and videojs-contrib-hls.

<!-- video.js -->
<script src="//static.peergust.com/video.js/dist/video.min.js"></script>

<!-- video.js hls plugin -->
<script src="//static.peergust.com/videojs-contrib-hls/dist/videojs-contrib-hls.min.js"></script>
gust.js

You should add the key you get from PeerGust panel to script url as key query paramater while adding gust.js and gust.js plugins.

<!-- gust.js -->
<script src="//core.peergust.com/gust.js?key=YOUR_KEY"></script>

<!-- plugins/videojs.hls.js (hls support plugin for VideoJS) -->
<script src="//core.peergust.com/plugins/videojs.hls.js?key=YOUR_KEY"></script>

Initialize Gust

Also see details of Gust Object

<script>
  Gust();
</script>

Conclusion

All set. You should be seeing the video playing via PeerGust infrastructure.

Sample Configuration

<!doctype html>
<html>
  <head>
    <title>VideoJS HLS VOD</title>
    <link href="//static.peergust.com/video.js/dist/video-js.min.css" rel="stylesheet">
    <style>
      .title {
        font-family: sans-serif;
      }
      .video {
        width: 540px;
      }
    </style>
  </head>
  <body>
    <h3 class="title">VideoJS HLS VOD</h3>

    <main>
      <video class="video-js video"
        controls
        preload="auto"
        width="640"
        height="264"
        data-setup="{}">
        <source src="http://sample.vodobox.net/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8"
          type="application/x-mpegURL" />
      </video>
    </main>

    <!-- VideoJS latest version & VideoJS Contrib HLS latest version -->
    <script src="//static.peergust.com/video.js/dist/video.min.js"></script>
    <script src="//static.peergust.com/videojs-contrib-hls/dist/videojs-contrib-hls.min.js"></script>

    <!-- GustJS & GustJS VideoJS HLS Plugin -->
    <!-- NOTE: replace the keys with your own -->
    <script src="//core.peergust.com/gust.js?key=YOUR_KEY"></script>
    <script src="//core.peergust.com/plugins/videojs.hls.js?key=YOUR_KEY"></script>

    <script>
      // initialize GustJS with or without options.
      var options = {
        loadImages: false, // default false
        waitReady: true, // default true
      }
      Gust(options);
    </script>
  </body>
</html>

HLS.js Integration

Integration

Adding Video

Add a video element to HTML body.

<video id="video" controls></video>

Adding Scripts

Scripts files should be added right before the closing body tag.

video.js

Please be sure that you're using the latest version of hls.js.

<!-- hls.js -->
<script src="//static.peergust.com/hls.js/dist/hls.min.js"></script>
gust.js

You should add the key you get from PeerGust panel to script url as key query paramater while adding gust.js and gust.js plugins.

<!-- gust.js -->
<script src="//core.peergust.com/gust.js?key=YOUR_KEY"></script>

<!-- plugins/hls.js (hls support plugin for HLSJS) -->
<script src="//core.peergust.com/plugins/hls.js?key=YOUR_KEY"></script>

Initialize Gust

Also see details of Gust Object

<script>
  Gust();
</script>

Initialize Video with GustLoader

GustLoader comes within plugins/hls.js

<script>
  var video = document.getElementById("video");
  var player = new Hls({
    loader: GustLoader, // assign GustLoader here.
    autoLevelCapping: true,
  });
  player.loadSource("http://sample.vodobox.net/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8");
  player.attachMedia(video);
  player.on(Hls.Events.MANIFEST_PARSED, function(){
    video.play();
  });
</script>

Conclusion

All set. You should be seeing the video playing via PeerGust infrastructure.

Sample Configuration

<!doctype html>
<html>
  <head>
    <title>HLSJS VOD</title>
    <style>
      .title {
        font-family: sans-serif;
      }
      .video {
        width: 540px;
      }
    </style>
  </head>
  <body>
    <h3 class="title">HLSJS VOD</h3>

    <main>
      <video id="video" class="video" controls></video>
    </main>

    <!-- HLSJS latest version -->
    <script src="//static.peergust.com/hls.js/dist/hls.min.js"></script>

    <!-- GustJS & GustJS HLSJS Plugin -->
    <!-- NOTE: replace the keys with your own -->
    <script src="//core.peergust.com/gust.js?key=YOUR_KEY"></script>
    <script src="//core.peergust.com/plugins/hls.js?key=YOUR_KEY"></script>
    <script>
      // initialize GustJS with or without options.
      var options = {
        loadImages: false, // default false
        waitReady: true, // default true
      }
      Gust(options);

      // initialize HLSJS player with GustLoader and play the video.
      var video = document.getElementById("video");
      var player = new Hls({
        loader: GustLoader, // assign GustLoader here.
        autoLevelCapping: true,
      });
      player.loadSource("http://sample.vodobox.net/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8");
      player.attachMedia(video);
      player.on(Hls.Events.MANIFEST_PARSED, function(){
        video.play();
      });
    </script>
  </body>
</html>

Flowplayer HLS Integration

Integration

Adding Styles

Add Flowplayer css file to your head.

<link href="//static.peergust.com/flowplayer/dist/skin/minimalist.css" rel="stylesheet" />

Adding Video

Add a video div to HTML body.

<div id="video" class="video"></div>

Adding Scripts

Scripts files should be added right before the closing body tag

hls.js

Flowplayer relies on hls.js. Please be sure that you're using the latest version of hls.js.

<!-- hls.js -->
<script src="//static.peergust.com/hls.js/dist/hls.min.js"></script>
flowplayer

Please be sure that you're using the latest version of flowplayer and flowplayer.hls.

<!-- flowplayer -->
<script src="//static.peergust.com/flowplayer/dist/flowplayer.min.js"></script>

<!-- flowplayer.hls -->
<script src="//static.peergust.com/flowplayer-hlsjs/flowplayer.hlsjs.js"></script>
gust.js

You should add the key you get from PeerGust panel to script url as key query paramater while adding gust.js and gust.js plugins.

<!-- gust.js -->
<script src="//core.peergust.com/gust.js?key=YOUR_KEY"></script>

<!-- plugins/hls.js (hls support plugin for Flowplayer) -->
<script src="//core.peergust.com/plugins/hls.js?key=YOUR_KEY"></script>

Initialize Gust

Also see details of Gust Object

<script>
  Gust();
</script>

Assing GustLoader to Flowplayer

Assign GustLoader to global Flowplayer conf object. GustLoader comes within plugins/hls.js

<script>
  flowplayer.conf.hlsjs = {
    loader: GustLoader,
  };
</script>

Initialize Video

<script>
  var player = flowplayer("#video", {
    autoplay: true,
    clip: {
      sources: [{
        type: 'application/x-mpegurl',
        src: 'http://sample.vodobox.net/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8',
      }]
    }
  });

player.play();
</script>

Conclusion

All set. You should be seeing the video playing via PeerGust infrastructure.

Sample Configuration

<!doctype html>
<html>
  <head>
    <title>Flowplayer HLS VOD</title>
    <link href="//static.peergust.com/flowplayer/dist/skin/minimalist.css" rel="stylesheet">
    <style>
      .title {
        font-family: sans-serif;
      }
      .video {
        width: 540px;
      }
    </style>
  </head>
  <body>
    <h3 class="title">Flowplayer HLS VOD</h3>

    <main>
      <div id="video" class="video"></div>
    </main>

    <!-- HLSJS latest version -->
    <script src="//static.peergust.com/hls.js/dist/hls.min.js"></script>

    <!-- Flowplayer latest version & Flowplayer HLS latest version -->
    <script src="//static.peergust.com/flowplayer/dist/flowplayer.min.js"></script>
    <script src="//static.peergust.com/flowplayer-hlsjs/flowplayer.hlsjs.js"></script>

    <!-- GustJS & GustJS HLSJS Plugin -->
    <!-- NOTE: replace the keys with your own -->
    <script src="//core.peergust.com/gust.js?key=YOUR_KEY"></script>
    <script src="//core.peergust.com/plugins/hls.js?key=YOUR_KEY"></script>
    <script>
      // initialize GustJS with or without options.
      var options = {
        loadImages: false, // default false
        waitReady: true, // default true
      }
      Gust(options);

      // assign GustLoader to Flowplayer.
      flowplayer.conf.hlsjs = {
        loader: GustLoader,
      };

      // initialize Flowplayer and play the video.
      var player = flowplayer("#video", {
        volume: 0,
        autoplay: true,
        clip: {
          sources: [{
            type: 'application/x-mpegurl',
            src: 'http://sample.vodobox.net/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8',
          }]
        }
      });
      player.play();
    </script>
  </body>
</html>

Tinyplayer

Tinyplayer is an HTML5 video player with XHR & Media Source Extension capabilities. It also automatically recognizes Gust on page if loaded since it has native support.

API

Tinyplayer(video: HTMLVideoElement, options?: Options)

Options

beforeRequest: function(options: XhrOptions): XhrOptions

You can modify xhr requests by beforeRequest. See fields of XhrOptions.

var video = document.getElementById("video");
Tinyplayer(video, {
  beforeRequest: function(options) {
    options.withCredentials = true;
    return options;
  }
});

How to use

The only difference from standard HTML5 video initialization pattern is you also need to specify codec information within type prop and use application keyword instead video for video format e.g application/mp4 and initialize your video with Tinyplayer.

<video
  id="video"
  autoplay>
   <source
    src="frag_bunny.mp4"
    type='application/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<script>
var video = document.getElementById("video");
Tinyplayer(video);
</script>

Get Started Now

Enter your email to sign up for Peergust.

We have added your email address to our invite list.
There was a problem in the form submission