Nathan Bridgewater » WCF

Silverlight, WCF REST and Streaming My Personal Music Repository from a Standalone EXE

Nathan — Tue, 27 Apr 2010 02:54:00 +0000

This is way cool. From time to time, I tend to screw around with stuff I enjoy that really has little productive value. A year ago this month, I recall wanting to continue writing about sharing your personal music without using IIS and hosting the music directly from a WCF standalone executable. Well it turns out this is a whole lot simpler than I originally thought.

Disclaimer: This probably isn’t best practice, and it’s ripe for enhancements. My hope is that it gets your imagination fired up and motivates you to continue where I left off.

Challenges:

How the heck do I stream an MP3 file to a media element via WCF (without having to download the whole file before playing it)?
Cross-site scripting policies are blocking my download requests. How can I serve these up via my self hosted WCF REST service?
Silverlight3 doesn’t support WCF REST yet. How do I deserialize the WCF REST contract messages?

Changes Since Last Release

My original design was very simple. I hosted the Silverlight files and used WCF with an IIS server at home. The player pulled a list of files and locations. The player’s media element source was set directly to a music file hosted in an IIS virtual directory. All that works great until you are on a machine without a web server. Ultimately, I wanted to figure out a way for the user to host their music repository from their desktop with a simple executable and port forwarding. Which means it would have to serve up all the resources necessary to run the Silverlight player. It would also have to serve up the WCF services and actual music files themselves.

Since the last post a year ago, I’ve made quite a few little tweaks to the player like: regular expression search, random songs, random play order, and a volume control. I also integrated a compact SQLite database for searching so the server-side doesn’t have to do a file system search for each request.

WCF REST

So first, how to we host the resources and music files? This is where WCF REST comes into play. WCF REST allows us to host a service or respond to an HTTP GET request very easily. And since we can host any WCF service in an executable, it makes for a pretty easy standalone option. The only real caveats here are security and firewall access, which in this demo are non-existent. You will also need to enable port-forwarding in your firewall for whichever port you decide to host the WCF service app. For this sample, I’m using TCP port 8000.

I found in this article by Peter Vucetin on how to serve up any request with a custom MIME type. I took what he had and tweaked it a little so I could serve up content like the silverlight package, html files and a javascript resources.

Playing Media

Okay, so the first problem with playing media is… how do we stream audio files from a WCF service to a media element in Silverlight? Well, it’s as simple as setting the MediaElement source to a method endpoint in the WCF service, which returns a FileStream to the audio file.

For example, our service endpoint lives at: http://localhost:8000/Music for the MusicStreamerService. Our function endpoint is Files(string filename) using the route: /Files/{filename}. So our source for the media element becomes http://localhost:8000/Music/Files/{filename}. On the server side, I simply set the content type and returned a direct FileStream to the file. This allows the player to behave like a normal web server and stream the file, which allows the Media Element to immediately start reading the data as it comes down. I also tweaked the request path a little bit for the filename parameter, which contains full relative path. If using the WCF service to host the file, then I enable a base64 encode option that encodes the entire relative path so as not to confuse the WCF request routing. If I choose to serve it up with a normal web servr, then I can disable the base64 encode and use UrlEncode instead so it treats the request as a normal file system request against a virtual directory.

Hosting Policy Files

Cross site scripting… That’s our next problem. Say your website with silverlight resources are hosted on one server and your music file server is hosted on another. If you host a silverlight app and access a web url across domains, then you’re going to need to serve up the cross site policy files. I wrote a simple file serve function that kicks out a local file when you request it. However I setup a separate service contract and endpoint since the policy files have to reside at the root of the host.

Deserializing DataContracts Manually

Silverlight3 doesn’t like consuming WCF REST services yet. So for the functionality of searching and listing the files available, I’m manually retrieving the XML response over asynchronous HTTP calls and then use System.Runtime.Serialization.DataContractSerializer to do handle the data. On the client side, I copied data contract proxy classes from my service so their serialized definitions match.

Configure the Projects

There are a few settings to be aware of. First, the Silverlight initializes with the location of the WCF endpoints. This is why we have a separate html file for the console app and the web app in the sample. The url is specified using the InitParams parameter on the html object. The standalone sample uses console.html whose initParams is set to: baseuri=http://localhost:8000/Music shown here.

So the html file tells Silverlight how to get to the WCF service, now the app.config
tells the server side how to get to the music files using these settings. The server
side returns a list of files with the configured web root so the Silverlight client
knows where to make a request to for the actual file. Note that this is also
where you change the base64 encode flag (false for virtual directory, true for WCF).


    
        C:\music
    
    
        http://localhost:8000/Music/Files/
    
    
        True

Next, for the database to work properly, I added the provider configuration for
System.Data.SQLite. This is mostly just an FYI that it’s there and that I clear
all existing ones during runtime. (In case you already have it installed to your
system). This will allow SubSonic (the data framework I chose for this project)
to load the provider for SQLite when the server performs searches.

Run the Standalone

To make the standalone version run, follow these steps:

Get the files here
(Released Open Source via Creative Commons. See below for more details)
Open the app.config in the MusicHost project. Check the LocalRootPath
setting and set it to the root of your music folder (for example: C:\Music or \\Server\Share.
Also set the WebRootUrl setting to the public location where your music files are
available. For example: http://myhost.com/Music or for the standalone:

http://localhost:8000/Music/Files/
Run the MusicHost application.
Browse to http://localhost:8000/Music/console.html
For the first run, wait about 20 seconds for the indexer to index your music repository.
If you click Random or search for files with no results, it may still be empty.
Select an item in the list to start playing it.

Hosting with IIS

I left the functionality in there to host music files from a web server directly.
To see it, edit your Web.Config in the Web project and set WebRootUrl to
the IIS virtual directory of your music files. (For example: http://some.web.server/Music/).
Set Base64EncodedFilePath to False so it doesn’t encode the file request.
Then run the Web project and browse to Default.html. During the first run, click
Reindex and wait for the confirmation dialog, which make take awhile depending on
the size and location of your local repository.

Enjoy!

border-left-width: 0px" alt="Creative Commons License" src="http://i.creativecommons.org/l/by-nc/3.0/88x31.png" />

MusicCenter
by Nathan Bridgewater is licensed
under a Creative
Commons Attribution-Noncommercial 3.0 Unported License.

WCF Data Contracts and "k__BackingField" Property Naming

Nathan — Thu, 28 May 2009 15:43:25 +0000

So recently, I was playing around with WCF, and I created a few classes that I wanted to expose in operations. Usually when I play with plain old objects, I tend to type them up pretty lazily and use any code shortcut I can. In this case I defined my properties using the 3.0 auto-generated field method, which looks like an interface property. The C# compiler automatically generates the backing field on the fly for me at compile time. Here is a sample class I’m using in the silverlight music project.

[Serializable]
public class FileBrowser
{
    public string LocalMusicRoot { get; set; }
    public string WebMusicRoot { get; set; }
    public List Files { get; set; }
}

The catch comes in when you expose it to WCF. When serializing these objects, the serializer will look at all FIELDS of the class no matter their scope: public, private, etc. This is because it uses System.Runtime.Serialization, not System.Xml.Serialization. It does not serialize properties since properties really are just accessor functions. So what you get is a funky looking proxy class with some properties you didn’t want and some cryptic naming. I.E. k__BackingField appended to your field names. The serializer simply takes what it has which is the auto-generated field name the C# compiler made for us.

So how do I clean this up?!?! Easy! Use a data contract. By defining your classes using the DataContract attribute from System.Runtime.Serialization, the serializer will interpret your DataMembers as fields on the class and use your naming. It will also ignore anything that’s not defined as a DataMember; so that hidden stuff will remain hidden and not be included in the proxy class. Take a look at this. We modified our original class with these attributes and the generated proxy class on the right now uses the names and fields we want! Easy peasy!

[DataContract]
public class FileBrowser
{
    [DataMember]
    public string LocalMusicRoot { get; set; }

    [DataMember]
    public string WebMusicRoot { get; set; }

    [DataMember]
    public List Files { get; set; }
}

So now… When you’re defining your entity classes that you want to pass around WCF; just be sure to take advantage of DataContract attributes to clean up the client proxy classes.

By the way… If you’re playing around with SubSonic 3 Alpha, this is a really sweet tweak you can make to your classes.tt T4 template. This will make them all Data Contracts and put DataMember attributes on each of the data fields. This will hide the foreign key properties from the WCF generated proxies. Good stuff!

Silverlight Deployment and WCF Endpoints

Nathan — Mon, 27 Apr 2009 18:31:04 +0000

I’m sure this has been written about a ton, but why not repost some useful information.

When using Silverlight with WCF, you quickly learn about the cross-domain restrictions. It becomes a huge pain when deploying from dev to production because you have to deploy and configure your Silverlight using the prod endpoint address, which for me at least didn’t always work. So what I found was that quite a few people are setting their WCF client end points on the fly using the current host during runtime. It’s relatively easy to do, and since they both are typically deployed at the same time, it works out pretty well.

This snippet strips away the ClientBin/xxx.xap from the application source and retains the application root URL.

string full = Application.Current.Host.Source.AbsoluteUri;
full = full.Substring(0, full.LastIndexOf('/')) + "/../";

You can then put this functionality into a utility class for your application and make it very easy to consume when using WCF services. Using the music manager service from a previous post, we have:

MusicManagerService.MusicManagerServiceClient client;
client = new MusicPlayer.MusicManagerService.MusicManagerServiceClient();

//use dynamic endpoint
client.Endpoint.Address = new System.ServiceModel.EndpointAddress(full + "MusicManager.svc"); 

client.GetFilesCompleted +=new EventHandler(client_GetFilesCompleted);
client.GetFilesAsync(uxSearchString.Text.Trim());

For deployment, you just xcopy your published web app to the deployment directory and you’re done. No reconfiguring/recompiling necessary.

Enjoy!

Silverlight, WCF, and Streaming My Personal Music Repository from IIS

Nathan — Thu, 09 Apr 2009 04:34:25 +0000

Updates

I’ve recently posted a new article continuing this topic: Silverlight, WCF REST and Streaming My Personal Music Repository from a Standalone EXE , which as an updated client with regex search and random play functionality.

A buddy of mine recently had mentioned he wanted a web based program he could use to listen to his music from home. As a contractor, we move around a lot. At some locations, we can’t install any software; others, we have firewall issues. Our mobile devices couldn’t hold every song we stored at home, and copying our music around everywhere just didn’t seem like a great idea. So we thought… wouldn’t it be cool if we could have just a simple website that could stream our music from anywhere? It’s an easy install…

So I started digesting the idea and thought yeah, we could do that. At first we’ll have to just use something simple like streaming the files directly from IIS in a silverlight music player of sorts. But eventually, we can really take advantage of some cool WCF hosting features in windows and not require IIS at all, which would be great for most of us since everyone doesn’t have a windows server sitting around at home. After a tiny bit of research, I realize we could also take advantage of the Media Services component built into windows server and IIS, which from the sound of it are pretty comprehensive. But with our end goal in mind, we’ll want to find a way to stream it right out of a simple windows app available to any edition of Windows.

Having said all that, I decided to start writing about this little toy project. To begin, we have a simple Silverlight application with a music player, list manager, and an IIS server hosting a virtual directly to our mp3 repository.

Getting Started

Of course you’ll need all the links and references to some handy Silverlight information.

http://silverlight.net/GetStarted/ is an excellent starting point.

You may need the Silverlight Tools for Visual Studio 2008 SP1.

I’m using Expression Blend 2, and for my project templates to be correct, I needed Expression Blend 2 SP1.

Download the Sample

So here we have our simple player. It has a stop and play button and a list box. It’s very, very, very simple. The idea is to load the music list on startup, then as we choose an item in the list, it plays. It also will auto-play the next song in the list when the current song ends, and it will recycle the whole list when the last song in the list ends. There are a TON of cool things we can do with this, but for now, we’re starting simple.

I started out by creating a new Silverlight Application in Expression Blend. If you don’t have Expression Blend, you can create a new Silverlight Application using Visual Studio with Silverlight Tools. This creates a class library containing the Silverlight controls along with a website project containing sample run pages to load and test your Silverlight application. In this case, our project name is MusicPlayer and the auto-generated web project name is MusicPlayer.Web.

The Player

Add a new Silveright User Control to the MusicPlayer project called Player. Here’s the XAML for our new control.

This should give you something similar to the control shown above. Start wiring up events for the simple things like the buttons and such. For their click event, you can control the MediaElement by asking it to Play(), Stop(), Pause(), etc. I included a text block that just shows the current state of the media element. Use the CurrentStateChanged event on the MediaElement to update its value.

Getting the Playlist

Before we get into loading the list control, we’ll need to define its WCF services. I designed a very simple structure to handle the information we need for our Music in this exercise. For now, it contains only a list of filenames and their relative path to the root of the mp3 repository. It also contains the public web path configured on the server.

MusicManagerService will have one function for now: GetFiles(), which will return a FileBrowser filled with the information from the MP3 repository. Simple enough…

Within the FileBrowser we have our implementation of the LoadFiles() function where it actually seeks the local repository and collects its information.

//FileBrowser.cs

public void LoadFiles()
{
    if (!string.IsNullOrEmpty(LocalMusicRoot) && Directory.Exists(LocalMusicRoot))
    {
        if (this.Files == null)
            this.Files = new List();

        this.Files.Clear();

        this.Files.AddRange(Directory.GetFiles(this.LocalMusicRoot, "*.mp3", SearchOption.AllDirectories));
        this.Files.AddRange(Directory.GetFiles(this.LocalMusicRoot, "*.wma", SearchOption.AllDirectories));

        //trim off the full path; leave only the relative one.
        List newFiles = new List();
        foreach (string file in this.Files)
        {
            newFiles.Add(file.Replace(LocalMusicRoot, string.Empty).Replace('\\','/'));
        }
        this.Files = newFiles;
    }
    else
        throw new ApplicationException("Cannot continue. No directory specified or the directory does not exist.");
}

WCF Setup

The easiest way to do this is to add a new Silverlight-enabled WCF Service to your web project. Change its service contract to resemble the following snippet. This will also automatically configure your web.config as well. The funny thing about the Silverlight enabled web service is that it mixes the contract interface with the class implementation. You can optionally separate this out into a WCF library in a more traditional approach using the interface and class implementation separated. We’ve done this in our downloadable sample code.

[ServiceContract()]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class MusicManager
{
    [OperationContract]
    public FileBrowser GetFiles()
    {
        FileBrowser fb = new FileBrowser();
        fb.LocalMusicRoot = Properties.Settings.Default.LocalRootPath;
        fb.WebMusicRoot = Properties.Settings.Default.WebRootUrl;
        fb.LoadFiles();

        fb.LocalMusicRoot = null; //clearing unnecessary local path from return value
        return fb;
    }
}

You should be able to browse MusicManager.svc and see the service page. You can also reference the service in the MusicPlayer silverlight project. In the ContentPanel Loaded event, we will call out to the service.

private void ContentPanel_Loaded(object sender, RoutedEventArgs e)
{
    //load up the music files.
    MusicManagerService.MusicManagerServiceClient client = new MusicManagerService.MusicManagerServiceClient();
    client.GetFilesCompleted += new EventHandler(client_GetFilesCompleted);
    client.GetFilesAsync();
}

Our async callback function for the service call will populate the list control.

void client_GetFilesCompleted(object sender, MusicPlayer.MusicManagerService.GetFilesCompletedEventArgs e)
{
    this.uxPlayList.Items.Clear();
    _Browser = e.Result;

    foreach (string file in _Browser.Filesk__BackingField)
    {
        this.uxPlayList.Items.Add(file);
    }
}

To finish up, add implementation for the selected index changed on the list control to change the MediaElement’s Source to the selected file with its web path. For convenience, we AutoPlay to true on our MediaElement to autoplay its media. Anytime the Source property changes values, it will begin streaming and playing the audio.

private void uxPlayList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    //start streaming the file.
    MediaElement1.Source = new Uri(_Browser.WebMusicRootk__BackingField + uxPlayList.SelectedItem.ToString());
}

When the media ends, we need to increment the playlist selection.

private void MediaElement1_MediaEnded(object sender, RoutedEventArgs e)
{
    //move to the next item
    int ix = uxPlayList.SelectedIndex;
    ix++;

    if (ix >= uxPlayList.Items.Count)
        ix = 0;

    uxPlayList.SelectedIndex = ix;
}

Wrap Up

So the end result will be our player initializing by pre-loading a playlist. Once the first song is played, the rest will auto-play as they increment through the list. With my MP3’s on a cable connection I’ve noticed it’s uploading around around 60KB/s. So as long as the location you’re at can tolerate a little bit of bandwidth, it’s a pretty good start to a little remote music player. You might even be able to throttle IIS down so it doesn’t saturate the wire.

Next Time

The next round will be using a restful http request via WCF 3.5 to stream audio files rather than straight up IIS. You can read more about that here:

Part 2 – Silverlight, WCF REST and Streaming My Personal Music Repository from a Standalone EXE