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.

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

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:

For reference we are able to share the mac mini by taking advantage of fast user switching for more information see this guide on using Multiple Desktop Sessions on Mac OS X.

The VNC part is pretty easy once you have the multiple desktop sessions working. I've been doing development on a linux box that has two monitors connected so I will open the desktop in one window and all the non-mac stuff in the other. After using the VNC desktop like that for a while I started to get annoyed by the window decorations so I looked to see what I could do to remove them and that is when I ran into Devil's Pie.

Devil's Pie runs as an application in the background and watches for window events that you set up in a configuration file. When it sees the events it can do all kinds of fancy things to the window like remove decorations and set position. It turns out there isn't a lot of documentation on the configuration language but I did find a configuration language reference, a gnome configuration file editor that kind of works depending on what you need it to do, a decent reference, some configuration examples, and best of all an example of how to remove window effects. With all that I was able to cobble together the following configuration file:

This says to undecorate, maximize, and set the geometry of any window that contains the value "VNC:". The undecorate will strip the title bar and any border from the window, the maximize does what it says to the window, and the geometry in my case puts the window on the right hand screen. I tweaked the background for my account in OS X and the resulting combination of it all looks like this:

(Click the image to see a larger version)

So now I have what feels like an OS X box integrated right into my normal desktop.

I started digging a little more to see just how effective a single drive wipe might be and found the old wisdom in this article: Secure Deletion of Data from Magnetic and Solid-State Memory. Scanning over this older article I noticed that it had been updated with a response to the latest article on the effectiveness overwriting a drive with a single pass random data. After reading through the articles I decided that overwriting was good enough. I figure if it doesn't completely destroy the data it will make it hard enough to not be worth recovering.

The first step I took was to get a Knoppix live CD. Doing this let me remove data on any drive that I could connect to the PC. The next step was to run the shred command on each disk that I wanted to destroy (shred happens to be on the Knoppix live CD):

The options I used have the following meaning:

z – zero the drive once the random passes are done
v – verbose, shows the progress
n – number of passes to make writing random data

You can have shred make as many passes as you want and the default is 25 passes as described in Secure Deletion of Data from Magnetic and Solid-State Memory. Depending on how fast and how large the drive is this command can take a really long time to run. I decided that 3 passes would be good enough for me. I will still probably hold on to most of the disks in question just in case I want to use them later but I now don't feel like I can't toss them if I no longer need them.

My first attempt was to use this large international timezone map, this wikipedia map or the list of US states by time zone and then trace and outline over the states. This turned out to be a non-starter because the maps aren't detailed enough and the list of states doesn't give you enough information.

I figured I would end up looking for ESRI shape files at some point and that is where I turned next. An initial google search got me to a post that led to a link to what should have been a set of shape files. Of course the link was dead so I turned to archive.org and found that the archive was incomplete.

I reverted back to looking for another source and found a set of shapes that ended up being just a bunch of squares. At this point I had gone over a lot of random links that didn't get me anything and I was about to give up for good when I finally found the USGS atlas site's time zone data. This was the jackpot, not only do they have time zone shapefiles but they have a large number of other shapefiles that could come in handy some day. This quest has made it apparent to me that the government doesn't do a great job of getting their data found.

One helpful tool in my shapefile search was ESRI's free Arc Explorer. It was a quick way to validate the shapefiles where or where not what I was looking for before landing on a set of files that would work.

Now that I had a valid set of time zone shapes I created a simple java application using geotools to read the files in and generate a resulting map graphic that I could overlay in the project. The shapefiles are easily converted to lat/lon polygons so using this data to overlay on something like a google map would be even easier.

With this level of customization you can do things like write your own DNS black list, track who is making DNS requests, give out IP addresses based on a servers availability or use geographic information to return a different IP.

The following is an overview of how to set up your own PowerDNS piped backend process. To start out it may help to read the overview of the PowerDNS backend.

Here is an example program that is run directly by PowerDNS using pipes:

I found that for some reason PowerDNS didn't want to run the java command directly so I copied that class to /tmp and wrapped the command in a small shell script like this to see if that would fix the problem:

In the configuration file I then added:

This works fine but PowerDNS spawns multiple backend processes to run the piped application and with java that seemed like a bad idea since it would create an entire JVM instance each time. So I decided to modify their sample perl program to send the requests to a long running java background process that would then just use threads.

Here is the code for the threaded java server modified from the above pipe example:

In the config file I replaced the above entries with:

That is all there is to it. So far this is the easiest way I have found of passing requests on to an application. The configuration for PowerDNS also allows you to force a request to the backend with every query eliminating the internal cache. For me that was a needed feature since every request could potentially change from second to second and the latest IP would need to be given out. I found that there are a lot of options for small tweaks like this that are probably on the fringe of what 99% of users need but are very handy to be able to change when you need to change them.

You will want to download Inkscape first. They have binaries for Linux, Windows and Mac OS X so it should be easy enough to get it installed. After installing Inkscape it is a good idea to browse their tutorials via the help->tutorials menu.

1. Find a good color scheme

This is one of the most important things you need to do. You don't want the boring black and white diagrams, you want something that has a little color to it. You can use a color picker or you can check out colourlovers.com where people vote on different schemes. I like colourlovers.com because they take items like fruit baskets and convert those into schemes.

I'm using the following color scheme for the examples here:

2. Use all of the space

Don't be afraid to use the sides of the screen as a scratch pad. This comes in handy when you want to create smaller images to use in the main drawing area. When you are ready to export you can export just the "page" and you won't see the outside area in the final result.

3. Learn the hot keys

Learning the hot keys will speed up your drawing. The following hot keys are the ones I use the most:

• group – Ctrl-G
• un-group – Ctrl-Shift-G
• create square – F4
• create circle – F5
• create polygons – *
• transform – F1

4. Use zoom to work close in then zoom out and scale

I use the zoom function to find a blank area in the "scratch pad" when I want to assemble a shape that may require fine tuning. Since this is a vector drawing it is easy to resize the item later and place it in the correct place after returning to the normal zoom.

5. Learn how to using masking to make simple shapes

You can build complex shapes using different simple shapes with path set operations (see the path menu and the advanced tutorial). Here is an example of what a difference operation can create:

First draw a square:

Then draw a circle:

Then put the circle over the square:

Now highlight both the circle and the square:

And finally hit Ctrl–:

6. Don't use the connectors tool

I started out trying to use the connectors tool to connect the objects. I found that the tool didn't work very well because the connections don't lay themselves out. If you really want any type of bend you are out of luck. They do bend when you click the layout button but they are almost always too close to the objects.

I found that it wasn't that hard to just use the polygon tool to draw the lines after I finished laying out the objects. When using the polygon tool don't add the end markers to the lines however because changing the color of the lines doesn't change the color of the markers (see step #7). I've also found that adjusting the transparency of the lines makes for a better look.

7. Create your own markers

As I said in step 6 you will want to create your own markers. For one the attributes of a line don't carry over to the marker so you need them to be separate objects. After you create your marker zoom to the end of the line to do the alignment. I found that it isn't
that hard to align the markers once you have them created. Then use the group function to group the markers with the lines.

8. Overlay text on a color to go over lines.

The easiest way I have found to overlay the text on the lines is to first create a box the same color as the background of the drawing. After you create the box you will need to force it down using the button. Now that you have a box create your text and lay it over the box. Adjust the size of the box so the entire text is inside of it and then group the box and the text together as one unit. Now you can just place the resulting unit over the line.

9. Outline your objects

Outlining your objects seems to make them pop a little more. I also reduce the transparency a little to allow any text on top of the object to stand out. You will want to consult your color scheme to figure out what two colors to use for the fill and outline.

10. Import SVG graphics

I think if I had a pen tablet I could probably draw some more complicated objects but there is no way I could draw everything I might need. Luckily there are a number of sources you can use to get SVG graphics. A number of places sell their art in SVG format and there are a few open source or free sources of clip art/icons. The source I have been using is openclipart.org (one note on this site is that they are moving to new equipment and I had to use archive.org to download the latest open source clipart archive). Another option is to convert a raster image into SVG and then import it that way. You can then use free icons like the famfamfam icons in your diagrams. Although converting to SVG this way works it is best to find images that are sourced directly to SVG from their drawing.

Bonus Tip – How to add drop shadows

Someone asked if you could do drop shadows and it looks like you can by using the Gaussian Blur. This can make things look better too but you can't use transparent objects when you do this. After redoing the example I decided I liked the drop shadows better so I've included it here.

The first thing is to copy the object you want to have the drop shadow for:

Next you want to change the color of the copy to black and set the blur to 10 or so:

Now you send the object to the background:

And last you align the object a little bit offset from the original:

Here is the final result:

And another copy of the SVG: dropshadow example

I wanted to see if I could use these tips to create a diagram that looks similar to what is on the OmniGraffle page. Here is the result of that:

Good luck and I hope this keeps your next diagram from becoming a joke.

Here are a couple links so you can download the example SVG and the cloud SVG if you want.

Tags: inkscape, diagram

After a little searching I didn't find much help so I started looking at the script myself to see if I could track down the problem. It turns out that it wasn't that hard to fix. First off the script file was located at: /usr/bin/acroread

Open the script file and find the function named "check_gtk_ver_and_set_lib_path". This is the location of the first error you will hit. To fix the error you will need to change:

to

You will find this two places and it needs to be changed in both. If you don't notice the 2nd place it is right after the first in a loop:

The second problem you will have is located in the function "get_gtk_file_ver". Find this function and change the following line:

to

Now you should be able to run acroread without errors.

Tags: acroread, fedora, script

A good place to start is the PHP RRDTool tutorial. It will make it easier to read the following code if you have an idea of how to use the RRDTool extension.

All of the following changes should be made in the plugins/akismet directory.

The first part of the code is akismet_rrd.php that adds a utility function for updating the RRD file. It will create the file if it doesn't already exist. To gather the stats on incoming spam it uses a timestamp of the last time it ran and then queries WordPress's comment table for anything marked as spam in increments that match the step used to set up the RRD. The update function can be called in a number of locations but the most efficient seems to be right before any deletes happen.

The next step is the code to create graphs from the RRD in the file akismet_graph.php. This code registers the menu for WordPress in the Dashboard area and when displayed will generate the graphs for a day, month and year.

The final step is to make some changes to akismet.php to add the update functionality.

Put this at the top:

include_once ("akismet_rrd.php");
include('akismet_graph.php');

Every place you find "DELETE FROM" add the following before it:

akismet_update_rrd();

And finally here is what you will end up with after a few days:

One downside to the way this setup works is that you can miss some data if you delete quicker than the step time. I figured that was ok since the graphs are averages, the step is only 5 minutes and most people probably don't purge their spam that quickly.

Tags: php, akismet, rrd