@satyamatwork/live v1.0.8
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