Making Roku development / testing more bearable
Roku development and testing can be a pain in the butt considering the way you’re supposed to build and upload packages, the way you have to view it, and debugging errors.
There are a few things that I’ve done to streamline these processes that makes it feel much more comfortable and similar to the instant gratification you get from web development with a browser + debug console.
- ) Writing a build / deployment script
- ) Having a debug script
- ) Streaming your Roku display to your computer
I’ll quickly run through each section and explain the requirements. This article won’t get too deep into my particular brand of architecture for Roku apps, but it will touch on it briefly in the build section coming up next.
Writing a build / deployment script
First thing I like to do is have a tools folder that includes environment variables and various scripts we can run. My tools folder looks like this:
The .build-env file contains variables related to your Roku device and project such as IP, port, passwords, etc. It should look something like this.
The .build-env-override file is the same as .build-env but the variables in it will override the regular file. This is incase you want to commit a baseline env file to a repo but keep a local one with your particular IP that doesn’t get overwritten by changes.
The build.sh is the real meat and potatoes here. Check out the source. This assumes that your machine has zip and curl installed that can be accessed from Terminal (on Mac). You should have a directory structure parallel to /tools that includes: /bin and /src.
Tools is where your bash scripts exist.
Bin is where source packages are zipped to.
Src is where your source code exists.
The build.sh script will combine your app (themes/myapp) with general source, components (Scene Graph), and global items. This structure is good if you’re making multiple themed apps and also for separating core structure from GUI/visually specific code.
You can hook the build command to Sublime Text 2 by creating a Tools->Build System->New Build System and adding this code to it. For reference, the build system files end up living in: /Users/*your user*/Library/Application Support/Sublime Text 2/Packages/User/Roku-Build.sublime-build
Then you can select that as your default Build System and press cmd+B to build your project. What will happen is it should create your project and deploy it to your Roku device after running build either by shortcut or by bash sh ./tools/build.sh.
When you’re working on your Roku project, you can run the build via key command easily and see the results quickly appear on whatever display your Roku is connected to. If you follow Step 3, you can get the display directly on your computer instead of on your TV.
Having a debug script
Debugging your application is the most important part of writing the app obviously. This script is really easy to add and is basically just a shortcut that follows suit of the build script. Here’s the source.
You run it by bash sh ./tools/debug.sh in a new terminal window and let it run. It simply runs a telnet command to the port and IP that are defined in your configs. Let this run in a Terminal window and you can watch for your logs and crashes.
Streaming your Roku display to your computer
This section is the real reason why I even started writing this article. The previous two sections are nice and all, but I lightly covered them because they’re a bit dependent on how you prefer to architect your applications. There’s a whole bunch more to write about that, and I’d love to cover it, but not in this article.
Here’s why I’m writing this section: Roku has an HDMI output which requires a device with HDMI input. What devices accept an HDMI input? Televisions and Game (TV) Capture cards.
I don’t like consuming an entire television and having to be near one while I’m working on Roku projects. Sometimes I like to have the ballgame or a movie on instead of a silent Roku stream that only updates while testing builds. My ideal setup is similar to the web development setup: A code editor on one virtual desktop and a browser+debug panel on another virtual desktop.
There’s a little bit of setup here and hardware to buy, so it’s not really something you’ll do casually. This is more-so if you’re doing a real job or enough Roku development that makes manual builds/TV consumption annoying.
Requirements:
- A home computer/server running Windows*
- VirtualBox running Linux/Ubuntu (on your server)
- NGINX compiled with RTMP (on the Ubuntu virtual server)
- HDMI Splitter (to circumvent HDCP)
- Elgato Game Capture Card (plugged into your server)
- Elgato Game Capture Software (installed to your server)
- VLC Player or FFPLAY (installed to your regular machine)
My setup at home is a:
Windows 10
12 GB RAM
i5 @ 3.20 ghz
512 SSD drive + 1 TB HDDI prefer the Windows machine because I get the advantages of Windows specific software/gaming while also running Virtual linux machines. It also allows us to easily use the Elgato Game Capture software.
*You could use a machine other than Windows, but you’ll need to either find something that can run the capture software and pipe it to RTMP, like FFMPEG (or some other software)
Hardware-wise, wire the Roku HDMI into the HDMI splitter, then run that HDMI into the Elgato Game Capture card input. This should bypass the HDCP (High-bandwidth Digital Content Protection) on whatever you’re watching through the Roku.
Download the latest VirtualBox and Ubuntu Server image. Setup a new VirtualBox Ubuntu 64bit however you want, here are some example instructions. Make sure to enable Bridge Networking Adapter in VirtualBox settings so you can access your web server from outside the box.
Next you’ll want to custom install NGINX with RTMP (real-time messaging protocol) on the Ubuntu server. You should follow these steps:
# Install basic stuff
sudo apt-get install build-essential libpcre3 libpcre3-dev libssl-dev unzip# Download NGINX
wget http://nginx.org/download/nginx-1.9.15.tar.gz# Download NGINX RTMP
wget https://github.com/arut/nginx-rtmp-module/archive/master.zip# Deflate NGINX
tar -zxvf nginx-1.9.15.tar.gz# Unpack RTMP
unzip master.zip# Move into NGINX
cd nginx-1.9.15# Configure, Make, Install
./configure --with-http_ssl_module --add-module=../nginx-rtmp-module-master
make
sudo make install# Edit the nginx.conf file to include the following RTMP settings
sudo vi /usr/local/nginx/conf/nginx.conf rtmp {
server {
listen 1935;
chunk_size 4096; application roku {
live on;
record off;
}
}
}# Restart NGINX after adding configurations above
sudo /usr/local/nginx/sbin/nginx -s stop
sudo /usr/local/nginx/sbin/nginx# Get your local IP
ifconfig
After that’s all setup, you should be able to access your RTMP server at:
rtmp://*ip from ifconfig*/roku
So it’d look something like:
rtmp://192.168.1.228/roku
Now you successfully have an RTMP server locally that can broadcast your Roku display.
You’ll want to use that RTMP string when setting up your server in the Elgato Game Capture software and then press the big green “Stream” button. This should start broadcasting the captured Roku screen to your Ubuntu RTMP server. You’ll see a red “ON-AIR” flag next to the Live Streaming panel if it’s working.
On your regular computer, open up VLC and go to File->Open Network and add your RTMP URL to connect. It should start showing your Roku display live through your computer.
An alternative to using VLC is to use ffplay in this manner:
ffplay -fflags nobuffer rtmp://192.168.1.228/roku -loglevel verboseIf you’d like to add a local remote control, there are a few options:
You can now use your code editor to package + build your application automatically, debug it live, view the display, and control the remote all through one computer that doesn’t require your TV to be on.
