I ran across something the other day that made wonder about doing range requests using ajax. For some reason it wasn't obvious at first if this would be easy but as it turns out it is.
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).
Last year Google released WebM as an alternative to h264 encoded video. They followed that up with the release of WebP as an alternative to JPG. Ever since the release I've been thinking about giving it a try on iOS to see how well it might work to reduce application size. As a bonus to reduced size, WebP also supports an alpha channel that JPG doesn't (there is more information available on the original release blog post).
I recently had a chance to try out Google's closure compiler. The closure compiler is similar to the YUI compressor except that along with minimizing it may rewrite the JavaScript. If you want to understand more about what it does start at the overview documentation and then go from there.
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 has taken me a while but I've finally been able to release version 2 of the Google Analytics Dashboard WordPress Plugin. The primary enhancement of this version is that it no longer blocks the dashboard, posts or pages interfaces while loading. The next major change is an upgrade to using Google's OAuth login system (see my Google OAuth example using PHP for more information on how I did that if you are interested). The old login system is still available but the OAuth login is the one to use going forward and I may remove the old one at some point. The move to OAuth along with the refactoring I did to the code will allow support for other Google sites such as Feedburner. As a bonus I also moved the caching system to the newer WordPress transient storage interface. The use of the transient storage interface should fix one of the biggest issues people have seen in the past so no more worrying about finding a temp directory that is writable.
Here are a list of the major changes:
Some other minor changes:
I have been working on a long needed update to the Google analytics dashboard plugin for WordPress and one of the items I had on my TODO list was using Google's OAuth login instead of the old ClientLogin. Setting OAuth up for a WordPress plugin is complicated because it isn't a hosted application and as such I can't register it to get OAuth keys. That is where a special way of doing OAuth comes in called OAuth for installed apps.
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.
Ever since getting one of the new AppleTV devices I have been wanting to fiddle with AirPlay. I finally got around to looking at a dump of the traffic between an iPad and the AppleTV over Christmas and was surprised at how simple it was. Soon after I noticed a blog post about AirFlick for the Mac. AirFlick was close to what I was wanting at the time but I really wanted something that would let me control AirPlay from Linux or Windows.
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:
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:
One of the interesting things about Mongrel2 is its ability to send output to multiple clients with a single handler message. This has a lot of potential for push applications and while I was investigating Mongrel2 a new version of iOS came out that included changes to Safari. While looking at the list of Safari changes in iOS 4.2 I noticed something called EventSource and went to investigate what it was.
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.
Right before I went to Rubyconf I started looking at Mongrel2 so I had something to hack on while I was there. I grabbed the two Ruby handlers listed on the main site, Ruby Mongrel2 and Rack Mongrel2, to get started. I noticed right away that I couldn't kill the handler process once it started using either one of these libraries. I started down the path of figuring out why they wouldn't respond to SIGINT and eventually to writing my own handler in Ruby that demonstrates how to fix the issue
Modernizr is a Javascript library that detects the presence of browser functionality. This makes life a lot easier when using more modern features on your website by encapsulating all the feature tests into a library you don't have to worry about. You can use Modernizr either in your own Javascript or you can use the CSS classes it sets on the HTML element.
To get a full list of the browser functionality that is tested check out the Modernizr docs. If the feature you need a test for isn't available it is fairly easy to add new tests as well.
I'll start with an example that shows how to use the feature tests in Javascript. After Modernizr runs it populates the "Modernizr" structure with boolean values for each functionality test. This example waits for the page to load and then simply populates a DIV with text depending on your browsers support for web sockets:
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Modernizr - Javascript Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="modernizr.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
if (Modernizr.websockets)
{
$("#result").html('Your browser has support for Web Sockets');
}
else
{
$("#result").html('Your browser does not support Web Sockets');
}
});
</script>
</head>
<body>
<p id="result"></p>
</body>
</html>
See this code in action: Modernizr Javascript example.
You can try this example with an older version of Firefox and the text should indicate that there is no support for web sockets. Try again with a newer version of Google's Chrome browser and the page will indicate that there is support for web sockets.
The next example shows how to use the Modernizr CSS support. The key here is to know that the library will inject classes into the HTML tag. Those classes correspond to the functionality tests and are listed in the documentation. I am again testing for web sockets support and Modernizr will set the HTML class to either no-websockets or websockets and display one of two DIVs:
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Modernizr - CSS Example</title>
<style type="text/css" media="screen">
div.wsno, div.wsyes { display: none }
.no-websockets div.wsno { display: block }
.websockets div.wsyes { display: block }
</style>
<script src="modernizr.js" type="text/javascript"></script>
</head>
<body>
<div class="wsno">
Your browser does not support WebSockets.
</div>
<div class="wsyes">
Your browser supports WebSockets.
</div>
</body>
</html>
See this code in action: Modernizr CSS example.
For a much more detailed CSS example check out this A List Apart article.
If you need the information Modernizr assembles outside of the browser check out Modernizr on the server.
While I was putting together the two demo pages for this I discovered a new service much like the Google Javascript library CDN but with more Javascript libraries. It is called Cached Commons and it uses Github's CDN.
I am Carson McDonald a software engineer and this blog is a small slice of what I do every day. I started developing software in 1989 and since then have work with a wide range of languages and systems.
You can also find me at the following:
GitHub
Twitter
LinkedIn
Stack Overflow
Segmenting WebM Video and the MediaSource API
For a while now I've seen people ask when support for Apple's Pantos HTTP live streaming would make it past Safari and iOS. The answer seems to have been that it wasn't clear that Pantos streaming was the best option and something else would come about eventually that would be more flexible. There have been other options but they involve either Flash or Silverlight and most people want something that works with html5 video. After a long wait it seems like the time is getting close now with the MediaSource API.
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.
Read More »