Professional Documents
Culture Documents
2013
• 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 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:
In Mac OS X, you can use the Terminal app in the Utilities folder.
• 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:
abstractcircles_24fps.mp4
sd_hctv.jpg
hd_hctv.jpg
• 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.
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.
<!-- 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" add the sd
sd_img="http://www.llmcd.com/rokudev/examples/videoplayer/images/sd_HCTV.jpg" and hd
hd_img="http://www.llmcd.com/rokudev/examples/videoplayer/images/hd_HCTV.jpg"> images you
<categoryLeaf title="AWS URL Test" description="" feed="http://www.llmcd.com/
resized here.
rokudev/examples/videoplayer/xml/themind.xml"/>
</category>
</categories>
• 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
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"
• 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>
• Navigate to the test files directory where you extacted the videoplayer.zip
file from the SDK (where you edited the file “categoryFeed.brs”
• 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
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
• This step allows you to give anyone access to your private channel via a
vanity access code.
• 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
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