How To Create a Private Roku Channel

Updated 11.17.2013
How To Create a Private Roku Channel
Before you begin, here’s a list of the things you’ll need to install a private channel
on the Roku Streaming Player:
1.
2.
3.
4.
5.
6.
7.
8.
Roku Streaming Player with Software Release 2.7 or later
Roku SDK (Development Kit Documentation and Sample Applications)
Development Workstation with Text Editor and Terminal Application
Standard Web Browser (Firefox, Internet Explorer, Chrome, Safari)
FTP Program
Graphics Editing Program
Hosting Provider-Storage (Preferably a CDN, for large volume access)
File Compression Utility
Step 1- Account and Directory Setup
•
Create a Roku account if you have not done so already.
•
Link your Roku device to your account.
•
Sign up for a developer account.
•
Enable developer mode on Roku device. By default, the developer page is
not enabled. You must enter the remote code using the Roku remote to
enable it.
Home 3x, Up 2x, Right, Left, Right, Left, Right
•
To verify you have enabled developer mode, go to any web browser on your
network and enter the IP address of your Roku device. To find the IP
address of your roku device, go to home screen on Roku Player. Go to
Settings –> Player Info. Once you enter the IP address in the web browser,
you should see this window:
Updated 11.17.2013
•
Create a directory for testing SDK files. I created one called C:\ rokudev.
•
Create another directory inside the one above for the SDK. I created one
called C:\ rokudev\RokuSDK.
•
Download Roku SDK to your computer, then extract the compressed archive
to the directory you created above.
•
Create two more directories inside the first directory for all the test files that
will eventually be zipped and installed on your Roku device. I created one
called C:\ rokudev\Roku_LT\, the name of my Roku device. My final
directory tree looks like this: C:\rokudev\ RokuSDK and C:\rokudev\
Roku_LT.
•
Create directories on your hosting provider. This is where ftp comes in
handy. Here is what I created, rokudev/examples/videoplayer.
Inside videoplayer directory, I created xml and images.
Step 2- Development Keys and Password
•
Create developer RSA keys. The “genkey” utility will generate a set of Keys,
Password and DevID necessary for encrypting your application. You will need
a terminal emulater. I use Putty for Windows, but you can also use
Command Prompt. Type: telnet <rokuPlayer-ip-address> 8080. When the
connection has been made, at the prompt, type genkey. You may get no
response the first time. Try hitting return a couple of times, then
type genkey again, it will start putting ….. ++++ type output on the screen.
You will be presented you with a Password and DevID like this:
Save this info somewhere for later.
Updated 11.17.2013
In Mac OS X, you can use the Terminal app in the Utilities folder.
Step 3- Finding SDK Directories
•
Find the directory where you extracted your SDK. If you have been
following my directory creating structure, it would be C:\ rokudev
\RokuSDK. In that directory, there is an subdirectory called “examples”.
In that directory there are two subdirectories “source” and “zips”. In the
“zip” subdir, find and extract the directory “videoplayer.zip” into your
testing directory. The testing directory I created was called C:\ rokudev
\Roku_LT.
Make sure the program you use to exact the videoplayer.zip file creates a
directory with the same name. You will understand later when it’s time to
package the files for Roku install.
Step 4- Content
•
Find or create content. For this tutorial, you will need 2 images and one
video file. You have two choices, create the content or find some to use. If
you are searching for sample content to use, please make sure you have
permission to rebroadcast it. Keep it legal! This rule also applies when you
begin to create full channels with multiple content elements. If you are
having trouble finding video to use for testing purposes, I have provided a
few video clips you can use @ www.llmcd.com/videosample.html. All the
instructions are on the webpage.
•
Use a graphics editing program to resize the images. The HD format image
should be 290 pixels wide by 218 pixels high. The SD format image should
be 214 pixels wide by 144 pixels high. Here are the files I created:
•
Use a media encoder to conform your videos to Roku specifications. I have
provided two encoder presets for you to use if you have Adobe Media
Encoder and Sorenson Squeeze. Download @
http://www.llmcd.com/rokudev/encoder_presets.zip
Updated 11.17.2013
For this tutorial, my video files look like this:
abstractcircles_24fps.mp4
sd_hctv.jpg
hd_hctv.jpg
Step 5- Editing SDK Files
•
Edit brightscript, xml and manifest files. The three files you will edit are:
C:\rokudev\RokuSDK\examples\source\xml\categories.xml
C:\rokudev\RokuSDK\examples\source\xml\themind.xml
C:\rokudev\Roku_LT\videoplayer\source\categoryFeed.brs
C:\rokudev\Roku_LT\videoplayer\manifest
This is the directory structure if you have used my method. The two .xml files will
go to your hosting provider(server) and the .brs and manifest file will be zipped
and sent to your Roku device.
The Manifest file can change the description of your channel on the home screen.
You can change the title and subtitle info to whatever you want.
Here is my manifest file:
title=Samples For My Channel
subtitle=Video player example using category based XML feeds
mm_icon_focus_hd=pkg:/images/MainMenu_Icon_CenterFocus_HD.png
mm_icon_side_hd=pkg:/images/MainMenu_Icon_Side_HD.png
mm_icon_focus_sd=pkg:/images/MainMenu_Icon_CenterFocus_SD.png
mm_icon_side_sd=pkg:/images/MainMenu_Icon_Side_SD.png
major_version=1
minor_version=0
build_version=00001
•
•
Copy these two xml files to the testing files directory.
For me that is C:\ rokudev\Roku_LT
•
Lets start with categories.xml in a text editor. In Windows I like to use
Notepad++. In Mac OS I like to use Taco and Xcode (free, built in Mac OS)
Updated 11.17.2013
In the document, remove all but one category. Change the underlined areas in
italics to match your content and the the directories you created in step 1. Save
the document. Take a look at where I put the images on my hosting provider.
Your document should look like this:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<categories>
<!-- banner_ad: optional element which displays ad at the top level category screen -->
<banner_ad sd_img="http://rokudev.roku.com/rokudev/examples/videoplayer/images/missing.png"
hd_img="http://rokudev.roku.com/rokudev/examples/videoplayer/images/missing.png"/>
<category title="AE Graphics" description="Streaming Video of Lines and Circles"
sd_img="http://www.llmcd.com/rokudev/examples/videoplayer/images/sd_HCTV.jpg"
hd_img="http://www.llmcd.com/rokudev/examples/videoplayer/images/hd_HCTV.jpg">
<categoryLeaf title="AWS URL Test" description="" feed="http://www.llmcd.com/
rokudev/examples/videoplayer/xml/themind.xml"/>
</category>
</categories>
•
add the sd
and hd
images you
resized here.
open themind.xml in a text editor. In the document, remove all but one feed
item. Edit the resultlength and endindex to be 1 instead of 2. Point the
streamURL to the mp4 you will copy to your hosting provider. Change the
underlined areas in italics:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<feed>
<!-- resultLength indicates the total number of results for this feed -->
<resultLength>1</resultLength>
<!-- endIndix indicates the number of results for this *paged* section of the feed -->
<endIndex>1</endIndex>
<item sdImg="http://www.llmcd.com/rokudev/examples/videoplayer/images/sd_HCTV.jpg"
hdImg="http://www.llmcd.com/rokudev/examples/videoplayer/images/hd_HCTV.jpg">
<title>Amazon Web Services URL Test</title>
<contentId>10001</contentId>
<contentType>Talk</contentType>
<contentQuality>HD</contentQuality>
<streamFormat>mp4</streamFormat>
<media>
<streamQuality>SD</streamQuality>
<streamBitrate>1500</streamBitrate>
<streamUrl>http://s3.amazonaws.com/rokudev/movies/abstractcircles_24fps.mp4</
streamUrl>
</media>
<synopsis>Hey, lets have some fun streaming video to our Roku players from our own
channel!</synopsis>
<genres>Clip</genres>
<runtime>52</runtime>
</item>
</feed>
Updated 11.17.2013
Save the document.
Roku calculates time in 59fps, but you need to add time in exact frames for the
<runtime> tag above. To convert your video file length to minutes and seconds,
you need a timecode calculator that does the conversion from 59.94fps to frames
only. You can find one for Mac OS X @ http://www.apple.com/downloads/
dashboard/calculate_convert/timecodecalculatorwidget.html
Ex. One of my videos has a play length of 1min and 33 secs. That equals 93
frames for the <runtime> tag above.
•
Next, lets edit the categoryFeed.brs file. If you have been following my
directory creating structure, it would be:
C:\rokudev\Roku_LT\videoplayer\examples\source\categoryFeed.brs
The line you must change is in bold. At the top of the document, locate the line the
reads:
conn.UrlPrefix
= “http://rokudev.roku.com/rokudev/examples/videoplayer/xml”
and change it to represent the source for your xml file. Replace rokudev.roku.com
with your domain name. Here is the one I created:
conn.UrlPrefix
•
= "http://www.llmcd.com/rokudev/examples/videoplayer/xml"
Save the document.
Updated 11.17.2013
Step 6- Hosting Provider Upload
•
Upload your files to your hosting provider. Your video file should go to the
root level of the directory you created in step 1. Your two jpeg images
should go in the images directory. The categories.xml and themind.xml files
should go in the xml directory.
Some hosting providers will not play back certain media files. If you are using a
hosted web server like GoDaddy, Host Gator or 1and1 make sure you have the
correct MIME type with a web.config file. Check with your hosting provider about
which MIME types they support.
Here is what my "web.config" file looks like when I use my hosted web server
1and1. I install the “web.config” file in the directory where my video file are:
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".m4v" mimeType="video/m4v" />
<mimeMap fileExtension=".mp4" mimeType="video/mp4" />
<mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
</staticContent>
</system.webServer>
</configuration>
Step 7- Installing Channel on Roku
•
Navigate to the test files directory where you extacted the videoplayer.zip
file from the SDK (where you edited the file “categoryFeed.brs”
On my workstation its : C:\rokudev\Roku_LT\videoplayer
•
Select all the files here with a compression utility (7zip, WinZip and MacOS X
built in compressor works well), and add them to an archive named by the
directory they are in, this should result (in my case) in a file named
videoplayer.zip. In Mac OS X, the built in compression utility will give the
name “archive” by default. Remember to change this to videoplayer.
Updated 11.17.2013
•
Open the Roku development application webpage by typing the IP address of
your Roku. Browse to the zip file you just created, then click on Install. If
its successful, you should see the channel pop up on your Roku home
screen.
Updated 11.17.2013
Click on the Utilities link at top left of the webpage. Create a name for this
application and a version separated by a slash. Paste the password you got from
the genkey command in step 2. Finally, click on the package button.
•
Click on the package link so you can download the package to your
computer, and lets save it in the testing directory. You will see a long
random string of numbers and letters with a file extension of .pkg
Take your channel for a test drive. Check video playback, graphics and channel
descriptions. If everything works, you can go back and customize the channel
more by branding it with your own graphics and logos.
The files you can change live in the images directory inside the videoplayer directory.
Updated 11.17.2013
Step 8- Channel Access
•
This step allows you to give anyone access to your private channel via a
vanity access code.
•
Log into your account @ https://owner.roku.com/Developer. Click on
“Manage My Channels” under My Channels. Under Private Channels, click on
the link “Add Private Channels”.
•
On the first page, accept all the default Channel Store information, and click
“continue”
•
Fill in the information on the Add Private Channel - Describe your channel
page, and select “Create”
•
You can add screenshots if you like, otherwise, click “Go Back”
•
Then, browse to the package file you downloaded from your Roku
development application page, and click “Save”.
Updated 11.17.2013
•
Once you see the “Publish” button enabled, click on it.
Congratulations, you now have a new private channel! Give anyone your vanity
access code to view your channel on their Roku device.
A special thanks to the folks at herofish.com, which this tutorial was inspired by.
This tutorial was produced by Project Resource Exchange, a service created by LLM Consulting and
Design. Find out more at http://pre-online.us and http://www.llmcd.com