mike hodnick's blog

Introducing the Error Alpaca

Thu, 02 Sep 2010 09:35:32 -0500

Before I get to the Error Alpaca, I have to explain that I’m reviving my good old kindohm.com web site to be my personal internet end point for information about me. Hodnick.com will continue to live on for blog/article posts. Rss feed URLs haven’t changed. It’s a personal internet identity crisis that has now been put to rest.

The new kindohm.com is a new informational source for me: bio, music, code, etc. It’s a new, simple design and I encourage you to check it out and let me know what you think.

With this new design and domain switch, I decided to implement new standard error pages for kindohm.com that handle basic 400, 404, and 500 error codes.

This is where the Error Alpaca comes in. The Error Alpaca politely lets you know that some type of problem occurred on the site:

You can reproduce this error by following this link: http://kindohm.com/bad.htm

I can’t easily reproduce the other error types, but the Error Alpaca can specifically handle the 401, 404, and 500 error codes. If another type of error occurs, it can handle that one generically:

I must say that I’ve never enjoyed handling error conditions more.

That's my girl

Wed, 01 Sep 2010 12:03:50 -0500

Eva (5 yrs) and I had the following discussion at breakfast today:

Me: Do you know what today is?
Eva: No
Me: It’s the first day of September
Eva: Does that mean that the new Halo is coming out?

// tears of joy //

That’s my girl.

Photo

Sun, 29 Aug 2010 15:31:16 -0500

Greetings from Android

Thu, 26 Aug 2010 07:43:10 -0500

Greetings from Android

Code from today's Twin Cities Silverlight User Group session

Tue, 17 Aug 2010 20:53:08 -0500

Here is all of the source code from today’s session I held on network awareness, out-of-browser, webcam, and microphone integration with Silverlight 4 at the Twin Cities Silverlight User Group:

TCSLUG.2010.08.17.zip [474 KB]

And here is the composite image made from myself and one brave volunteer when I was demonstrating simultaneous webcams (from the WebCamFun solution in the source code):

Sorry guy (don’t know your name)… I hope you don’t mind me posting the image!

For once, Facebook correctly recommends a page/group that suits...

Fri, 13 Aug 2010 11:52:25 -0500

For once, Facebook correctly recommends a page/group that suits me.

HTTPS with Azure, Web APIs, Local Environments, and Build Automation

Mon, 09 Aug 2010 10:11:29 -0500

My, that’s a long title….

On my current project we have developed a web-based API (e.g. sorta kinda RESTful) that allows remote applications to interface with our system. These remote applications currently include a Silverlight app and an iPhone app prototype.

Our web API is hosted at a secure HTTPS endpoint. This is crucial so that user credentials, which are required by our API, are not sent unencrypted across the internet. We could have chosen to require client applications to encrypt credentials before sending them to the API, but why not let SSL do that dirty work for you?

Our API is hosted in an Azure web role. When hosted at an HTTPS endpoint, the Azure web role must be configured for HTTPS and with the SSL certificate thumbprint before it is deployed to Windows Azure up in the cloud. This causes a problem for doing local development against the API when hosted in the Azure dev fabric: API calls will fail because the SSL certificate used does not match the localhost URL. When you browse a normal web site where the SSL certificate does not match the actual web site url, you get these certificate/identification warnings shown in browsers like Chrome and IE:

As a human, you can choose to bypass these warnings and let the web browser continue to render the site. However, with a web-based API your code won’t let you make that choice. Your code will fail, and rightfully so. We wouldn’t want our automated API to use a web site that was potentially spoofing us.

If you compile and deploy your Azure cloud package through a TFS build (or another build system), this presents a problem. You need a local Cloud Service project with no SSL certificate (or a different SSL certificate) configured for your developers to develop on, but then you need to deploy a Cloud Service that does have the SSL certificate configuration.

There are a couple ways to handle this. The first approach is the one I recommend. The second one I don’t recommend, but it could be useful in certain contexts.

1) Create Two Cloud Service Projects

This is the approach I recommend. It requires less trickery with TFS build tasks/scripts and relies more on permanently storing the HTTPS/Certificate data in the cloud service projects themselves. It’s just easier.

Basically, just create two Cloud Service projects in your solution that host the same project for the web role:

In one cloud service project, leave it with HTTP on port 80. With the second cloud project, add the HTTPS and Certificate configuration. You can do this by going to the Properties page for each web role in each cloud service project:

Now in your build/deploy automation you can just select which Cloud Service project and supporting files to use when calling cspack.exe. There. Done. Easy. Cake.

2) Modify the Azure Service Definition and Config at Build Time

At this time I do not recommend this approach as it just creates a lot of complexity in your build. I’m not even sure that this approach is worth writing about, but in some circumstances it may be appropriate. It’s also the first approach I tried in real life, and maybe after you read about it you can avoid the pain I went through.

The gist of this approach is to inject the HTTPS and SSL certificate configuration information into your Service Definition and Service Configuration files at build/deploy time. This will allow you to work with the Cloud Service package locally without HTTPS/SSL configuration, but deploy the package to Azure with the HTTPS/SSL configuration without additional Azure Cloud Service projects.

You’ll need to create custom tasks or scripts that will run during your build to make copies of the ServiceDefinition.csdef and ServiceConfiguration.cscfg files. You can even use new names for them. You’ll modify these new copies to include the HTTPS/SSL configuration. Point to your new copies when you run cspack.exe to create your cloud package.

In short, you’ll need to modify your ServiceDefinition.csdef file from this:

To this:

And modify your ServiceConfiguration.cscfg file from this:

To this (adding the Certificates element):

Obviously - use your own role and certificate names as well as your own real SSL thumbprint.

I recommend getting comfortable with these config settings and being able to read the XML before you start manipulating the files in a build task. You can warm up to the idea by manipulating these settings in the Properties of your Azure web role in Visual Studio. Visual Studio will modify your ServiceDefinition.csdef and ServiceConfiguration.cscfg files when you change these properties in Visual Studio:

Again, just use Visual Studio in a test project to warm up to the idea - you don’t want to embed the real SSL/HTTPS configuration into your local environment with this approach.

After you add custom scripts or tasks in your build to create the new Service Definition and Service Configuration, you can call cspack.exe, point to the right files, and generate an Azure package with the SSL/HTTPS configuration that you need.

Digital Audio Synthesis on Windows Phone 7

Tue, 03 Aug 2010 09:21:00 -0500

Back in March 2010, I posted about my initial excitement and disappointment with the Windows Phone 7 developer tools. Back then, then WP7 emulator didn’t support the MediaElement’s SetSource method. SetSource provides the basis for being able to do digital audio synthesis with custom MediaStreamSource objects.

With the new WP7 beta tools, I’m happy to say that the SetSource method is now supported by the WP7 emulator - so you can now hear and play your synthesized audio!

I created a very simple audio synthesis app to demonstrate these features:

Download the source code [26 kb]

The app lets you pick from two audio sources: one source generates random noise and the other source generates a constant, smooth set of tones.

Happy WP7 coding!

Broken Silverlight apps fixed

Mon, 02 Aug 2010 20:46:48 -0500

Apparently the web hosting company (webhost4life.com) which hosts my ASP.NET / Silverlight applications decided to remove the XAP MIME type from my web site, thus breaking all of my personal Silverlight apps. If you follow my site and have been trying to use an app that appeared to be broken, please try again as I have resolved the issue.

In the meantime, don’t sign up for webhost4life.com.

Old School Advertising

Thu, 29 Jul 2010 13:21:09 -0500

Phone book? Srsly?

New Music: Feel the Sealant (Tub Repair mix)

Thu, 29 Jul 2010 08:38:43 -0500

I’ve completed a remix of the last tune I posted. I introduce to you the Tub Repair mix of Feel the Sealant:

Parser.FeelTheSealant.TubRepairMix.mp3 [10.3 MB]

The tune is also available at hodsaudio.net: http://hodsaudio.net/Song/Details/307.

Here’s a quick video introducing the tune:

Enjoy.

New Music: Feel the Sealant

Thu, 22 Jul 2010 21:40:19 -0500

I’ve finished work on a new audio track entitled “Feel the Sealant”. Click below to play or download:

Parser.FeelTheSealant.mp3 [7.21 MB]

The file is also available from hodsaudio.net: http://hodsaudio.net/Song/Details/306

Here is a picture of some sealant:

Enjoy.

Capture and Play Back Audio with a Microphone in Silverlight

Tue, 20 Jul 2010 21:35:59 -0500

Try the demo app

Download the source code

In a previous post I talked about capturing video from a web cam in Silverlight. In this article I’m going to talk about capturing audio. In addition, I’m going to cover how to keep the captured audio in memory and play it back using a custom MediaStreamSource object.

Just like with video, capturing audio begins with a CaptureSource and an AudioCaptureDevice:

The above code assumes you’ve gained permission from the user to use the device.

As you can expect, the CaptureDeviceConfiguration class has a GetAvailableAudioCaptureDevices method that you can use to get all audio devices on the user’s computer.

Calling Start() on the CaptureSource begins the capture process, but it doesn’t actually store the audio data anywhere. That is where a handy little class in Silverlight called AudioSink comes in. AudioSink is a class you use to handle incoming audio samples. It is an abstract class so you will need to create your own custom implementation and override four abstract methods: OnCaptureStarted, OnCaptureStopped, OnFormatChanged, and OnSamples:

To use a custom AudioSink, you wire it up to a CaptureSource by setting the AudioSink’s CaptureSource property equal to a CaptureSource instance:

In the most simple form you can just create a custom AudioSink that captures the samples in a MemoryStream. You can optionally read this stream into a byte array if you so choose:

At this point, you’re almost ready to start playing back the audio you’ve captured. However, we cannot ignore the OnFormatChanged method and the audio format of the incoming data.

The AudioCaptureDevice class has a SupportedFormats property which is a collection of AudioFormat objects. AudioFormat describes the samples per second, bits per sample, and number of channels for the captured audio. These properties are crucial in being able to correctly play back your audio. AudioCaptureDevice also has a DesiredFormat property. When set, DesiredFormat will use that format to capture audio.

To take a step back here - you have an available set of AudioCaptureDevices, and each device has a set of SupportedFormats. You will either need to use a set of defaults or maintain two lists (one dependent on the other) for the user to pick from.

OnFormatChange in the AudioSink class gets called for the first time just before the samples start rolling in. However, it is possible that it may get called again. In advanced scenarios you may want to support a changed audio format. I just prefer to throw an exception in my AudioSink and not deal with it. My app must then be constrained to prevent the user from changing the audio format at capture time.

Once the audio format is set, you can keep this format stored in the AudioSink for future use:

When you call Stop() on CaptureSource, recording will stop and the AudioSink’s OnCaptureStopped method will get called.

Next we need to deal with playing back the audio. You will need to create a custom MediaStreamSource object that can describe the media stream in terms of the audio format captured in the AudioSink. Then, you will use that MediaStreamSource to send out the audio samples captured in the AudioSink. Basically you’ll want to pass in the AudioFormat and byte[] data you captured in your AudioSink into your custom MediaStreamSource.

I don’t want to get too deep into the MediaStreamSource implementation because so much of it is verbose boilerplate code. However, your constructor, OpenMediaAsync(), and GetSampleAsync() methods for the MediaStreamSource will look something like this:

The above code is incomplete but it should give you a taste of what you need to do with a MediaStreamSource. There are plenty of resources out there on how to set up and use MediaStreamSource objects. The above code basically starts at the beginning of the audio data and plays through to the end, then starts at the beginning again. The source code example with this post has a complete implementation.

One quirk I’ve found while having a few friends test out this demo app is that audio recording and playback seem to fail if no default audio capture device exists within the Silverlight configuration. This is an operating-system level configuration setting and not an application setting. If this scenario occurs, it can be remedied by having the user right-click on the Silverlight application, select “Silverlight”, then select the Webcam/Mic tab. From there, the user can select an audio capture device as their “default” on their operating system. This seems to clear up the problem (so far).

After you get these mechanics working, you can slap on a fun UI and start hacking with samples!

Enjoy!

Comments Fixed

Tue, 20 Jul 2010 14:46:17 -0500

I just noticed that my commenting system was completely missing from my web site and posts! The problem is fixed now. It was caused by some theme changes I made a while back. Sorry bout that.

Multi Video Capture in Silverlight

Mon, 19 Jul 2010 10:56:00 -0500

Try the demo application

Download source code

One fine detail before you read any further: you need to have two video capture devices (e.g. web cams) in order to really have any fun with this.

One of the best features about Silverlight 4 is that you can interact with video and audio capture devices. This enables you to take pictures from a web cam, record video, or record audio in your Silverlight application and handle the media data directly.

One fun little side effect of the video capture API in Silverlight 4 is that you can enable two video capture devices simultaneously. This may or may not have any value to you and your everyday Silverlight programming, but if it did then it probably wouldn’t be any fun anyway!

If you haven’t tried out the Audio/Video capture API in Silverlight 4 yet, here is the basic idea:

That’s all the code you need to do to start viewing/recording video. Basically, CaptureSource is the key class that makes it all work for you. You use CaptureSource’s VideoCaptureDevice property to tell it which video device on your computer to use. You may have more than one, but Silverlight lets you select a default one with the CaptureDeviceConfiguration class’s GetDefaultVideoCaptureDevice method. It’s cake.

If you actually want to select a specific video device and not use the default, you can use the CaptureDeviceConfiguration’s GetAvailableVideoCaptureDevices method:

With that list of devices you can bind to it or do whatever it is you like to do with lists of VideoCaptureDevices. Typically, I bind that list to a ComboBox so that the user can select their device.

To display the video from your device on screen, call the Start() method on the CaptureSource object and use a video brush to paint it onto a surface, like a rectangle:

In the source code for this article you can see this all in action.

Now, the cool part is that you can encapsulate all of the above logic in a Silverlight UserControl and display two cameras at the same time. Essentially, two CaptureSource objects can be set up and started.

As an example, I have a main page with two Camera user controls I created on it:

And the camera controls look like this:

You can see that I’ve added a Rectangle for the video display area, a Combo box to let the user select their device, a “Turn On” button, and a warning message to display (if necessary) about the device already being in use.

CaptureSource.Start() will throw an InvalidOperationException if the same device is selected twice (once in each Camera control). I’m catching that exception and then displaying the “already in use” warning message when that scenario occurs.

When I run the application, I can select two different cameras and display them at the same time:

You’ll receive the following error if you select a device that is already in use:

Again, what is the point? Well, I’ll leave that up to you. Theoretically the ability to run two video devices in Silverlight would allow you to, say, take pictures of yourself with one device while scanning barcodes with the other. I do that all the time. Kidding! Geez!

Another interesting example is that you can achieve a composite image by layering one visual element with less than full opacity over another element - and have both elements use VisualBrushes that pull from different video sources:

I’ve just spawned a whole new genre of visual art…

One “gotcha!” of using two web cams at the same time is that your browser and operating system might not be too happy with you. If you are constantly starting capture sources, debugging without stopping devices, plugging in and removing devices, and testing multiple browsers, you may experience a “hang” (or “crash”) in your Silverlight app when you call CaptureSource.Start().

You can reproduce this problem in the Silverlight configuration tool. Right-click on your application, choose Silverlight, then choose the Webcam/Mic tab. In a crash-free scenario, your config tool will show this:

In a scenario when your operating system and Silverlight can’t communicate with your video capture devices, the above tab will “hang” indefinitely and not display anything.

To help minimize this problem with hangs and crashing, I encourage you to stop all CaptureSources when the application exits. This seems to make all those web cams and Silverlight play more happily together:

That’s it. If anything, playing with multiple capture devices simultaneously is just good clean fun. Since audio capture is very similar to video capture in Silverlight, you could probably do some crazy stereo imaging or something with audio capture using these techniques (I smell another blog post coming…).

Have fun and enjoy!

Jackie, Nikki, and Eva

Sun, 18 Jul 2010 15:09:31 -0500

Jackie, Nikki, and Eva

First visit to Target Field

Sun, 18 Jul 2010 15:08:35 -0500

First visit to Target Field

Tue, 06 Jul 2010 18:56:44 -0500