Roku Development

Common Media for Roku Development


When anyone is getting started with Roku development, they soon find that there are a variety of media files involved.  While these images and videos can be anything the author wishes, there are some formatting restrictions.  My goal is to outline the basics of media formatting in this post.

Most of this information has come from the Roku documentation, trial-and-error, and other internet sources.

Video

There are two video types the Roku supports:  standard definition (SD) and high definition (HD).

SD video:  4:3 aspect ratio, 480i, 720 x 480 px
HD video:  16:9 aspect ratio, 720p, 1280 x 720 px
HD video (high end units):  1080p, 1920 x 1080 px

The video format supported by Roku is H.264.  There are a ton of different encoding specifics you can use, I would say if you are going to do anything out of the norm, refer to their Encoding Guide available on their developer page.

Roku recommends that each video is provided with a BIF file (Base Index Frames).  Basically these are the individual frames that appears when a viewer is fast forwarding or rewinding a video.  It is just nice to have for stored video.  I will cover this in a future post since there are several things that are involved with this process.

General Image Information

It is really helpful to have a professional image editor when setting up images.  While I am sure the lower end editors that came with a system might work, it just saves time and energy to have software that works with you (not against you.)

This comes from the Roku document “Artwork Guidelines”:

  • Set RGB color values between 16 and 235.  You can do this by adding a level adjustment layer over your image.
  • Your square image should be 100% filled.  This means no rounded corners, borders, or any transparency.
  • It is best to use PNG files for your image format.  You can use JPEG if you want.
  • Don’t use supper bright colors.  TV’s can sometimes make these colors look awful.  You might need to use trial-and-error on this one.
  • Cool colors (i.e. blues) look better than warm colors (i.e. reds).
  • Use thick lines in images.  Thin lines can flicker on some TV’s.

Their artwork guide also describes the process of setting non-square pixels for any SD images.  Because older SD televisions did not have a perfectly square pixel, it can make uncorrected images look squashed.  The non-square ratio is .91.  Photoshop can actually set an image to this non-square ratio and convert any image copied into it.

Common Images

I will not be able to have an exhaustive list of images needed for channel development, but hopefully I will capture the major ones.  Roku is a very standardized system.  This works well for the end-user (they do not have to relearn each channel’s interface) and good for us as developers since we do not have to re-invent the wheel with each channel we develop.

Overhang Logo – channel branded band at the top of the screen.  The image should be your channel logo.  While there is no required width or height, it should fit into the designated height of the overhang.  You should also alpha-blend (transparency) it to the background (meaning this image will need to be a PNG file.)
SD:  83 – 92 pixels height
HD:  124 – 138 px max height

Overhang Background
SD:  720 x 110 px
HD:  1280 x 165 px

Channel Store Image
SD:  214 x 144 px
HD:  290 x 218 px

Main Channel Menu – This is the image that appears in the main channel menu with the other channels.  There are two sizes: when the channel is in focus (or selected) and when it is not in focus or on the side.
Focus SD:  248 x 140 px
Focus HD:  336 x 210 px
Side SD:  80 x 46 px
Side HD:  108 x 69 px

Content Images – These are images that represent a specific piece of content.  This could be a frame from a video, a poster or artwork for a video, or album artwork.  The Roku will resize a larger image to fit into the designated space.  Just remember that SD still needs to be saved with non-squared pixels.  Use the cheatsheet links below to find the specific item you wish to create.

Cheatsheets

Below are a couple of links with more image size information in “cheatsheet” form.

Roku Forums Post
http://forums.roku.com/viewtopic.php?f=34&t=50854&p=345011#p344967

IRC
http://www.instantrokuchannel.com/help/poster_styles_and_display_modes

  • Hi

    Im just a basic user of Roku with fair IT knowledge. There are some television channels which broadcast live telecast on internet as well. I want to see those channels on Roku without using tab or mobile app for streaming, is it possible? I know there might be copyright issues but I suppose I can arrange for specific permissions from website owner.


    • @saleem Aside from the copyright issues, the technical aspect would be that the video stream needs to be in the right format (H.264) and you need a way to get the specific streaming link on the Roku channel (XML or web service.)


  • rp23rp23

    Author Reply

    @trey: Thanks for this post; it is a convenient reference to have that information on a single page.

    @saleem: The ‘Channel PEAR’ app can usually do this on Roku, if you know the stream URL. But Roku does not support RTSP/RTMP streams. A small fanless PC running OpenELEC Linux+Kodi (or Android+Kodi) is much better than Roku because it supports all media types and various live TV guide apps. The NowhereTV Roku app also has some live channels.


  • Great, informative posts.

    Have you experimented with utilizing dynamic streaming formats for VOD? Perhaps having Roku read from a playlist to dynamically change between resolutions when bandwidth may be at a premium. Any provisions or experimentations with that? Thanks!


Leave a Reply to Michael
Cancel Reply