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
© Copyright 2024