@pbjlive/live.js

v0.1.3

Published

2 years ago

PBJ Live Javascript SDK (Currently Docs only)

Downloads

0High
0Medium
0Low

live.js

PBJ Live Javascript SDK (Currently Docs only)

Usage

Import javascript file

<script src="https://js.pbj.live/v1/sdk.js"></script>

This script will expose a global Live class. Initiate the class with your organization api key:

const live = new Live("pk_....")

When the Live class is initiated you will be able to do several things:

Render a PBJ Live stream to a HTML element
Retrieve information from our APIs

Elements

Embed element

Currently our recommended way to integrate with PBJ Live.

In your html, create a div tag with your preferred naming, we use live-element in these examples.

So in your html, add:

<html>
  <body>
    <!--- Add Live element here ---!>
    <div id="live-element"></div>
    
    <script src="https://js.pbj.live/v1/sdk.js"></script>
    <script type="text/javascript">
      var live = new Live("<Your API Key>");
      
      // Create instance of the iframe embed
      var embedPlayer = live.elements.embed()
       
      // Mount the player to the div#live-element in our html
      embedPlayer.mount("#live-element")
    </script>
  </body>
</html>

In the background, this embed() method will create an iFrame that will injected into your html element, we also offer a lower level solution via the live.elements.video() method.

Video Element

const episode = live.elements.video();

Mount to HTML object

Then mount this element to your HTML element:

const videoElement = live.elements.video({
  episode: id
});

videoElement.mount("#live-video")

Start video

videoElement.start();

Stop video

videoElement.stop();

Remove video element

videoElement.dispose();

Change volume

videoElement.volume(0.5)

A number from 0 to 1

Open full screen programatically

videoElement.openFullscreen()

Close full screen programatically

videoElement.closeFullscreen()

Get episode schedule

live.episodes.schedule()
  .then((episodes) => {
    const = nextEpisode = episodes[0]
 })

Get episodes for show

live.episodes.list({
  show: "..."
})
  .then(...)

Get current organization

live.organizations.current()

live.episodes.schedule()
live.episodes.detail({ id })

live.shows.detail()
live.shows.list()

live.organizations.current()

live.users.login()
live.users.register()

Event changes

live.events.on('episode-status-update', () => ...)

Realtime sockets

Subscribing

Sockets are added to the Live instance through the socket property, subscribing to a specific event can be done by using:

live.sockets.subscribeToEvent(live.sockets.commandTypes.EPISODE_STATUS_UPDATE,(message)=>{
    console.log('EPISODE_STATUS_UPDATE', message)
})

Get Episode Command Types

The different command types that are available can be found here:

 live.sockets.commandTypes