Integrating Google Analytics with your Silverlight Streaming application

No dice. Can’t be done. Here’s why.

To track an action you need to invoke the trackPage() function defined in ga.js. The function must be invoked from the same domain registered in your Google Analytics account, in my case that’s “andrewmyhre.com”. So in order to track events from my Silverlight app I need to call up to the parent frame and invoke a function to track the event. Unfortunately, because my Silverlight application is running on an entirely different domain (something like “silverlight.services.live.com”) the browser throws a “Permission denied” error when I try to invoke parent.trackPage().

There is no way around this. That behaviour is by design, in order to prevent cross-site scripting attacks.

So I’ve moved the Silverlight and media files to my hosting account where I can load everything under my own domain. That’s cool because I have 1gb of space there and the total media payload is around 500mb. It’s also a real shame, it was cool to be using a new beta service like Silverlight Streaming, but unfortunately event tracking is a deal breaker for me.

Maybe there are some coders out there who know how to get around this, or maybe the Silverlight Streaming team have a workaround… I can’t really see it happening though. Shame.

On the bright side though, the videos seem to be streaming much more quickly now! :/

Design Your Experience

So I deployed a personal website last week which I was quite happy with at the time but over the last few days I’ve thought of some features I wanted to add. I wanted visitors to be able to do a couple of things when they view my website:

• pause and skip the music (not everyone likes minimal-tech-dub)
• choose which videos are in rotation
• i also want the UI not to get in the way when not in use

So I added an options panel. It presents you with a pause/play button and a skip button to control the music. Most people, including myself, hate it when websites play music and you can’t stop it so here’s the option. I used the WebDings font for the button icons which I copied from my windows folder into my solution and embedded it.

Further below in the options panel you have a list of checkboxes which determine what kinds of videos are circulating in the pool that can be selected to play. Uncheck the ‘cows’ tag to any videos everything featuring cows, for instance. I use System.Linq methods to regenerate the pool on each click, like so:

if (c.IsChecked.HasValue && c.IsChecked.Value)

{

tagSet = tagSet.Union(new string[] { tb.Text }).ToArray();

}

else

{

tagSet = (from t in tagSet where !t.Equals(tb.Text) select t).ToArray();

}

string[] tagSet = new string[10];
if (c.IsChecked.HasValue && c.IsChecked.Value)
{
    tagSet = tagSet.Union(new string[] { tag }).ToArray();
}
else
{
    tagSet = (from t in tagSet where !t.Equals(tag) select t).ToArray();
}

In the above snippet, tagSet is my collection of active tags, it’s just a string array as I’ve indicated with the declaration on the first line. The first logic branch is adding the selected tag to the array using a Union() and the second logic branch removes it by performing a select where not equal. I wonder if this is awfully inefficient.

Finally at the very bottom of the options panel there are some blurry lines which now and then shrink and expand. These are gauges which indicate the current buffering and download progress of the videos. If you look closely you can see four distinct lines. The 1st and 3rd lines indicate buffering progress while the 2nd and 4th lines indicate download progress.

What’s actually happening behind the scenes is that while one video is playing another one is silently buffering. Once the background video source is ready to play and the timing is right a cross-fade transition will occur. As soon as the transition is completed the video source that was previously in the foreground begins buffering the next video in the pool, and so on the so forth. I can see what’s happening by switching into my diagnostics view:

I’m reasonably happy with the way that the options panel slides out smoothly to meet the mouse cursor as you move it towards the left-hand side of the screen, and retracts discretely in the same way. I’ve wanted to experiment with this method of revealing/hiding UI for a while and I like this as a prototype. I’m not a designer though so I’m pretty sure the whole thing could be much slicker.

One more thing I’ve added is a little ‘loading’ note with initial buffering gauges. There are two separate white bars which indicate the loading process – these are for source A and source B which I load both of initially before video starts. Sometimes however (actually, quite frequently) Silverlight is loading a cached video, so it doesn’t need to buffer in which case Silverlight reports a buffering progress of 0.0. This isn’t the desired behaviour in my case, because it means I have to set up some hacks to detect this case and show a full buffering gauge instead. From my point of view this is a bug.

Silverlight Streaming and Google Analytics

I can’t seem to find a way to implement page/event tracking from Silverlight using Google Analytics when hosted using Silverlight Streaming. The usual solution to do this with with a regular Silverlight app is to reference the Google Analytics ga.js script and call HtmlPage.Window.Invoke() from Silverlight. But a difficulty arises because that javascript is executed in the context of the Silverlight application, which (in my case at least) is inside an iframe, and therefore can’t use the ga.js script.

One of the features available with creating a Silverlight Streaming application is to include javascript files with your Silverlight app so that you can use them from Silverlight, but ga.js isn’t my script so I can’t do that. Unless I downloaded the obfuscated version using Firebug or something… but… ugh!

I’m sure there will be some combination of HtmlPage.Window.Parent.Parent.Whatever I can use to do what I want to do, but I’m already into my second glass of wine for the evening and my brains starting to go on holiday. Any UK devs just waking up want to tackle this problem?

I guess you could simulate the issue yourself by adding a new .html page to your standard Silverlight hosting website containing an iframe with loads the Silverlight test page. In fact that’s how I’ll start tackling it tomorrow.

For now, I’m going to call it a night.

I see I’m getting a little bit of new traffic/twitter follows which I guess I can attribute to my new website… not because I think it’s brilliant but because there aren’t many actual cases of websites making use of Silverlight Streaming, so the Silverlight enthusiasts on Twitter seem to be retweeting. Maybe I’m wrong but if I’m right, thanks everyone, and please provide feedback about what I’ve made. I’ll be really pleased to hear from you.

Providing custom ‘no-Silverlight’ UI using Silverlight Streaming

When building and hosting your own Silverlight application it’s pretty simple to provide whatever custom UI you want when a user doesn’t have a required version of Silverlight installed. Refer to Tim Heuer’s article on the subject: http://timheuer.com/blog/archive/2008/03/25/creating-a-great-silverlight-deployment-experience.aspx.

When using Silverlight Streaming, however, it’s not that simple. The two methods provided for embedding your Silverlight application don’t provide a neat space to put your own HTML so you can’t easily ‘own’ the experience.  In my case I used the iFrame solution because I couldn’t get the other method to work straight away.

What I did to get around this was to download the latest Silverlight.js from here: http://code.msdn.microsoft.com/silverlightjs, and the latest JQuery from here: http://docs.jquery.com/Downloading_jQuery#Current_Release.

Reference both scripts from your web page and then add the following script:

$(document).ready(function() {

if (Silverlight.isInstalled(‘2.0.30226.2′) == true) {

showSilverlight();

}

else {

showCopy();

}

});

$(document).ready(function() {
    if (Silverlight.isInstalled('2.0.30226.2') == true) {
        showSilverlight(); // function to display the iframe & hide the default copy
    }
    else {
        showCopy(); // function to hide the iframe & show the default copy
    }
});

And that’s it!

Note: there’s a comment on the silverlight.js download page that the script links to an older version of the silverlight player. It seems to be correct but even when I updated my script file I still got the ‘older version of Silverlight’ message when using Chrome. Also I don’t know yet whether the experience works on a Mac – if anyone can let me know I’d really appreciate it!

Giving Silverlight Streaming a go

I’ve been in New Zealand since April undergoing the arduous process of changing my visa to a UK work permit. That’s another story but what’s important is that I wanted to capture some of the scenery on video while I was here, and I figured a cool way to present it would be in a Silverlight application on a website. I didn’t have a personal website yet, so I decided to create http://www.andrewmyhre.com.

A couple of weeks and 3 roadtrips later, I’ve got some footage and a Silverlight application. I cut the video up using VirtualDub and encoded it into .wmv using Expression Encoder, which I’m very impressed with. The video and music are a combined total of around 300mb, and while my current hosts offer a minimum 1gb storage space on their hosting server I wanted to try something new. At first I figured Azure would be good to have a go at, but while I was googling Silverlight hosting I came across this: Silverlight Streaming.

Silverlight Streaming is currently in free public beta, and the basic deal is this: register yourself an application account, upload your silverlight application (XAP will do) in a .zip file and any media assets it needs and you’re given a script you can plonk into a web page to present the Silverlight app. They provide up to 10gb storage and they won’t charge you for bandwidth use – sweet!

It took me a couple of attempts to work the thing out, because the documentation seems little vague. I’ll enumerate some of the idiosyncracies I’ve come across.

The way the service works, which took me a little while to work out, is that it hosts your Silverlight XAP file and any media assets it needs. It doesn’t host the website your Silverlight is contained in. It’s up to you to create your website on another web host and reference the Silverlight app. Furthermore you can’t reference the XAP as you would regularly using an <object> tag or the Silverlight .Net control, because all of the files in your Silverlight Streaming account are only accessible from the Silverlight Streaming servers. You’ll just get access denied errors if you try. So the Silverlight Streaming website provides a couple of ways to embed your Silverlight using JavaScript or an iframe, which from my point of view is fine. The HTML for both methods is provided on the page for your application (browse to Manage Applications and select the appropriate application on the next page).

Deploying your application is straight forward when you know how. Create a standard Silverlight project and build it. Now browse to the /ClientBin folder and zip the .xap file. This is the file you upload as the ‘application package’ file. You can optionally include a manifest.xml file which specifies some metadata about your .xap – stuff like Silverlight version, desired width/height and some other guff. Pretty clear why it needs to be specified but including it in your zip file is optional as you can create one manually in the Silverlight Streaming application manager.

When I built my Silverlight website I added the video files to a /Video folder within the host website, and I wanted the same structure in the hosted Silverlight Streaming application. Well it’s not that simple, because Silverlight Streaming doesn’t provide you with a nice RESTful file system API. It’s more like you are given a bucket for your application, and whatever you include in your Zip file gets placed in that bucket in the structure provided.

So I was able to create my structure by including all of the video files within the Zip in a /Video subfolder BUT the Zip file was ~300Mb, so what happens when I want to update the XAP file? I have to update the Zip file and re-upload the whole thing, which on my connection is a 2+ hour operation. This is because every time you upload an application package your whole application bucket is cleared and replaced with the contents of your Zip. So this is not the ideal method for uploading media. Fortunately, there is another method, detailed below, which works for videos. Unfortunately, other types of media, like mp3, wma, jpg etc MUST be uploaded in this way.

An alternative to including the media in the Zip file is to use the Manage Videos function in your Streaming account. Here you can upload individual video files one-by-one into their own seperate little buckets. It’s a matter of clicking Upload Video, Browse for the file on your hard-drive, click the Upload button. You’ll get a nice little progress bar to tell you how the upload is progressing. Once you’ve uploaded your videos, each one is given a unique URL which will be something like http://silverlight.services.live.com/[accountnumber]/[videoname]/video.wmv. This makes it pretty easy to reference the videos from within your silverlight application.

In my case, I have around 100 videos all numbered sequentially. In my silverlight application there’s a For loop which generates the array of filenames to access, so the above pattern works nicely.

I have a couple of little issues with the management interface so far. The nice thing about the application package upload process is that it takes the contents of a Zip file and extracts them to a bucket with the file structure intact. Nice! But why can’t I do this with videos? Or on the other hand, why do I have to upload the entire Zip again when I just update one file? Why can’t I have the option to UPDATE my files, i.e: overwrite anything existing and leave anything else on the server untouched? I either have to spend all day uploading each video one-by-one, or wait all day for a gigantic Zip file to upload. Guys, please, do something about this.

The other issue is regarding non-WMV file formats. While I’m free to upload video files to the service, what about other formats like mp3 and wma? My application is video clips with a seperate audio soundtrack, which I want to keep separate. The audio files are in WMA format there’s about 200Mb of them. But the only way to upload anything other than WMV is to include it in the application package Zip file! WHY?? To get around this issue I used Microsoft Expression Encoder to encode them as WMV with a blank video track – which added about 50% to the total file size. I then uploaded them individually just like all the other videos. I’m not at all happy with the situation but there’s currently nothing I can do about it, I just have to spend hours and hours uploading these things.

So it’s a mixed bag. YAY for free media hosting, that’s awesome. All they need to do is allow for uploading a single Zip with all your videos in it seperately from the application package, OR allow foran application package UPDATE option which preserves files on the server where they’re not included in the zip. Also if they added the same upload progress bar we get for videos to the application package upload, that’d be tops. My website should be online in a few days, once I’ve finished uploading everything. *sigh*