Brightcove Roku SDK Sample App

This is a sample Roku channel application meant to showcase Brightcove's Roku SDK features. It features a basic menu that allow users to navigate through a set of pre-configured Roku SDK usage samples.

To understand all Brightcove Roku SDK configurations and features, please refer to the Roku SDK Developer Guide.

Prerequisites

• Visual Studio Code IDE
• Brightscript VSCode extension
• A network accessible Roku device with developer mode enabled

Setup

1. Clone the repo
2. Open it in the VSCode IDE
3. Make sure that the Brightscript extension is properly configured
   • setup the host and password properties in the .vscode/launch.json file with your Roku device IP address and developer password respectively
4. Run the bundled "setup" VSCode task to download the latest version of the Roku SDK package:
   • From the VSCode menu:
     • Open the Terminal menu
     • Select the "Run Task..." option
     • Select the "setup" task.
     • Confirm that the libs/roku-sdk.pkg file was successfully created.
   • From the VSCode command palette:
     • open the command palette
     • start typing "task"
     • select "Tasks: Run Task" once it shows up
     • Select the "setup" task
     • Confirm that the libs/roku-sdk.pkg file was successfully created.
5. Run the VSCode debugger to deploy the Sample App into the configured Roku device
   • press F5 (or run the "Deploy" debug profile manually through the "Run and Debug" panel)

File Structure

• components/MainScene - handles the app launch process which includes reading the data.json file contents, building up the app menu and handling menu buttons selection. Also controls screens loading and closing processes.

• components/screens/bcSamples - contains Brightcove video playback samples. Essentially, this screen parses the selected button data and loads up the bcPlayer node for video playback. Showcases multiple ways to customize the bcPlayer node instance in order to load Brightcove metadata for playback.

• components/screens/customSamples - contains custom, non-Brightcove video playback samples. Essentially, this screen parses the selected button data and loads up the bcPlayer node for video playback. Showcases how the bcPlayer node is also able to load and play custom, non-Brightcove videos.

• components/screens/DetailsSample - contains a simple Brightcove video details screen sample. Showcases how to retrieve Brightcove video metadata and load it into a bcPlayer node instance in different steps.

• components/Menu - contains app menu related components

• libs - stores the Roku SDK package file. Make sure to run the setup VSCode task to download the latest Roku SDK release into this directory.

• data.json - stores the app contents. This JSON file is the data source for the app. Check the Customization section below to understand the contents of this file.

Customization

If you want to use your own Brightcove account or add other custom videos, you can do so by updating the data.json file. This file contains the following properties:

• sdkUrl [String] - specifies the Roku SDK package URL (ie, where to load the Roku SDK package from). By default, the Sample App loads it from libs/roku-sdk.pkg, which is generated by the setup VSCode task. Alternatively, this value can be changed to the Roku SDK package direct link in Brightove servers. Please check the Roku SDK Developer Guide for more information on these URLs.
• content [Object] - lists the menu contents as well as the screen configurations that are applied when a button is selected. This object contains the following properties:
  • brightcove [Object] - lists the Brightcove related samples. Contains the following properties:
    • title [String] - short description to identify the menu button
    • content [Array] - specifies all the samples and their respective configurations. Each entry in this object is mapped to it's own button in the app menu.
      • title [String] - short description of the sample. Used for the menu button text.
      • screen [String] - the name of the component that will handle this sample. This component must have a data AssocArray field because once the button is pressed, the data contents (listed below) are set into the component's data field so it can process it. It's usually set to bcSamples as it already contains all the logic required to create and manage the bcPlayer node instance and prepare it to play Brightcove assets.
      • data [Object] - contains the data required by the screen component to handle the sample. The following properties are set by default:
        • type [String] - identifies the type of configuration that the screen component should setup (essentially, this property allows the screen component to map a specific type to a bcPlayer configuration). If you create a new type, you'll need to handle that specific type in the specified screen component as well.
        • asset [String] - specifies the Brightcove asset ID (this can be a video, a playlist or a search query depending on the configuration type)
        • adConfig [String] - Optional. Specifies the SSAI ad_config_id property or the CSAI VAST/VMAP file URL. This is only required to setup SSAI or CSAI in a video/playlist.
        • accountID [String] - specifies the Brightcove Account ID to be used in this sample. Required to retrieve and play Brightcove assets as well as access Brightcove services.
        • policyKey [String] - specifies the Brightcove Privacy Key to be used in this sample. Required to retrieve and play Brightcove assets as well as access Brightcove services. Please be aware that a search enabled policy key is required to access Playback API search requests.
  • custom [Object] - lists the custom samples showcasing how the Roku SDK can also load and play non-Brightcove videos. Contains the following properties:
    • title [String] - short description to identify the menu button
    • content [Array] - specifies all the samples and their respective configurations. Each entry in this object is mapped to it's own button in the app menu.
      • title [String] - short description of the sample. Used for the menu button text.
      • screen [String] - the name of the component that will handle this sample. By default all custom samples are handled by the customSamples component.
      • data [Object] - contains the data required by the screen component to handle this sample. Since these are custom samples, the data it requires may vary a lot, so the only property available is:
        • type [String] - identifies the type of configuration that the screen component should setup
        • metadata [Object/Array] - specifies the video or playlist metadata that it going to be loaded into the bcPlayer node for playback

It's also possible to create new screen components to implement custom use-cases. These components must contain the following fields:

• data (assocarray) - receives the data value provided in the sample object when the menu button is selected. This field should be observed within the component to retrieve the information and parse/handle it as needed.
• close (boolean) - set it to true within the component to close the screen (the MainScene will remove it from the tree list)