paint-brush
Building A Roku Channel From Scratchby@progrockrec
480 reads
480 reads

Building A Roku Channel From Scratch

by Shawn GordonJuly 21st, 2020
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Shawn Gordon created a Roku channel with relative ease and basically no programming. Using the new Direct Publisher functionality, you can literally have this up and running with content in a couple of hours. The easiest way to set up is to use the Digital Ocean S3 style storage (cheaper than Amazon S3) called Spaces. This option only cost about $5 per month, so a great way to give it a go. You will need four graphics for your channel, they are: Logo, Splash Screen, Search Button, Poster, Splash Screen and Search Button. Each video must also have a thumbnail associated with it.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Building A Roku Channel From Scratch
Shawn Gordon HackerNoon profile picture

I’d been wanting to create a Roku channel for years but I was really put off at the idea of learning Brightscript so I just never did it until early in 2020 and I discovered the new Roku Direct Publisher functionality which lets you create a channel with relative ease and basically no programming.

Granted, you aren’t going to be creating anything as robust as Netflix with Direct Publisher, but if you are looking to put your company on the Roku and not use one of those horrible 3rd party systems, this is a relatively easy way to do it. What follows is a walkthrough of how I did it and the tools that I used, you can literally have this up and running with content in a couple of hours, it is the research (which I’ve done and am sharing here) that takes a long time.

One of the more difficult things I had to figure out was where I could store my videos so I could feed them to the Roku. You can’t just link to YouTube, they have to be hosted somewhere, so after much searching, I found that a simple way to test is to use the Digital Ocean S3 style storage (cheaper than Amazon S3) called Spaces. This option is quick and easy to set up and only cost about $5 per month, so a great way to give it a go.

You will need four graphics for your channel, they are:

  • Logo — 400 x 90 as JPEG or PNG
  • Splash Screen — 1920 x 1080 as JPEG or PNG
  • Search Play Button logo — 165 x 60 as JPEG or PNG
  • Poster — 540 x 405 as JPEG or PNG

The dialog for each of those components goes as follows within the Direct Publisher system:

The Poster setting is kind of hidden on the Channel Store Info page, if you miss it, you can get to it afterward from the Developer Dashboard under Manage Channels and then click on “Preview and Update”. Click on the little person icon in the upper right and select “Developers” and then select “Dashboard” which will display on the menu bar after you select “Developers”.

Now select “Manage My Channels”

Here you can review Analytics or make changes to the channel by selecting the corresponding option. Depending on if the channel has been published or not, you will see the following if it has not been published yet.

Anything that is missing or has errors, like “Feed Status” will have a red X next to them. You can click on any of those words to get into that section to change things like artwork, descriptions, the poster, etc., as mentioned previously the poster can be found under “Channel Store Info”

Once a channel is published, then you can modify any of those aforementioned items by clicking on “Preview and Publish” for that channel and getting this dropdown of each segment.

“Preview and Update” will give you something similar to the screenshot below, the UI changes depending on the current state of the channel.

Content Management

I like using Handbrake to format the videos as 1080P/MP4 files optimized for Roku, which is an option in Handbrake in their predefined settings.

you must open a video file, you can use the file selector or drag&drop a video file on the “Open Source” button. If the panel of Presets is not shown on the right, click the highlighted “Presets” at the top and the panel will toggle on and off.

Scroll down till you see the highlighted Roku setting and then you can browse to your save location, then click on “Start Encode”, make sure your file extension is MP4. Each video must also have a thumbnail associated with it which follows this format:

  • 16x9 aspect ratio
  • At least 800w x 450h
  • Either JPG or PNG file format
  • I use the video file name for the filename so they sort together, the file extension informs you which is which.

Something I like to do also is put the date of the video in the beginning of the file name in YYYYMMDD format. You could put it at the end as well, or not at all, but I appreciate the ability to easily sort.

Now that you have your videos encoded properly and your thumbnails ready to go, you want to upload them to your Digital Ocean account. Make sure that after you upload the files or when you are uploading, you set their permissions to “public” as they will default to “private”. Now we get to the hard part, setting up the JSON file to hold your content feed.

Feed File (json)

The feed file is critical to the Roku device getting its content, we are using the more modern JSON version of the file instead of the older XML version. We are using the JSON Feed Manager application, it is the simplest stand-alone method available.

Some CDN’s include all of the tools for creating the feed file. Before you create the feed, the thumbnails and the videos need to be available at a URL. The layout of the JSON is described on the Roku site here, a sample entry is listed below:

{
      "id": "2802ef8dd5674ca7bc25940a0075029e",
      "title": "World News July 3, 2020",
      "content": {
        "dateAdded": "2020-07-05T14:11:13+00:00",
        "videos": [
          {
            "url": "https://shawnroku.sfo2.digitaloceanspaces.com/I/20200703_World_New.mp4",
            "quality": "FHD",
            "videoType": "MP4"
          }
        ],
        "duration": 61
      },
      "thumbnail": "https://shawnroku.sfo2.digitaloceanspaces.com/I/20200703_World_News.jpg",
      "shortDescription": "Weekly World News",
      "releaseDate": "2020-01-28",
      "longDescription": "Timely world news",
      "tags": [
        "interviews"
      ]
    },

The JSON Feed Manager application does a pretty good job of generating this the first time around, but it can also be easier to manually edit the JSON file at times, I use Notepad++ on Windows for that. That said, the JFM app does auto-generate the “id” field, which is convenient because this has to be unique and is forever tied to that content.

Note that the Roku docs say that the shortDescription and longDescription have to contain different values, but the Roku doesn’t seem to pull them in a consistent fashion, so I use something similar in both, but not exactly the same.

Adding/Modifying Feed File

Using JFM you will open and load the existing feed file, as our content is all “Short Form Video” we are only working with those entries. To add a new entry you want to right-click on the “Short Form Video” tag to insert a new item, which looks like this:

You will be presented with the following form:

Leave the ID alone, but fill in the other fields as required. For the Tags, click on the “Available Tags” button and you will get the yellow popup you see in the screenshot. You can select one or more. I’m still not positive how this works, so the categories and the tags are the same, theoretically, tags could exist across categories and you can also click multiple tags, but this controls what sections in the Roku channel that the entry will display.

The “Thumbnail” requires you pasting the URL to the video thumbnail that is on Digital Ocean, which involves hovering the mouse over the file entry and you will get a pop up that allows you to copy the URL, which you will just paste. The application will validate it.

Next, click on the “Content” tag in the left pane under the new entry, here is where you will set the video duration. This will display in Digital Ocean in the same mouse hover operation to grab the video URL or just checking the metadata properties of the file on your computer.

Then to add the video, you have to right-click on the “Video” tag in the left pane for the entry you are creating and select insert:

This is very simple, just paste the URL for the video, and then assuming you’ve gone through the Handbrake video conversion step, select quality “FHD” and leave the rest as is.

Saving the feed file will cause it to validate in addition to their being a “Validate Feed File” option on the “File” menu or pressing Alt+V, which is a good way to test as you go, so after each new, changed or deleted entry, simply save/validate it and if you have errors, review the log file. Please note that the app is pretty unforgiving if you exit without saving, it will happily exit without telling you or saving.

Once you are done, then the updated feed file needs to be uploaded to Digital Ocean to replace the current one. Make sure you switch the access to “Public” from “Private” in the upload dialog, or if you miss it, just change the file permissions after it is uploaded. Roku refreshes the feed files 4 times a day, there is nothing you can do to speed it up once the channel is published, so you just have to wait for your changes to show up.

Summary

I didn’t cover live streams or more complex implementations of Categories and Tags, and this method becomes extremely time-consuming if you have a high velocity of new content, as mentioned in the intro, this is not going to give you a Netflix interface.

While it might seem like a lot of work, it isn’t too bad once you know what to do, I was able to add 50 videos to my channel in a couple of hours.