Getting Started with Hive Streaming and Video Cloud

ProductVersionEdition
Video CloudNew StudioProfessional, Enterprise

This topic provides an overview of using the Hive Streaming eCDN solution with Brightcove Video Cloud.

Introduction

Hive Streaming is an enterprise video distribution system that makes use of peer to peer technology to reduce traffic over the internet gateway. With the peer to peer technology, client computers communicate directly with each other to deliver the stream on the local network. A cloud service is used to coordinate the client computers and tell them from which computer on the local network to retrieve the stream.

The integration with the Brightcove uses the Hive Video.js player plug-in to rewrite the stream URL in the player the locally installed Hive client that caches the stream and makes it available to the Brightcove player to play.

When using Hive Streaming, a Hive ticket is specified to the Video.js player plug-in to identify the stream on the peer to peer network to be viewed. A Hive ticket is generated using the Hive Admin console by providing the unique stream manifest .m3u8 URL. In the following sections we will show how to use Hive Streaming with the Live work flow in Brightcove Video Cloud.

Player Configuration

Start by configuring a Brightcove player to use the Hive Video.js plug-in. Create a new player with the desired skin and options.

Then, add the Hive Video.js plug-in.

Copy and paste from here:

//code.jquery.com/jquery-1.11.3.min.js //media-players.hivestreaming.com/plugins/videojs/3.0.6/videojs.hive.min.js

 

Finally, set the "hive" plug-in options.

Copy and paste from here:

{     "HiveJS": {         "onActiveSession": "function(session) { console.log('Session activated ' + session); }",         "onError": "function(error) { console.log('Custom Error: ' + error.message); return true; }"     },         "hiveTechOrder": [             "HiveJava",             "StatsJS"         ],         "debugLevel": "debug" }

Live Workflow

When using the Live workflow in Video Cloud, the stream manifest .m3u8 is not known until the live event starts streaming. You will start the live stream, copy the stream manifest, create a Hive ticket, and then embed player code on your web page using that Hive ticket.

Start Live Stream and Determine Stream Manifest

To determine the stream manifest, first create the live event. Note that you can create a live event days or weeks prior to starting the live stream. In that case you will complete a portion of the instructions below first and then later you will complete the remainder of the instructions.

Select the default player, not the Hive enabled player.

Choose your live stream profile.

Ensure that your output options do not have any RTMP formatted renditions.

Start the encoder for the live stream and copy the HLS manifest URL. If you see a live event preview player instead of the QR code as shown below, you still have an RTMP formatted rendition.

If you need to keep RTMP renditions in your stream, you can always start the stream playback and grab the manifest URL from the browser debugger. To do this, copy the player URL.

Paste the player URL into a new tab in the browser, open up the browser debugger (Chrome shown in this example) and copy the master.m3u8 HLS stream manifest URL.

Generate Hive Ticket

Open the Hive Admin console and browse to the New Ticket form. Enter a friendly name for the stream and paste the stream manifest into the Url expression field and click Create Ticket.

Highlight and copy the ticket value.

Embed Brightcove Player

Finally, embed the Brightcove player on your web page using code as shown below. Update 'data-account=', 'data-player=' and 'src=' with your Brightcove account ID and player ID to match the player you created above with the Hive Video.js plug-in. Paste the ticket value copied from the Hive Admin console into the 'var ticket =' line in the code.

<!DOCTYPE html>  <head>     <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> </head>  <body>     <video id="myPlayer" data-account="4875109312345" data-player="BJ7dKnvkx" data-embed="default" data-application-id class="video-js" controls></video>      <script src="//players.brightcove.net/4875109312345/BJ7dKnvkx_default/index.min.js"></script>      <script>         videojs('myPlayer').ready(function() {              var myPlayer = videojs.players.myPlayer;              var ticket = "https://api.hivestreaming.com/v1/events/9002/10001/hlsjs_dev_test_01/Zaq28BQlbzpBpfQM";              myPlayer.initSession(ticket, function(manifest, session) {                 console.log("Hive resolved manifest: " + manifest + " tech: " + session.tech);                 myPlayer.src([{                     src: manifest,                     type: "application/x-mpegURL"                 }]);             }, function() {                 console.log("Hive could not resolve the ticket.");             });         });     </script> </body>    

 

Note that 'data-video-id=' should NOT be specified in the <video> tag or the player will immediately start playing the video through the Brightcove CDN instead of waiting for the source to be rewritten to the local Hive client. However, you do need to add 'id="myPlayer"' to the <video> tag to reference videojs script code below.

VOD Workflow

Similar to live streams, a Hive ticket needs to be generated for each unique VOD stream. However, in the case of a VOD stream which is typically maintained over a long period of time, we can store the Hive ticket in a custom field and then use that custom field in the player embed code.

Create Custom Field

Follow the instructions here to create a new custom field. You might give the new custom field a Display name of 'HiveStreaming' and an internal name of 'hivestreaming' and it should be a 'Text' type.

Determine Stream Manifest

In the Media manager in Brightcove Studio, open the video you want to deliver with Hive Streaming, hit the 'Publish' button and click on the 'Preview in browser' link. Open up the browser debugger (Chrome shown in this example) and copy the HLS stream manifest.

Note that currently for VOD assets the manifest will have a consistent URL such as the following:

http://c.brightcove.com/services/mobile/streaming/index/master.m3u8?videoId=5345560317001&pubId=4875109344001

Thus, it is only necessary to know the videoID and publisherID to be able to create the stream manifest URL for generating the Hive ticket.

Generate Hive Ticket

Open the Hive Admin console and browse to the New Ticket form. Enter a friendly name for the stream and paste the stream manifest into the Url expression field and click Create Ticket.

Highlight and copy the ticket value

Update Custom Field

Edit the video in the Media component in Studio and paste the ticket into the custom field you created above. Note that it may take 10 to 15 minutes for the new custom field value to be available to the player via the player API used in the embed code below.

Embed Brightcove Player

Finally, embed the Brightcove player on your web page using code as shown below. Update 'data-account=', 'data-player=' and 'src=' with your Brightcove account ID and player ID to match the player you created above with the Hive Video.js plug-in. Update the 'dataVideoId' variable with the video ID so that the Hive ticket can be looked up from the custom field created previously.

<!DOCTYPE html>  <head>     <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> </head>  <body>     <video id="myPlayer" data-account="4875109344001" data-player="HkOuLYaoe" data-embed="default" data-application-id class="video-js" controls></video>      <script src="//players.brightcove.net/4875109344001/HkOuLYaoe_default/index.min.js"></script>      <script>         videojs('myPlayer').ready(function() {              var dataVideoId = "5345560317001";              var myPlayer = videojs.players.myPlayer;              myPlayer.catalog.getVideo(dataVideoId, function(error, video) {                 var ticket = video.customFields["hivestreaming"];                  myPlayer.initSession(ticket, function(manifest, session) {                     console.log("Hive resolved the manifest: " + manifest + " tech: " + session.tech);                     myPlayer.src([{                         src: manifest,                         type: "application/x-mpegURL"                     }]);                  }, function() {                     console.log("Hive could not resolve the ticket");                 });             });         });      </script> </body> 

 

Note that 'data-video-id=' should NOT be specified in the <video> tag or the player will immediately start playing the video through the Brightcove CDN instead of waiting for the source to be rewritten to the local Hive client. However, you do need to add 'id="myPlayer"' to the <video> tag to reference videojs script code below.

 


Comments or suggestions?