Challenge 7: Get your channel to the masses

Previous Challenge

Introduction

In this challenge, we now more from broadcast/streaming specific technology and tooling to cloud based app deployment and hosting.

We will deploy a Cloud Run Service that our viewers will connect to with their phones or browsers to view our stream that is served up through a CDN.

Now that we have the end of our pipeline coming from Nea, it serves as the origin of Google Cloud CDN and the player in this challenge is connecting to it.

Tools Used

  • JS Player (open source)
  • Google Cloud Run
  • Google Cloud CDN
  • Google Cloud Shell

Description

Need to deploy the player application to a Cloud Run service so that it can be consumed by the masses.

Open the Google Cloud shell, and clone this github repository:

git clone https://github.com/JorgeRSG/sample-video-player.git
cd sample-video-player

The easiest way to deploy the player is using the gcloud run deploy command from the root of the cloned repository. This command will build the container image from the source and deploy it. Name your service ghack-player and make sure to allow public access to the service.

 Note
If it fails, try a second time, as some services are created on the fly.

 Note
After the deployment succeeds, the command line will output the service URL. This is the URL for the live channel. You can also find the public URL in the Cloud Console on the Cloud Run page.

The VideoJS player should load and start playing the live video feed originating from the Norsk sources, mixed in Vectar, and processed by Darwin and Titan.

The key to success for this entire gHack is seeing an advertisement. The SCTE-35 marker inserted with Darwin signals the Google Cloud Video Stitcher API (via the Ateme components) to insert an ad from Google Ad Manager.

To enable stitching on your stream the Google Cloud Video Stitcher has to be set up.

Go to the Google Cloud console and ssh into the machine called video-stitch

Run the command sudo su - videostitch to assume the identity of the videostitch user. With it you’ll create your Video Stitcher configuration and start a Video Stitcher session which will return a URI where your ad will be stitched while you watch your stream on the video player.

Use gsutil to copy some configuration files:

gsutil cp gs://ibc2025-videostitch/* .

Before running the scripts you just downloaded, remember to make them executable:

chmod +x create_config.sh create_session.sh

Additionally, the following three variables have to be in place for the scripts to use them. Make sure you replace the values and add them to your terminsal session.

export SOURCE_HLS_LIVESTREAM_URI="YOUR_SOURCE_HLS_LIVESTREAM_URI"
export AD_GROUP="ASK_YOUR_COACH_FOR_AD_GROUP"
export TEAM_NAME="YOUR_TEAM_NAME"

You’re now ready to run create_config.sh followed by create_session.sh

On the output of create_session.sh you’ll see an element called “Play URI”. Note that this URI is different from your previous one; your video stitching is ready. Copy that URI and load it in your video player.

 Note If the session doesn’t receive any requests in 5 minutes, it will automatically be closed and you’ll have to start a new one.

Now that content is being played, it is time to insert that ad marker (SCTE35) so that you can see your ad. Go back to the Darwin console from one of the previous challenges and press once the “SCTE Slice Insert - Ad Break Start”. Wait a few seconds and you’ll see an ad playing in your stream. Once the ad break is over, you’ll see that your stream comes back automatically.

When the ad plays, it confirms the entire workflow is functioning correctly. If no ad appears, common issues to troubleshoot are:

  • The SCTE-35 marker was not inserted correctly in Darwin.
  • The integration between Titan Live and the Video Stitcher API is misconfigured.
  • There is an issue with the Google Ad Manager campaign.

Advanced Challenge

In a professional setting you will always want to modify the presentation of the player to use your own branding.

To get a feel for how easy it is to update the Cloud Run service, change some of the HTML/CSS code for the player and then issue a gcloud command to update the Cloud Run service. (Changing the title of the website and the main header are good options to start with).

Success Criteria

  • You have a Cloud Run service named ghack-player deployed
  • You can hit the service’s public URL and see your stream being played
  • Insert a SCTE35 message and watch an ad playing in your stream.
  • [Optional] You made some changes to the look and feel of the player and redeployed the service

Learning Resources

Previous Challenge