Building Your Own BoxCast Viewer Portal

BoxCast loves to see custom experiences to delight your viewers! Often, that can be accomplished without the need for a set of BoxCast API credentials (the credentials are reserved for broadcast-scoped interactions, e.g. a custom private dashboard).

Example

As an example, see this example video portal site for your BoxCast account written in vue.js. It uses this BoxCast JavaScript SDK under the hood to power the video player, but hits the BoxCast API public endpoints for content discovery on its own.

Overview and Sample Code

The basic steps for building your own custom viewer portal include:

1. Decide which “channel” you want to find broadcasts on.
   • If it’s just “everything on your BoxCast account”, find your account.channel_id on the dashboard (easiest way is to look in the Embed code generator at the boxcast.tv link) and just use that.
   • If you want to build a channel-picker for viewers, make a HTTP GET call to https://api.boxcast.com/accounts/FILL_IN_YOUR_ACCOUNT_ID/channels. Note the “id” and “name” in the list of json objects.
2. Make HTTP call to https://api.boxcast.com/channels/FILL_IN_YOUR_CHANNEL_ID/broadcasts to list the broadcasts in the chosen channel.
   • Use querystring l=20 to set a page size, p=1 to paginate, and s=-starts_at to sort newest-to-oldest
   • Use querystring q=timeframe:relevant to filter to only relevant broadcasts (excludes those far in the future)
3. Render HTML for your list view of the broadcasts you got in the response.
4. When wanting to play an individual broadcast, use an embed code similar to the following in the client side script:

<div id="boxcast-widget-broadcast"></div>
<script src="https://js.boxcast.com/v3.min.js"></script>
<script>
// TODO: wire onclick handler and pass proper channel_id and broadcast_id
var context = boxcast('#boxcast-widget-broadcast');
function loadBroadcast(channel_id, broadcast_id) {
  var options = {
    showTitle:false,
    showDescription:false,
    showHighlights:false,
    showRelated:false,
    showCountdown:true,
    selectedBroadcastId: broadcast_id
  };
  context.unload();
  context.loadChannel(channel_id, options);
}
</script>