There are a few things to take into account before diving into this. The first is that the mruby project is very new and there are a number of gaps in the language support right now but the goal is to support the ISO definition of Ruby at some point. The second thing to know is that I'm talking about embedding Ruby here and not writing iOS apps using Ruby. I'm more interested in the potential of Ruby as a scripting language for something like a game. If you want to look into writing iOS apps using Ruby check out RubyMotion or the MobiRuby project (MobiRuby is based on mruby).

Step one on the path to embedding mruby in an iOS app is getting the library compiled as a framework for XCode. Although the earliest version of mruby had support for building an iOS version that support was removed and there seems to be no current push to add it back. Because of that I created a simple iOS mruby build setup on github. The instructions for using it are included with the project. Once the framework has been created it is easy enough to include in your XCode project just like any other external framework using the "Add Other" option in the "Build Phases" -> "Link Binary With Libraries" section.

There are two ways of using mruby, you can run a script as source or you can pre-compile the source into bytecode first. I'm going to focus on the pre-compiled way because I believe it is the less likely of the two to get an app rejected. This requires that you have the mruby tools available. If you use the build setup I created you can find the tools in the bin directory.

And finally I have created a simple mruby iOS example XCode project that you can use to get started. It includes a pre-compiled version of the framework created with the build setup mentioned before and examples of calling objective-c from Ruby and Ruby from objective-c. The following is a quick overview of the example:

• FooUtil.h/m – This is where all the interaction with mruby happens. It coordinates different parts of the examples as well.
• example.rb – This is the Ruby code for the example and has to be compiled into example.mrb before changes will take place.
• example.mrb – This is the compiled version of example.rb.
• FooData.h/m – This is an example data class that is wrapped using a Ruby class named FooData.

Everything is driven from the FooUtil singleton to make it easier to find each example. There are five methods to understand in FooUtil:

• setDebugBlock – This static method takes a block that will be passed a debug string. This gives an easy way of changing the output of the example.
• loadFromBundle – This is an example of loading a pre-compiled script. It assumes it can find the given filename in the app bundle.
• execute – This is an example of executing a loaded script. It assumes loadFromBundle has been called. Calling this method will cause the Ruby to objective-c examples to execute.
• updateBarLocation – This is an example of executing Ruby code from objective-c.
• cleanup – This method will force a garbage collection. It was added to demonstrate the release of the wrapped FooData class.

The example code doesn't as much error checking as you should have in a real app but it hopefully is enough to get you started. I plan on adding more examples to the github project as features get added to mruby and as I have time. As a reminder, you have to recompile the Ruby code if you make changes or they won't be seen.

The MediaSource API has experimental support in Chrome and can be enabled by using the chrome://flags option. To see it in action you can go to the MediaSource demo page. You can also read a litte more about it here although the spec linked to above is probably a better place to learn about it.

A while ago I created a tool for segmenting H264 video in a Pantos compliant way. When I saw the MediaSource API I wondered how the same type of tool might fit in. The first thing to note is that the Pantos draft describes a complete technique for video streaming while the MediaSource API gives you the tools to stream video and leaves the technique. What follows is a simple technique for segmenting a WebM video in a way that allows standard streaming with the MediaSource API in the same fasion as the Pantos draft technique. While this example will not support variable rate streams it could be expanded to do so and would be the next logical step.

The basics of how the Pantos technique works are simple. A video is broken down into chunks and each of those chunks is downloaded, buffered and played. In older drafts this ment splitting a video file into multiple files but in later drafts support was added for range requests allowing the large file to remain intact. With that understanding there are two major parts that need to be addressed:

• Segmenting a WebM video – This will require some understanding of the container format for WebM and the result will be something like a playlist for the video.
• Javascript to play the video – This will use the playlist created by segmenting the WebM video to drive the MediaSource API.

Segmenting a WebM Video

Before reading on take a second to read the about WebM page. It describes that WebM specifies a video/audio codec and a container format. We are only interested in the format of the container. If you want all the details you can read the WebM container format specs. It is enough to know that the WebM container is a modified version of the Matroska Container format and both containers use EBML to specify their structure.

EBML is basically a binary XML format. There are a number of tools available for readin EBML and for my perposes I found the Python python-ebml implementation to be the easiest to get working.

The MediaSource API wants to be fed chunks of video data in a specific way. First it wants header information and then it wants what are called clusters from the WebM container. Each cluster contains various information but the most likely reason for wanting a cluster as input is that each cluster starts with a keyframe. A keyframe is an important reference point in the video stream and one that gets built on until the next keyframe.

The following code will take as input a WebM file and output a playlist for that file in JSON format. The playlist will contain the offsets of each cluster in the given WebM video and we will use it later to fetch the header and each cluster as chunks and feed those to a video element:

from ebml.schema import EBMLDocument, UnknownElement, CONTAINER, BINARY

def fill_video_info(element, offset, video_info):
  if element.name == 'Duration':
    video_info['duration'] = element.value

  if element.name == 'DisplayWidth':
    video_info['width'] = element.value

  if element.name == 'DisplayHeight':
    video_info['height'] = element.value

  if element.name == 'Cluster':
    video_info['clusters'].append({'offset': offset})

  if element.name == 'Timecode':
    video_info['clusters'][-1]['timecode'] = element.value

  if element.type == CONTAINER:
    for sub_el in element.value:
      fill_video_info(sub_el, offset + element.head_size, video_info)
      offset += sub_el.size

if __name__ == '__main__':
  import sys
  import json
  import os

  mod_name, _, cls_name = 'ebml.schema.matroska.MatroskaDocument'.rpartition('.')
  try:
    doc_mod = __import__(mod_name, fromlist=[cls_name])
    doc_cls = getattr(doc_mod, cls_name)
  except ImportError:
    parser.error('unable to import module %s' % mod_name)
  except AttributeError:
    parser.error('unable to import class %s from %s' % (cls_name, mod_name))

  video_info = {}
  video_info['filename'] = sys.argv[1]
  video_info['total_size'] = os.stat(sys.argv[1]).st_size
  video_info['clusters'] = []

  with open(sys.argv[1], 'rb') as stream:
    doc = doc_cls(stream)
    offset = 0
    for el in doc.roots:
      fill_video_info(el, offset, video_info)
      offset += el.size

  print json.dumps(video_info)

To run the script you will want to save the above script and install the module then do something like this:

git clone https://github.com/jspiros/python-ebml.git
PYTHONPATH=python-ebml python create_playlist.py test.webm

Running the script will result in JSON output that can be piped to a file and used as a playlist.

Javascript to Play the WebM Segmented Playlist

Feeding data to the MediaSource API is done with Javascript. The first thing to do is read in the JSON playlist file created by the Python script when the page is finished loading. To do that I'm using the Snack JS framework, it is micro-framework that has some of the features of JQuery. After reading in the playlist chunks of the WebM file need to be read in with range requests.

A while ago I made created a post about range requests with ajax and that comes in handy here. The main difference between that post and what we need here is that the MediaSource API expects a typed array as input so we need to use XHR2.

The following Javascript code is bare bones. One of the most obvious limitations is that it doesn't have the ability to seek to a portion of the stream, it will only play the stream start to finish or if the player has the content buffered it should allow for seeking in the buffered portion. It demonstrates that the API works and should be a good starting point for experimenting more with multi-rate streaming which is my short term goal.

  /**
   * This fetches a chunk of video using a range request.
   *   video_name - The relative filename of the video to fetch
   *   start_bytes - The start byte of the chunk to fetch
   *   end_bytes - The last byte of the chunk to fetch
   *   is_last - True if this is the last chunk to fetch
   */
  function fetch_chunk(video, video_name, start_bytes, end_bytes, is_last)
  {
    var range_req = 'bytes=' + start_bytes + '-' + end_bytes;

    var xhr = new XMLHttpRequest();
    xhr.open('GET', video_name, true);
    xhr.setRequestHeader("Range", range_req);
    xhr.responseType = 'arraybuffer';

    xhr.onload = function(e)
    {
      video.webkitSourceAppend(new Uint8Array(this.response));

      if(is_last)
      {
        video.webkitSourceEndOfStream(HTMLMediaElement.EOS_NO_ERROR);
      }
    };

    xhr.send();
  }

  /**
   * Fetch the header portion of the video file.
   */
  function fetch_header(video, video_info)
  {
    fetch_chunk(video, video_info.filename, 0, video_info.clusters[0].offset-1, video_info.clusters.length == 1);
  }

  var current_cluster = 0;

  /**
   * Fetch the next cluster of the video file.
   */
  function fetch_next_cluster(video, video_info)
  {
    if(video_info.clusters.length == current_cluster+1)
    {
      fetch_chunk(video, video_info.filename, video_info.clusters[current_cluster].offset, video_info.total_size, true);
    }
    else
    {
      fetch_chunk(video, video_info.filename, video_info.clusters[current_cluster].offset, video_info.clusters[current_cluster+1].offset-1, false);
    }

    current_cluster++;
  }

  /**
   * Enable the video for MediaSource and attach event listeners to drive the fetching of video chunks.
   */
  function video_setup(video_info)
  {
    current_cluster = 0;

    video.src = video.webkitMediaSourceURL;

    video.addEventListener('webkitsourceopen', function(e)
    {
      var video = this;

      fetch_header(video, video_info);
      fetch_next_cluster(video, video_info);
    }, false);

    video.addEventListener('progress', function(e)
    {
      var video = this;

      if( video.webkitSourceState != HTMLMediaElement.SOURCE_ENDED )
      {
        fetch_next_cluster(video, video_info);
      }
    });
  }

  /**
   * When the page is done loading read in the JSON playlist and get the video set up.
   */
  snack.ready(function()
  {
    if (!video.webkitMediaSourceURL)
    {
      alert('webkitMediaSourceURL is not available');
      return;
    }

    snack.request({ method: 'get', url: 'test.json', }, function (err, res)
    {
      if (err)
      {
        alert(err);
        return;
      }

      video_setup(snack.parseJSON(res));
    });
  });

Assuming you have enabled support in Chrome (currently the only browser to support the API) you can see everything in action by checking out my MediaSource API demo page.

I have glossed over a lot of details but the main take aways are that the MediaSource API gives you the interface to build a Pantos streaming system, segment WebM on clusters to feed to the MediaSource API and use XHR2 to fetch the WebM data with range requests. As one last point a lot of the best practices for encoding video for Pantos streaming will work here as well.

If you aren't familiar with range requests head over to the HTTP RFC and check out the range header. Your web server needs to support range requests for this to be useful but most do so that shouldn't be a huge issue. As a bonus you will find that some CDNs support range request as well (Amazon S3 for example).

To show how this works I'll start off by getting the offsets of a text file, then use curl to show the actual request and then put it into an ajax request. Even though I'm using a text file the same thing could be done with a binary file as well. Here are the contents of the file I've called range-test.txt:

First part of the file.

More text here.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Some text after Lorem Ipsum.

End of the file.

Using egrep we can get the offset of each line pretty easy like so:

> egrep -b "\r|\n" range-test.txt
0:First part of the file.
25:More text here.
42:Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
618:Some text after Lorem Ipsum.
660:End of the file.

Quickly verify that the range looks right in isolation using hexdump:

> hexdump -c -s 618 -n 30 range-test.txt
000026a   S   o   m   e       t   e   x   t       a   f   t   e   r
000027a   L   o   r   e   m       I   p   s   u   m   .  \n  \n
0000288

Now we have a sample range so put the text file on your web server and use curl to send the range request headers (note that the hexdump takes an offset and count of bytes while the range header takes an start and end offset):

> curl -H 'Range:bytes=618-647' http://localhost/range-test.txt
Some text after Lorem Ipsum.

Now that it makes sense how this range is used to make a request for part of a file we can move on to doing it with an ajax request. I'm going to use jQuery's ajax function to make this really simple. It has a feature that lets you set headers really easily. The following is all you need:

<html>
  <head>
    <script type="text/javascript" src="jquery-1.7.min.js"></script>
    <script type="text/javascript">
    $(function() {
      $.ajax({
        url: 'range-test.txt',
        headers: {Range: "bytes=618-647"},
        success: function( data ) { $('#results').html( data ); }
      });
    });
    </script>
  </head>
  <body>
    <div id="results"></div>
  </body>
</html>

And that is all there is to it. This could be useful for all kinds of things like displaying just a section of a large log file at a time. This might also be useful in a situation where you want to stream binary data back to the browser a chunk at a time.

To follow along you will need to grab the source for WebP and compile it. The easiest way to do that is to follow the official compiling WebP instructions. After compiling the source you will be able to encode WebP images, later I describe how to build the same source for use with iOS.

Before trying to build libwebp for iOS I did some testing to see just how much of a reduction I could achieve over JPG. I used ImageMagick to convert the source images into JPG and pushed the quality of the JPG down as far as seemed reasonable to reduce the resulting size. I tried a number of combinations but ended up using the following command to convert the JPGs:

convert -quality 75 -resize 1024x680 inputfile.png outputfile.jpg

Here are a couple samples produced using that command:

For WebP I made the quality 90 and encoded the same images with the following command:

cwebp -q 90 -resize 1024 680 inputfile.png -o outputfile.webp

Here are a couple example images produced using that command (at the time of this post these will only be visible using Chrome):

Even with the advantage I was giving the JPG images by compressing them with a lower quality I was able to get a 25% size reduction in the WebP version. Generally the JPG images would have been usable but some ended up with artifacts that would have required them to be re-encoded at a higher quality. The WebP versions ended up looking better in every case.

This was just my quick attempt to verify that it would be worth the effort of using WebP. A more in depth overview of JPG vs WebP can be found in the example gallery.

With that simple test out of the way I created a script that would compile the libwebp source into a framework compatible with the iOS simulators, iPad and iPhone:

SDK=4.3
PLATFORMS="iPhoneSimulator iPhoneOS-V6 iPhoneOS-V7"
DEVELOPER=/Developer
TOPDIR=`pwd`
BUILDDIR="$TOPDIR/tmp"
FINALDIR="$TOPDIR/WebP.framework"
LIBLIST=''

mkdir -p $BUILDDIR
mkdir -p $FINALDIR
mkdir $FINALDIR/Headers/

for PLATFORM in ${PLATFORMS}
do
  if [ "${PLATFORM}" == "iPhoneOS-V7" ]
  then
    PLATFORM="iPhoneOS"
    ARCH="armv7"
  elif [ "${PLATFORM}" == "iPhoneOS-V6" ]
  then
    PLATFORM="iPhoneOS"
    ARCH="armv6"
  else
    ARCH="i386"
  fi

  ROOTDIR="${BUILDDIR}/${PLATFORM}-${SDK}-${ARCH}"
  rm -rf "${ROOTDIR}"
  mkdir -p "${ROOTDIR}"

  export DEVROOT="${DEVELOPER}/Platforms/${PLATFORM}.platform/Developer"
  export SDKROOT="${DEVROOT}/SDKs/${PLATFORM}${SDK}.sdk"
  export CC=${DEVROOT}/usr/bin/gcc
  export LD=${DEVROOT}/usr/bin/ld
  export CPP=${DEVROOT}/usr/bin/cpp
  export CXX=${DEVROOT}/usr/bin/g++
  export AR=${DEVROOT}/usr/bin/ar
  export AS=${DEVROOT}/usr/bin/as
  export NM=${DEVROOT}/usr/bin/nm
  export CXXCPP=$DEVROOT/usr/bin/cpp
  export RANLIB=$DEVROOT/usr/bin/ranlib
  export LDFLAGS="-arch ${ARCH} -pipe -no-cpp-precomp -isysroot ${SDKROOT} -L${ROOTDIR}/lib"
  export CFLAGS="-arch ${ARCH} -pipe -no-cpp-precomp -isysroot ${SDKROOT} -I${ROOTDIR}/include"
  export CXXFLAGS="-arch ${ARCH} -pipe -no-cpp-precomp -isysroot ${SDKROOT} -I${ROOTDIR}/include"

  rm -rf libwebp-0.1.2
  tar xzf libwebp-0.1.2.tar.gz
  cd libwebp-0.1.2

  sh autogen.sh

  ./configure --host=${ARCH}-apple-darwin --prefix=${ROOTDIR} --disable-shared --enable-static
  make
  make install

  LIBLIST="${LIBLIST} ${ROOTDIR}/lib/libwebp.a"
  cp -Rp ${ROOTDIR}/include/webp/* $FINALDIR/Headers/

  cd ..
done

${DEVROOT}/usr/bin/lipo -create $LIBLIST -output $FINALDIR/WebP

rm -rf libwebp-0.1.2
rm -rf ${BUILDDIR}

The script assumes that the source for libwebp is in the same directory as the script is executed from. If you skipped the first part of the post or want to make sure you are using the same version I used then use the following curl command:

curl http://webp.googlecode.com/files/libwebp-0.1.2.tar.gz > libwebp-0.1.2.tar.gz

After you run the script you will have a WebP.framework directory that represents the library. You can use this as a framework in XCode.

Using the library is easy. The following snipit shows how to get the current WebP library version, get the width and height of an image and then read the image into a buffer:

    // Get the current version of the WebP decoder
    int rc = WebPGetDecoderVersion();

    NSLog(@"Version: %d", rc);

    // Get the width and height of the selected WebP image
    int width = 0;
    int height = 0;
    WebPGetInfo([myData bytes], [myData length], &width, &height);

    NSLog(@"Image Width: %d Image Height: %d", width, height); 

    // Decode the WebP image data into a RGBA value array
    uint8_t *data = WebPDecodeRGBA([myData bytes], [myData length], &width, &height);

There is more documentation on the WebP API and I've put together a complete example on Github. If you grab the WebP iOS example from Github you will find the build script as well as the full example. First build the library from a command line then open the example project in XCode. If you don't first build the library before opening the project you will see that the WebP.framework is missing.

At this point you are on your way to having smaller iOS applications. There is at least one drawback at this point and that is speed. Decoding is a little slow and I think this is because the library isn't constructed to take advantage of any hardware acceleration. The next step is to see if it can be sped up by using the accelerate framework.

What I needed was a way to use the closure compiler in an Ant task. The Ant task that comes with the library is good but there wasn't a way for me to integrate it into an existing system that wasn't going to change. After looking around for some example code and not finding any I went into the library's Ant task and figured out how to wire it all up myself.

It isn't that hard to use the compiler library in your own Java code but without a simple example it takes some work to figure out what is needed and what isn't. The following code is just about as bare bones as you can get. It takes a number of JavaScript files and compile them using the medium setting, more about the choice of settings after the code:

import com.google.javascript.jscomp.*;

import java.io.FileWriter;
import java.util.List;
import java.util.ArrayList;
import java.util.logging.Level;

public class Test
{
  public static void main(String[] args) throws Exception
  {
    // These are external JavaScript files you reference but don't want changed
    String externalJavascriptResources[] = {
        "jquery.js",
        "jqueryui.js"
    };
    // These are the files you want optimized
    String primaryJavascriptToCompile[] = {
        "somejavascript.js",
        "otherjavascript.js"
    };
    // This is where the optimized code will end up
    String outputFilename = "combined.min.js";

    com.google.javascript.jscomp.Compiler.setLoggingLevel(Level.INFO);
    com.google.javascript.jscomp.Compiler compiler = new com.google.javascript.jscomp.Compiler();

    CompilerOptions options = new CompilerOptions();
    CompilationLevel.SIMPLE_OPTIMIZATIONS.setOptionsForCompilationLevel(options);

    WarningLevel.VERBOSE.setOptionsForWarningLevel(options);

    List<JSSourceFile> externalJavascriptFiles = new ArrayList<JSSourceFile>();
    for (String filename : externalJavascriptResources)
    {
      externalJavascriptFiles.add(JSSourceFile.fromFile(filename));
    }

    List<JSSourceFile> primaryJavascriptFiles = new ArrayList<JSSourceFile>();
    for (String filename : primaryJavascriptToCompile)
    {
      primaryJavascriptFiles.add(JSSourceFile.fromFile(filename));
    }

    compiler.compile(externalJavascriptFiles, primaryJavascriptFiles, options);

    for (JSError message : compiler.getWarnings())
    {
      System.err.println("Warning message: " + message.toString());
    }

    for (JSError message : compiler.getErrors())
    {
      System.err.println("Error message: " + message.toString());
    }

    FileWriter outputFile = new FileWriter(outputFilename);
    outputFile.write(compiler.toSource());
    outputFile.close();
  }
}

The above code is doing a number of things:

• It takes both external resources you don't want optimized as well as resources you do want optimized that refer to those external resources. You may not need to list external resources depending on what level of optimization you use.
• It combines all the input files that are not external into one output file.
• It compiles the javascript code given to it using the SIMPLE_OPTIMIZATIONS setting.
• It lists any warnings or errors it found while compiling the code.

One of the nice side effects of using the closure compiler is that because it compiles the code it can alert you to errors or potential issues using warnings.

What is listed above is using the middle of the road optimizations. There is a level above SIMPLE_OPTIMIZATIONS that you can set by changing that line in the above code to:

  CompilationLevel.ADVANCED_OPTIMIZATIONS.setOptionsForCompilationLevel(options);

Be aware that the advanced optimizations will do things, renaming your variables and functions to name two, that can break your code. The compiler gives you a way of alerting it to things you don't want changed using externs and exports. Before using the advanced option you should read the advanced options tutorial.

If you do not like seeing all the steps the compiler takes you can set the logging level to QUIET by changing the WarningLevel line to the following:

  WarningLevel.QUIET.setOptionsForWarningLevel(options);

One last note about the compiler is that the closure inspector is a Firebug plugin that will let you see what the original line of code looked like before it was compiled. This can help a lot when something goes wrong.

Here are a list of the major changes:

• The dashboard panel now loads asynchronously so the entire dashboard doesn't block while it is loading
• Made the analytics column in posts and pages load asynchronously so that it doesn't block the loading of the page
• Added support for Google OAuth logins
• Use transient API support with wordpress version 2.8+
• Added ability to support multiple analytics sources

Some other minor changes:

• Stop unlink warnings when caching won't work
• Refactored code so that major parts are split into classes
• Refactored code to better seperate UI code
• Fixed mime type not being sent correctly for admin area javascript file
• Fix bug in wordpress version checking

There seems to be a lot of general documentation on how to do OAuth but there wasn't much about using it for installed apps so what follows is an example using PHP that is basically what went into the plugin update.

It helps to first know the basic steps that will make this work. From the documentation those steps are:

1. Your application gets an unauthorized request token from Google's authorization server.
2. Google asks the user to grant you access to the required data.
3. Your application gets an authorized request token from the authorization server.
4. You exchange the authorized request token for an access token.
5. You use the access token to request data from Google's service access servers.

I will reference these steps in the code that follows.

Before trying this example out grab the OAuth PHP library. The only file that is needed to execute the examples is OAuth.php.

I have split the code into two files that I named phase1.php and phase2.php. In phase1.php the resulting URL would be used to grant access to the given scope (note that I've marked parts of the code that would need to be customized with a "Customize this" comment):

require_once("OAuth.php");

// This is the setup for step 1
// 1. Your application gets an unauthorized request token from Google's authorization server.
$signature_method = new OAuthSignatureMethod_HMAC_SHA1();

$params = array();

// The callback is where the user comes back after authentication
$params['oauth_callback'] = 'http://example.com/phase2.php'; // Customize this

// The scope is what you are asking for access to
$params['scope'] = 'https://www.google.com/analytics/feeds/'; // Customize this

// Setting xoauth_displayname will show the given name on the authentication screen
$params['xoauth_displayname'] = 'My Test App'; // Customize this

// Set up an anonymous oauth consumer
$consumer = new OAuthConsumer('anonymous', 'anonymous', NULL);

// Set up the request for a request token
$req_req = OAuthRequest::from_consumer_and_token($consumer, NULL, 'GET', 'https://www.google.com/accounts/OAuthGetRequestToken', $params);

// Sign the request
$req_req->sign_request($signature_method, $consumer, NULL);

// Set up curl and have it get the token to use for the authenication call
$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $req_req->to_url());

// This tells curl to return the response as one string
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 

// Run curl and grab the output and the return code
// This is the execution of step 1
$return = curl_exec($ch);
$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);

if($http_code == 200)
{
  // If the call was good parse out the response parameters into an array
  $access_params = array();
  $param_pairs = explode('&', $return);
  foreach($param_pairs as $param_pair)
  {
    if (trim($param_pair) == '') { continue; }
    list($key, $value) = explode('=', $param_pair);
    $access_params[$key] = urldecode($value);
  }

  // Print out the authentication URL that needs to be opened in a browser
  echo "Open this link: https://www.google.com/accounts/OAuthAuthorizeToken?oauth_token=" . urlencode($access_params['oauth_token']) . "\n";

  // This is the oauth token secret that is needed for the second part
  echo "\nRemember the folowing value: " . $access_params['oauth_token_secret'] . "\n";

  // This is where the user would perform step 2
  // 2. Google asks the user to grant you access to the required data.
}
else
{
  echo "Error: $http_code and $return\n";
}

The above code performs steps 1 and 2. There are a few notes that are good to know:

• The OAuth consumer is set to "anonymous" here because this is an installed app, that is used again in the second phase.
• There can be multiple scope values, just seperate them with a space.
• Make sure to save the oauth_token_secret value, it is required for the second phase.

At this point the user goes off to authorize the application on Google's system. When they are done they are redirected back to your callback URL specified in phase 1 as oauth_callback. I put the following code in a file named phase2.php (again I've noted places that would need to be customized):

require_once("OAuth.php");

// This is where step 3 comes in, this would be in the callback and would be called
// after the user authenticates.
// 3. Your application gets an authorized request token from the authorization server.
$oauth_verifier = urldecode($_REQUEST['oauth_verifier']);
$oauth_token = urldecode($_REQUEST['oauth_token']);

// The token secret would need to be looked up from the previous step
$ouath_token_secret = ''; // Customize this

// This is where setup for step 4 starts
// 4. You exchange the authorized request token for an access token.
$signature_method = new OAuthSignatureMethod_HMAC_SHA1();

$params = array();

$params['oauth_verifier'] = $oauth_verifier;

// Set up the anonymous consumer again
$consumer = new OAuthConsumer('anonymous', 'anonymous', NULL);

// Use the oauth token and token secret to set up the consumer for the access token
$final_consumer = new OAuthConsumer($oauth_token, $ouath_token_secret);

// Set up the call to get the access token
$acc_req = OAuthRequest::from_consumer_and_token($consumer, $final_consumer, 'GET', 'https://www.google.com/accounts/OAuthGetAccessToken', $params);

$acc_req->sign_request($signature_method, $consumer, $final_consumer);

// Set up curl and have it get the final token and secret
$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $acc_req->to_url());

// This tells curl to return the response as one string
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 

// Run curl and grab the output and the return code
// This is the execution of step 4
$return = curl_exec($ch);
$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);

if($http_code == 200)
{
  // If the call was good parse out the response parameters into an array
  $access_params = array();
  $param_pairs = explode('&', $return);
  foreach($param_pairs as $param_pair)
  {
    if (trim($param_pair) == '') { continue; }
    list($key, $value) = explode('=', $param_pair);
    $access_params[$key] = urldecode($value);
  }

  // Print out the final information needed for access to the service that was in "scope"
  echo "Access info: " . $access_params['oauth_token'] . " and " . $access_params['oauth_token_secret'] . "\n";
}
else
{
  echo "Error: $http_code and $return\n";
}

At this point you have a good oauth_token and oauth_token_secret that would need to be stored securely. These two bits of information allow you to make calls later to services provided under the given scope listed in the initial token request. Here is an example of making a request:

require_once("OAuth.php");

// This is step 5
// 5. You use the access token to request data from Google's service access servers.

$url = 'https://www.google.com/analytics/feeds/accounts/default';

$signature_method = new OAuthSignatureMethod_HMAC_SHA1();

$params = array();

$consumer = new OAuthConsumer('anonymous', 'anonymous', NULL);

// Here the saved oauth_token and oauth_token_secret are used
$token = new OAuthConsumer($saved_oauth_token, $saved_oauth_token_secret);

$oauth_req = OAuthRequest::from_consumer_and_token($consumer, $token, 'GET', $url, $params);

$oauth_req->sign_request($signature_method, $consumer, $token);

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $url);

// Use the oauth request to create the authenication header
curl_setopt($ch, CURLOPT_HTTPHEADER, array($oauth_req->to_header())));

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

$return = curl_exec($ch);
$this->http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);

if($this->http_code == 200)
{
  echo $return;
}
else
{
  echo $return;
}

For a lot more detail check out Google's OAuth documentation. I also found it helpful to use the Google's OAuth playground to test things out.

I also found a handy list of all the define Google OAuth scopes.

I decided to make something that could run anywhere so I created my own AirPlay client called AP4J. I used Java and a pure Java Bonjour implementation called JmDNS so AP4J can run anywhere Java runs.

The current version only has the ability to control an AirPlay device. That means you have to supply a location that has a compatible video (h264 encoded) but once playing you will have control over the video just as you would using the iPad or iPhone. The next step will be to add the ability to directly serve videos instead of only being able to control the playback of videos. My goal will be the ability to run AP4J on my Windows Home Media server where I can have it stream videos to my AppleTV.

I have tested AP4J on Linux, Windows and Mac but only extensively on Linux. I have also tested a number of sites that have compatible videos available, a few of those are listed here:

• http://blip.tv/
• http://www.archives.org/
• http://confreaks.net/

Now for a couple screen shots. This is what you see after starting the server and going to the web interface:

This is what it looks like when a video is playing:

As it turns out EventSource is a newer way of doing browser push currently supported by Chrome, Opera and Safari (mobile Safari as well). There is a good HTML5Rocks post on Server-Sent Events that goes into more detail on the differences of using it over something like WebSockets. One of the differences is that EventSource specially addresses mobile device use with the ability to do a "Connectionless push" through a proxy so the end device can sleep but still receive push notifications.

Before reading on check out my example Mongrel2 ruby handler post if you haven't already. The following examples will be based on the code from that post. I'm also going to use Modernizr to detect support for EventSource so check out my post on using Modernizr to detect browser support as well.

The first thing to do is configure Mongrel2. The following configuration will tell Mongrel2 to serve static content from a directory named "html" and connect the /esupdates path to a ruby handler we will write later (also note that it listens on more than one host, make sure you put your IP in place of the example IP):

root_dir = Dir(base='html/', index_file='index.html', default_ctype='text/plain')

esupdates = Handler(send_spec='tcp://127.0.0.1:9999', send_ident='54c6755b-9628-40a4-9a2d-cc82a816345e',
                    recv_spec='tcp://127.0.0.1:9998', recv_ident='')

routes = {
    '/esupdates': esupdates,
    '/': root_dir
}

main = Server(
    uuid="2f62bd5-9e59-49cd-993c-3b6013c28f05",
    access_log="/logs/access.log",
    error_log="/logs/error.log",
    chroot="./",
    pid_file="/run/mongrel2.pid",
    default_host="localhost",
    name="main",
    port=6767,
    hosts=[ Host(name="192.168.1.1", routes=routes)
            Host(name="localhost", routes=routes) ]
)

settings = {"zeromq.threads": 1}

servers = [main]

The next step is to create the page that will set up the EventSource connection and display any push messages. In this example I'm using a modified version of Modernizr to detect EventSource support but you could do the test by hand or assume the user has support. The current version of Modernizr doesn't support EventSource yet but you can grab my fork of Modernizr where I have added it.

<!doctype html>
<html style="no-js">
  <head>
    <title>EventSource Test</title>

    <style type="text/css" media="screen">
      div.esno, div.esyes { display: none }
      .no-eventsource div.esno { display: block }
      .eventsource div.esyes { display: block }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script src="modernizr-min.js" type="text/javascript"></script>
    <script type="text/javascript">
      function startUpdates()
      {
        var source = new EventSource('/esupdates');
        source.onmessage = function (event)
        {
          $("#events").innerHTML += event.data + '<br/>';
        };

        source.onerror = function (event)
        {
          $("#events").innerHTML += 'error<br/>';
        };

        source.onopen = function (event)
        {
           $("#events").innerHTML += 'open<br/>';
        };
      }

      $(document).ready(function()
      {
        if (Modernizr.eventsource)
        {
          setTimeout(startUpdates, 10);
        }
      });
    </script>
  </head>
  <body>

    <div class="esno">
      Your browser does not support EventSource.
    </div>

    <div class="esyes">
      Messages:<br/>
      <div id="events"></div>
    </div>

  </body>
</html>

The above creates the EventSource connection to the /esupdates URL and when any event comes in it appends that event to the div with the id of "events". This and the Modernizr javascript need to go in the "html" directory.

And last comes the handler code. I have modified the ruby handler example from my previous post by adding a new ZMQ queue called "eventsource_queue" as well as a beacon thread that pushes a message to the "eventsource_queue" every 5 seconds. Messages coming in on the "eventsource_queue" are sent to every connected client:

require 'zmq'
require 'json'

handler_thread = Thread.new do
  handler_ctx = ZMQ::Context.new(1)

  receive_queue = handler_ctx.socket(ZMQ::PULL)
  receive_queue.connect("tcp://127.0.0.1:9999")

  response_publisher = handler_ctx.socket(ZMQ::PUB)
  response_publisher.connect("tcp://127.0.0.1:9998")
  response_publisher.setsockopt(ZMQ::IDENTITY, "82209006-86FF-4982-B5EA-D1E29E55D481")

  stop_queue = handler_ctx.socket(ZMQ::PULL)
  stop_queue.connect("ipc://shutdown_queue")

  eventsource_queue = handler_ctx.socket(ZMQ::PULL)
  eventsource_queue.connect("ipc://eventsource_queue")

  connections = []

  stopped = false
  until stopped do
    selected_queue = ZMQ.select([receive_queue, stop_queue, eventsource_queue])
    if selected_queue[0][0] == stop_queue # Anything on the stop_queue ends processing
      stop_queue.close
      receive_queue.close
      eventsource_queue.close
      response_publisher.close
      handler_ctx.close
      stopped = true
    elsif selected_queue[0][0] == eventsource_queue # A message that goes out to all clients
      next if connections.size == 0 

      # The following must be the send_ident value used in the Handler config file entry
      sender_uuid = '54c6755b-9628-40a4-9a2d-cc82a816345e' 

      es_message = eventsource_queue.recv(0)

      # Note: This can only handle 128 connections without modification
      client_str = connections.join(' ')

      response_value = "#{sender_uuid} #{client_str.length}:#{client_str}, #{es_message}"
      response_publisher.send(response_value, 0)
    else
      # Request comes in as "UUID ID PATH SIZE:HEADERS,SIZE:BODY,"
      sender_uuid, client_id, request_path, request_message = receive_queue.recv(0).split(' ', 4)
      len, rest = request_message.split(':', 2)
      headers = JSON.parse(rest[0...len.to_i])
      len, rest = rest[(len.to_i+1)..-1].split(':', 2)
      body = rest[0...len.to_i]

      if headers['METHOD'] == 'JSON' and JSON.parse(body)['type'] == 'disconnect'
        connections.delete(client_id) # A client has disconnected, remove them from the list
        next
      end

      # Respond with the opening EventSource information
      connections << client_id

      headers = {}
      headers['Content-Type'] = 'text/event-stream'
      headers['Expires'] = 'Fri, 01 Jan 1990 00:00:00 GMT'
      headers['Cache-Control'] = 'no-cache, no-store, max-age=0, must-revalidate'
      headers['Pragma'] = 'no-cache'
      headers_s = headers.map{|k, v| "%s: %s" % [k,v]}.join("\r\n")

      content_body = ": time stream\nretry: 5000\n\n";

      response_value = "#{sender_uuid} #{client_id.to_s.length}:#{client_id}, HTTP/1.1 200 OK\r\n#{headers_s}\r\n\r\n#{content_body}"
      response_publisher.send(response_value, 0)
    end
  end
end

# This thread sends out a message every 5 seconds to all connected clients
beacon_thread = Thread.new do
  beacon_ctx = ZMQ::Context.new(1)
  eventsource_queue = beacon_ctx.socket(ZMQ::PUSH)
  eventsource_queue.bind("ipc://eventsource_queue")

  index = 1
  loop do
    eventsource_queue.send("id: #{index}\r\ndata: Timestamp #{Time.now}\r\n\r\n")
    sleep(5)
    index = index + 1
  end
end

ctx = ZMQ::Context.new(1)
stop_push_queue = ctx.socket(ZMQ::PUSH)
trap('INT') do # Send a message to shutdown on SIGINT
  stop_push_queue.bind("ipc://shutdown_queue")
  stop_push_queue.send("shutdown")
end

handler_thread.join

beacon_thread.kill
beacon_thread.join

stop_push_queue.close

There is a limitation in the above of 128 client connections at one time. This is something that could be fixed by splitting the set of connections into subsets of 128 each and sending each subset a message. I left that out to try to reduce the complexity of this example.

Although this example shows a single event going out to every client there is no need to limit it to just that. You could easily do the same thing for subsets of the full set of clients.

As a next step it might be interesting to see how well this setup could handle the C10k problem or even the C500k problem.

Before getting started with the handler itself it is important to note that Mongrel2 uses ZeroMQ to communicate with handlers. At least some idea of how ZeroMQ works is needed to follow along with the handler code so take a few minutes to read over the manual. After looking at the manual take a look at the ZeroMQ Ruby bindings. You may even want to take a few minutes and check out some examples using ZeroMQ with Ruby.

The first significant difference between the following example handler and the two Ruby handlers list above is that it uses the ZeroMQ Ruby bindings. The other two use the FFI RZMQ bindings. I decided to use the ZeroMQ Ruby bindings after reading the "FEATURES/PROBLEMS" section of the FFI RZMQ bindings. The main drawback in going this route is that the example handler won't run under JRuby. After installing the ZeroMQ library you can use the following command to install the correct gem needed for the handler:

gem install zmq

You will also need the ZeroMQ library installed before installing Mongrel2.

Before starting on the handler it is important to understand how Mongrel2 is configured. A good place to start is either the Mongrel2 quickstart guide or the Mongrel2 manual. The example handler was tested using mongrel2-1.4 and the following Mongrel2 configuration will work with the example handler:

demo = Handler(send_spec='tcp://127.0.0.1:9999', send_ident='54c6755b-9628-40a4-9a2d-cc82a816345e',
               recv_spec='tcp://127.0.0.1:9998', recv_ident='')

routes = {
    '/demo': demo
}

main = Server(
    uuid="2f62bd5-9e59-49cd-993c-3b6013c28f05",
    access_log="/logs/access.log",
    error_log="/logs/error.log",
    chroot="./",
    pid_file="/run/mongrel2.pid",
    default_host="localhost",
    name="main",
    port=6767,
    hosts=[ Host(name="localhost", routes=routes) ]
)

settings = {"zeromq.threads": 1}

servers = [main]

Assuming you have Mongrel2 installed and working you can copy the above into a file called m2.conf and then run the following command:

m2sh load --db config.sqlite -config m2.conf

This configuration sets up a route at /demo that maps to the example handler. The handler is expected to use TCP to communicate with Mongrel2 on localhost ports 9999 and 9998.

With all that out of the way it is finally time for the handler. The following is the outer shell of the handler. It creates a thread that will handle the incoming messages and the response. It then sets up an interrupt trap on the main thread and waits for the handler thread to end:

handler_thread = Thread.new do

# This is where the zeromq interface will go

  stopped = false
  until stopped do

# This is where messages will be processed

  end
end

trap('INT') do # Send a message to shutdown on SIGINT

# This is where the interrupt signal will be handled

end

handler_thread.join

With the shell in place the next part to go in is the communication with Mongrel2. Here we open two ZeroMQ sockets to Mongrel2. The first is a "PULL" socket that will have incoming request messages. The second is a "PUB" socket that will be used to push responses back. The incoming messages are parsed and the response is sent back containing "Hello world!":

require 'zmq'
require 'json'

handler_thread = Thread.new do
  handler_ctx = ZMQ::Context.new(1)

  receive_queue = handler_ctx.socket(ZMQ::PULL)
  receive_queue.connect("tcp://127.0.0.1:9999")

  response_publisher = handler_ctx.socket(ZMQ::PUB)
  response_publisher.connect("tcp://127.0.0.1:9998")
  response_publisher.setsockopt(ZMQ::IDENTITY, "82209006-86FF-4982-B5EA-D1E29E55D481")

  stopped = false
  until stopped do
    # Request comes in as "UUID ID PATH SIZE:HEADERS,SIZE:BODY,"
    sender_uuid, client_id, request_path, request_message = receive_queue.recv(0).split(' ', 4)
    len, rest = request_message.split(':', 2)
    headers = JSON.parse(rest[0...len.to_i])
    len, rest = rest[(len.to_i+1)..-1].split(':', 2)
    body = rest[0...len.to_i]

    if headers['METHOD'] == 'JSON' and JSON.parse(body)['type'] == 'disconnect'
      next # A client has disconnected, might want to do something here...
    end

    # Response goes out as "UUID SIZE:ID ID ID, BODY"
    content_body = "Hello world!"
    response_value = "#{sender_uuid} 1:#{client_id}, HTTP/1.1 200 OK\r\nContent-Length: #{content_body.size}\r\n\r\n#{content_body}"
    response_publisher.send(response_value, 0)
  end
end

trap('INT') do # Send a message to shutdown on SIGINT

# This is where the interrupt signal will be handled

end

handler_thread.join

At this point the handler will work just fine but it won't die without a kill -9. Fixing that is where the trap('INT') and handler thread come in to play. The following version is the final version and uses a third internal queue called the "shutdown_queue" to signal that the handler thread should stop. One change you should note from the above example is the use of the select call that watches multiple sockets:

require 'zmq'
require 'json'

handler_thread = Thread.new do
  handler_ctx = ZMQ::Context.new(1)

  receive_queue = handler_ctx.socket(ZMQ::PULL)
  receive_queue.connect("tcp://127.0.0.1:9999")

  response_publisher = handler_ctx.socket(ZMQ::PUB)
  response_publisher.connect("tcp://127.0.0.1:9998")
  response_publisher.setsockopt(ZMQ::IDENTITY, "82209006-86FF-4982-B5EA-D1E29E55D481")

  stop_queue = handler_ctx.socket(ZMQ::PULL)
  stop_queue.connect("ipc://shutdown_queue")

  stopped = false
  until stopped do
    selected_queue = ZMQ.select([receive_queue, stop_queue])
    if selected_queue[0][0] == stop_queue # Anything on the stop_queue ends processing
      stop_queue.close
      receive_queue.close
      response_publisher.close
      handler_ctx.close
      stopped = true
    else
      # Request comes in as "UUID ID PATH SIZE:HEADERS,SIZE:BODY,"
      sender_uuid, client_id, request_path, request_message = receive_queue.recv(0).split(' ', 4)
      len, rest = request_message.split(':', 2)
      headers = JSON.parse(rest[0...len.to_i])
      len, rest = rest[(len.to_i+1)..-1].split(':', 2)
      body = rest[0...len.to_i]

      if headers['METHOD'] == 'JSON' and JSON.parse(body)['type'] == 'disconnect'
        next # A client has disconnected, might want to do something here...
      end

      # Response goes out as "UUID SIZE:ID ID ID, BODY"
      content_body = "Hello world!"
      response_value = "#{sender_uuid} 1:#{client_id}, HTTP/1.1 200 OK\r\nContent-Length: #{content_body.size}\r\n\r\n#{content_body}"
      response_publisher.send(response_value, 0)
    end
  end
end

ctx = ZMQ::Context.new(1)
stop_push_queue = ctx.socket(ZMQ::PUSH)
trap('INT') do # Send a message to shutdown on SIGINT
  stop_push_queue.bind("ipc://shutdown_queue")
  stop_push_queue.send("shutdown")
end

handler_thread.join

stop_push_queue.close

This is the bare minimum handler and doesn't use all the features that Mongrel2 has. One of the most interesting features of Mongrel2 is the ability to have the handler respond to multiple client requests with a single response message. I hope to use this feature in the near future to test out server side event push with Javascript using EventSource.