Scott Hanselman's ComputerZen.com

I heard someone saying they were having trouble setting up Smooth Streaming for IIS, so I wanted to try it myself.

If you just want to see Smooth Streaming work, visit http://www.smoothhd.com/ for some sample demos. They'll adapt to your bandwidth and look as nice as they can. If you want to fake a low-bandwidth situation, you can use the player at http://www.iis.net/media/experiencesmoothstreaming and play with limiting the bit rate.

Step 0: Got IIS?

I've got IIS 7 because I've got Win 7. If your Win 7 installation doesn't have IIS yet, go to Programs and Features and click "Turn Windows Features On or Off" and select Internet Information Services. Don't forgot to go through the tree and turn on the things you want, like "Static Content" in this case. (Remember, if you've just installed IIS, shut down Skype as it grabs port 80 if it gets there first. Lame.)

Step 1: Add IIS Media Services

I'm running Windows 7 x64 so I installed IIS Media Services 3.0 64-bit, but you can certainly install IIS Media Services for 32-bit also. Even easier, just install it from the Web Platform Installer directly.

Installing the IIS Media Services pack gives you a new icons in the IIS manager:

Step 2: Get (or Make) Some Content (and Encode It)

If you just want to see this work, you can get some pre-encoded content, below in 2a. Later in 2b, I'll encode some new content.

Step 2a: Get Some Pre-Encoded Content to Test

Use At this point, if you're just testing, you can go download the pre-encoded "Buck The Bunny" HD Video Sample Content (about 500 megs of HD video). Run it, extract the files, and put them somewhere like c:\inetpub\wwwroot\bunny.

HOW SMOOTH STREAMING WORKS - SIDE NOTE: You kind have to see it to get it, but it's actually clever in its simplicity. Some folks freak out when they take a, say, 200 meg video file and encode it for Smooth Streaming and the resulting directory is, say, 500 megs. They might say, it's larger! I don't have that kind of bandwidth! In fact, less is sent over the wire than exists on disk. The idea is that Smooth Streaming creates "steps" of bitrates. It encodes and stores your file multiple bit-rates on the disk.
To illustrate this, I will use the DJ Hero video game as an example:
Just as the DJ moves between tracks depending on how the crowd feels, Silverlight between encoded streams depending on the bandwidth is doing. Remember, it's called "Adaptive" Smooth Streaming.

Now I visit http://localhost/bunny/default.html and rather than the standard Silverlight Player, I'm going to select one called "User Experience Simulator." Basically, I want to fake a low bandwidth situation and see the Smooth Streaming react.

NOTE: If you like, or you're demoing this to a boss or someone, there's a prettier/shinier player on the Smooth Streaming Sample Content page that you can swap out. Details on the Getting Started Page for Smooth Streaming.

I start the player, and you'll notice on teh right side there's "Now Downloading" and "Max Bit Rate." I'll force a lower bit-rate (again, I'm simulating congestion here) and seek within the video. Then raise it, and wait, or seak. Notice the chart showing that the Silverlight Player "switched tracks" without dropping frames.

Another metaphor would be changing gears on a bicycle to adapt to a changing road.

Step 2b: Encode Some Content of Your Own.

Ok, so that was just existing content. You can download Expression Encoder 3.0 and encode all the video you want, but if you want to encode Smooth Streaming or H.264, you have to upgrade for $49 to Expression Encoder 3.0 with IIS Smooth Streaming. (By the way, Expression Encoder will also do Screen Capture, which is nice to know. The free version will do up to 10 min of Screen Capture, which is also useful to know.)

I drag a video of ScottGu in HD into the Encoder and select IIS Smooth Streaming. Since my source is HD 720p, I'll select that. By default, the profile will basically encode a high version and low version, but for best results you'll want to decide how many levels of stepping you want. Expression Encoder can be run in a batch from the command-line also, BTW.

Make sure you click the encoding option you want, right-click and say "Apply to Selected Items." You'll know you got it right if the Video section further down (that you can open up) includes multiple streams of various sizes and bitrates. Notice the screenshot. More streams will mean longer encodes and more space on disk taken up, BUT it'll make for more bitrate options for the player to choose and a MUCH better, smoother experience. Again, you might have 1, 5 or 10 streams for a 1 gig source and end up using 5+gigs of space on disk (I made those numbers up) but the end user's experience will be smooth and the bandwidth used will be as small as possible.

It is worth noticing that screencasts should mostly be encoded using an H.264 Screen Encoding profile, while action like sports games work better with other codecs. What looks good on the football field often looks like crap if it's some dude coding on his screen. You'll also want to have a reasonable minimum resolution and a minimum bitrate. Experiment and you'll find what works and save it as a custom profile that's right for your content.

After I encoded all this, I thought to myself, crap, the REALLY LOW bandwidth version is not acceptable. Do I have to re-encode to not include that one? I can just hack the .ism file manifest as it's just XML and remove all knowledge of that lower bit-rate file. UPDATE: There's a nice UI to managed rethe different bit rates, so no need to hack any XML.

It can be tricky to do the math and figure out what resolutions and bitrates to use for your smooth streaming content so you can use this Silverlight-based Smooth Streaming Multi-Bitrate Calculator. There's a WPF one also. To get really good quality you'll vary not only the bitrate, but also the resolution (but you'll stretch it, so the user won't know the resolution changed also.) Ultimately you have complete control as everyone's content has different needs.

The "More Info Than You Asked For" Section: What's Really Happening?

If you want a deep deep dive into what's going on, check out the Smooth Streaming section of Alex Zambelli's blog. It's wonderfully deep. A lot of people don't realize that Smooth Streaming is still just plain HTTP.

Traditionally streaming is a long running stream over a stateful protocol, where a packet is a some milliseconds of video.

Adaptive Streaming is chunked over HTTP where the client can choose different chunk sizes in various bit rates.

 

From Alex's blog:

A typical Smooth Streaming media asset therefore consists of the following files:

• MP4 files containing video/audio
  • *.ismv – contains video and audio, or only video
    • 1 ISMV file per encoded video bitrate
  • *.isma - contains only audio
    • In videos with audio, the audio track can be muxed into an ISMV file instead of a separate ISMA file
• Server manifest file
  • *.ism
  • Describes the relationships between media tracks, bitrates and files on disk
  • Only used by the IIS Smooth Streaming server – not by client
• Client manifest file
  • *.ismc
  • Describes to the client the available streams, codecs used, bitrates encoded, video resolutions, markers, captions, etc.
  • It’s the first file delivered to the client

Both manifest file formats are based on XML. The server manifest file format is based specifically on the SMIL 2.0 XML format specification.

With IIS7 Smooth Streaming, a client is expected to request fragments in the form of RESTful URLs:

http://video.foo.com/NBA.ism/QualityLevels(400000)/Fragments(video=610275114)

http://video.foo.com/NBA.ism/QualityLevels(64000)/Fragments(audio=631931065)

The values passed in the URL represent encoded bitrate (i.e. 400000) and the fragment start offset (i.e. 610275114) expressed in an agreed-upon time unit (usually 100 ns). These values are known from the client manifest.

But most importantly, therefore I make it bold and in red so you'll read it twice:

...what about dynamic bitrate switching that makes adaptive streaming so effective? This part of the Smooth Streaming experience is implemented entirely in client-side Silverlight application code – the server plays no part in the bitrate switching process.

An important thing to think about when doing network capacity planning is that in a traditional scenario, clients will drop to the bit rate they can sustain on average. In Smooth Streaming, it will continually hop up to the highest they can handle. Smooth Streaming gives each client the highest quality video they can handle. That may result in some network stress for the video provider and network infrastructure if you were expecting video that was less than awesome. ;)

Shiny.

A Q&A from Alex's Smooth Streaming FAQ

Q: Is Smooth Streaming based on Microsoft’s ASF file format? Or does it use some new proprietary file format?
A: No, the Smooth Streaming File Format is based on the ISO-standardized Base Media File Format, better known as the MP4 file format. It follows the ISO/IEC 14496-12 specification

Q: Will Smooth Streaming ensure I can deliver HD video to all my customers?
A: No. Smooth Streaming can’t perform any miracles; it’s simply an enhanced HTTP delivery method. Delivery of HD video is still bound by the efficiency of the codecs used: VC-1, H.264, etc. For example, most video experts would agree that 720p/24 video can’t be delivered at a satisfactory quality level with less than 2 Mbps encoded bitrate. Well, 2 Mbps of encoded video still requires 2 Mbps of network bandwidth in order to be delivered in real-time – and there’s nothing IIS7 or Silverlight can do to change that.

Q: Where can I see Smooth Streaming in action?
A: Visit SmoothHD.com for a demo of on-demand Smooth Streaming, with video content ranging up to 720p HD for those on fast connections (3 Mbps or more). Also check out the IIS.net demo which lets you simulate variable network bandwidth during playback. The only requirement to view Smooth Streaming video is a Silverlight 2 (or better) browser plugin. For a demo of live Smooth Streaming, check out Home Shopping Network’s 24-hr live shopping channel, also offering up to 720p in full-screen mode.

Conclusion

It's really easy to setup and easy to encode for Smooth Streaming. In my case, I just encoded the files off my HD video camera. You'll see more Smooth Streaming around various Microsoft sites that serve video in the coming months.

Have fun!

Related Links

• IIS Smooth Streaming Site

  • IIS *LIVE* Smooth Streaming - you can do this with LIVE content also, BTW.

  • Smooth Streaming Multi-Bitrate Calculator - It can be tricky to do the math and figure out what resolutions and bitrates to use for your smooth streaming content so you can use this Silverlight-based online calculator. There's a WPF one also.

• Silverlight Media Framework with Progressive Download Support - If you're going to do a player, this is where you start.

  • "SMF is built on a proven code base with dozens of leading Smooth Streaming deployments, including Wimbledon, Sunday Night Football on NBCSports, the UEFA Super Cup on Canal+, Roland Garros and the Tour de France on France Télévisions and many others and by providing developers with source code they can more easily build these experiences for their deployments. Key features in the framework include DVR, rewind, alternate language tracks, in-stream data feeds and analytics tracking. The SMF is designed for future third-party extensibility and component modularity, as well as support for other media delivery scenarios beyond Smooth Streaming."

• Adaptive Streaming Comparison - "In addition, IIS Smooth Streaming 4.0 will also provide an option for streaming to iPhone and QuickTime X players."

• Smooth Streaming

  • Smooth Streaming Technical Overview
  • Adaptive Streaming Comparison
  • Smooth Streaming for IIS 7.0 - Getting Started
  • Smooth Streaming for IIS 7.0 - Managing Your Presentations
  • Live Smooth Streaming
    • Live Smooth Streaming for IIS 7.0 - Getting Started
    • Live Smooth Streaming for IIS 7.0 - Creating and Managing Publishing Points
    • Live Smooth Streaming for IIS 7.0 - Syndicating Content between Servers
  • Web Playlists[Show All]
    • Web Playlists for IIS 7.0 - Configuration
    • Web Playlists for IIS 7.0 - Creating a Simple Playlist
    • Web Playlists for IIS 7.0 – Using Playlist With Different Media Players
    • Web Playlists for IIS 7.0 - Serving Media Content From User Folders
  • Bit Rate Throttling
    • Bit Rate Throttling Configuration Walkthrough
    • Bit Rate Throttling Extensibility Walkthrough
  • Smooth Streaming Deployment Guide
  • Windows Media Server or Web Server?
  • Using HTTP for Streaming and Downloading from the Same Computer
  • Edge Caching for Media Delivery
  • Adding Windows Media Services 2008 on an IIS 7.0 Server

My one-hundred-and-ninety-eighth podcast is up. I sit down with Erik Meijer from the Cloud Programmability Team to hear about the Reactive Extensions for .NET (Rx). Rx is a library for composing asynchronous and event-based programs using observable collections. Sound boring? Not even a little. Rx is a prescription for awesome.

Subscribe:

Download: MP3 Full Show

Links from the Show

• Rx Team Blog
• Reactive Extensions for .NET (Rx)
• B# .NET Blog
• Wes Dyer's Blog
• Jeffrey Van Gogh's Blog
• Danny van Velzen's Blog
• Lambda the Ultimate Blog
• Rx on Channel 9

Do also remember the complete archives are always up and they have PDF Transcripts, a little known feature that show up a few weeks after each show.

Telerik is our sponsor for this show.

Check out their UI Suite of controls for ASP.NET. It's very hardcore stuff. One of the things I appreciate aboutTelerik is their commitment tocompleteness. For example, they have a page about their Right-to-Left support while some vendors have zero support, or don't bother testing. They also are committed to XHTML compliance and publish their roadmap. It's nice when your controls vendor is very transparent.

As I've said before this show comes to you with the audio expertise and stewardship of Carl Franklin. The name comes from Travis Illig, but the goal of the show is simple. Avoid wasting the listener's time. (and make the commute less boring)

Enjoy. Who knows what'll happen in the next show?

You, Dear Reader, very likely don't need this information. I assume you're probably not a beginner. BUT, you likely KNOW a beginner. Share this information with them!

A bunch of people on Twitter discovered the MSDN Beginner Developer Center today. I tweeted it, figured it was a throw-away tweet and it was "re-tweeted" several dozen times. Apparently there's a hunger for Beginner content out there! Who knew? ;)

It's at http://www.msdn.com/beginner and here's some of the cool stuff. Tell your 12 year old and your great-aunt, Dear Reader. There may be a programmer inside one of them.

There's several tracks to go down, first the obvious Web Track and Windows Track, but also Aspiring Pro and Kid's Corner.

Web Track

The Beginner Web Developer center has three tiers, so you can start at various levels of "beginner." You can even start at the VERY beginning with no understanding of how the web works and go from there. The "Introduction to the Web" Video is very good! I'm going to send it to my Mom.

As you move through the three tiers you move up to VB and C# then start building a real application. Along the way you'll learn HTML, CSS, JavaScript and ASP.NET. There's also downloadable lessons, podcasts, videos and code.

Windows Track

This section has another nice video (in the absolute beginner part) in the style of "How Stuff Works" with an explanation of what an OS is, how a computer runs instructions, etc. It's a fun video. This section has lessons like "Life Before Mice" and "Problem Solving in Life and Technology."

Aspiring Professional

Taking it from amateur to "professional" is the real trick. I personally like to say that we're ALL amateurs. I mean, if you can get a gold medal in the Olympics as an amateur, then who am I to call myself a professional?

Regardless, there's more than just programming skills involved, there's also working in groups, as a team, in an office and how the software lifecycle works. There's also sections on moving to ASP.NET from PHP and moving to ASP.NET from Classic ASP.

Kids Corner

Do kids always get a korner because kids love alliteration? I assume so. They also get MS Comic Sans and other bright graphics to keep their tiny attention spans. Seriously, though, the videos are pretty cool and worth watching because it's fun to watch an 8 year old explain Object Oriented Programming.

• Video: What is the Internet - presented by kids
• Video: What are Objects and how does OOP work - presented by kids

As an aside, there's some really cool changes happening at MSDN...I've seen some artist comps and snuck stuff out before and used your feedback. I'm hoping to get a hold of some new screenshots and some insider stuff on the new low-bandwidth (and other) views for MSDN that will be launching soon. MSDN Libraries are getting faster, as fast as <2 second page load times worldwide is what I hear, so I'll try to dig up details on that also. More to come, soon.

I really advocate folks reading as much source as they can because you become a better writer by reading as much as writing. That's the whole point of the Weekly Source Code - reading code to be a better developer.

Reading code in Open Source projects is a good way to learn, especially if the project has been around a while and been successful, or if you already respect the team of people working on it. Less reliably, you can find snippets of code by searching and sharing code.

I love Emulators. They are magical. Earlier this year I interviewed Pete Brown when he created a C64 Emulator in Silverlight.

Now, it's Apple IIe time. From the Virtu Project Site, you can see that this source has been around in various forms for years...morphing from form to form.

Originally developed for RISC OS (3.11) on the Acorn Archimedes in 1995 using some C but mostly ARM assembly language. Published on the cover disk of the October 1997 issue of Acorn User. Later that year we started porting Virtu to Microsoft Windows (95) on the 'PC' using only C++ with DirectX. A port to Microsoft Windows CE (2.11) soon followed. These were tweaked over the next couple of years but never published. Fast forward to the present and the latest incarnation of Virtu, this time ported to the Microsoft .NET Framework (3.5 SP 1) using only C# with Silverlight, WPF and XNA (on both Windows and Xbox 360, which is limited to the .NET Compact Framework).

In this form, Virtu was written by Sean Fausett with some help from Nick Westgate. This code is interesting for a number of reasons. First, because it's a freaking AppleIIe emulator in a language I like to read (*cough* Not C *cough*), but also because it is cleanly structured and includes Silverlight (that means Mac also!), WPF and XNA (Xbox360) versions. It illustrates a way one can factor their code into an engine and various hosts.

IMPORTANT NOTE: To run, Virtu needs two files that are not included: An image of the standard or preferably the enhanced Apple IIe monitor ROM needs to be copied as 'AppleIIe.rom' (16 KB) to the Roms directory. An image of the Disk II (16 sector) interface card ROM needs to be copied as 'DiskII.rom' (256 bytes) to the Roms directory. You'll also need some disk in the form of a ".nib" file like RasterBlaster.nib, for example. I can't give you those files.

After a successful build, you should be able to run the emulator and perform a self test by pressing the hallowed key combination Control+OpenApple+CloseApple+Reset.

Looking at the WpfKeyboardService.cs, I can see how those keys I don't have are mapped to keys I do:

ModifierKeys modifiers = keyboard.Modifiers;
IsOpenAppleKeyDown = keyboard.IsKeyDown(Key.LeftAlt);
IsCloseAppleKeyDown = keyboard.IsKeyDown(Key.RightAlt);
IsResetKeyDown = ((modifiers & ModifierKeys.Control) != 0) && keyboard.IsKeyDown(Key.F12);

IsCpuThrottleKeyDown = keyboard.IsKeyDown(Key.F8);
IsVideoFullScreenKeyDown = keyboard.IsKeyDown(Key.F11);
IsVideoMonochromeKeyDown = keyboard.IsKeyDown(Key.F9);

Looks like that's ALT, ALT, CTRL, F12 which gives me a weird series of self test screens then "System OK" which is a good sign.

This is nice, now I can do a little Applesoft BASIC by booting to the monitor with Ctrl-F12 then typing this, then RUN.

10 TEXT:HOME
20 ?"HELLO WORLD"

Thrilling!

It's really fun code to read and it's a lot cleaner than you'd think for an emulator, although there's the expected Giant Scary Switch Statements here and there. Other parts definitely feel like they've been brought along from the past, although, how else would you do them? (Don't look in VideoData.cs, your face will melt.) For example, here's how they draw text (remembering that we're not using Fonts here, we've got a REALLY low res screen):

private void DrawText40(int data, int x, int y)
{
    int color = Machine.Settings.Video.IsMonochrome ? ColorMono00 : ColorWhite00;
    int index = _charSet[data] * CharBitmapBytes;
    int inverseMask = (_isTextInversed && !_memory.IsCharSetAlternate && (0x40 <= data) && (data <= 0x7F)) ? 0x7F : 0x00;
    for (int i = 0; i < TextHeight; i++, y++)
    {
        data = CharBitmap[index + i] ^ inverseMask;
        SetPixel(x + 0, y, color | (data & 0x01));
        SetPixel(x + 1, y, color | (data & 0x01));
        SetPixel(x + 2, y, color | (data & 0x02));
        SetPixel(x + 3, y, color | (data & 0x02));
        SetPixel(x + 4, y, color | (data & 0x04));
        SetPixel(x + 5, y, color | (data & 0x04));
        SetPixel(x + 6, y, color | (data & 0x08));
        SetPixel(x + 7, y, color | (data & 0x08));
        SetPixel(x + 8, y, color | (data & 0x10));
        SetPixel(x + 9, y, color | (data & 0x10));
        SetPixel(x + 10, y, color | (data & 0x20));
        SetPixel(x + 11, y, color | (data & 0x20));
        SetPixel(x + 12, y, color | (data & 0x40));
        SetPixel(x + 13, y, color | (data & 0x40));
    }
}

In Silverlight, they use the same (only) technique that Pete Brown's C64 emulator used to use, the new WriteableBitmap class. This means the XAML is just a single Image, and everything is a dynamically generated Bitmap. Here's the SilverlightVideoService.cs:

namespace Jellyfish.Virtu.Services
{
    public sealed class SilverlightVideoService : VideoService
    {
        public SilverlightVideoService(Image image)
        {
            _image = image;
            SetImageSize();

            _bitmap = new WriteableBitmap(BitmapWidth, BitmapHeight, BitmapPixelFormat);
            _pixels = new uint[BitmapWidth * BitmapHeight];

            Application.Current.Host.Content.Resized += (sender, e) => SetImageSize();
        }

        [SuppressMessage("Microsoft.Usage", "CA2233:OperationsShouldNotOverflow", MessageId = "y*560")]
        public override void SetPixel(int x, int y, uint color)
        {
            _pixels[y * BitmapWidth + x] = color;
            _pixelsDirty = true;
        }

        public override void Update()
        {
            if (Application.Current.RunningOffline && /*_window.IsActive &&*/ (_isFullScreen != IsFullScreen))
            {
                _isFullScreen = IsFullScreen;
            }

            if (_pixelsDirty)
            {
                _pixelsDirty = false;
                _bitmap.Lock();
                for (int i = 0; i < BitmapWidth * BitmapHeight; i++)
                {
                    _bitmap[i] = (int)_pixels[i];
                }
                _bitmap.Invalidate();
                _bitmap.Unlock();
                _image.Source = _bitmap; // shouldn't have to set source each frame; SL bug?
            }
        }

        private void SetImageSize()
        {
            Content content = Application.Current.Host.Content;
            int uniformScale = Math.Min((int)content.ActualWidth / BitmapWidth, (int)content.ActualHeight / BitmapHeight);
            _image.Width = uniformScale * BitmapWidth;
            _image.Height = uniformScale * BitmapHeight;
        }

        private const int BitmapWidth = 560;
        private const int BitmapHeight = 384;
        private static readonly PixelFormat BitmapPixelFormat = PixelFormats.Bgr32;

        private Image _image;
        private WriteableBitmap _bitmap;
        private uint[] _pixels;
        private bool _pixelsDirty;
        private bool _isFullScreen;
    }
}

It's a nice codebase and fun to step through. If you're interested in learning about emulation, check it out.

There are Wiki pages with details and quirks for each platform, WPF, XNA and Silverlight. There's still work to be done, so you might head over there and offer to help!

My one-hundred-and-sixty-fourth podcast is up. When's Silverlight 10 coming out? These versions are moving pretty fast. Scott chats with Tim Heuer to try and make sense of it. How does offline for Silverlight work? What's the best way to keep on the this new tech.

Subscribe:

• Download: MP3 Full Show #164
• Play in your browser

Do also remember the complete archives are always up and they have PDF Transcripts, a little known feature that show up a few weeks after each show.

Telerik is a sponsor for this show!

Building quality software is never easy. It requires skills and imagination. We cannot promise to improve your skills, but when it comes to User Interface, we can provide the building blocks to take your application a step closer to your imagination. Explore the leading UI suites for ASP.NET and Windows Forms. Enjoy the versatility of our new-generation Reporting Tool. Dive into our online community. Visit www.telerik.com.

As I've said before this show comes to you with the audio expertise and stewardship of Carl Franklin. The name comes from Travis Illig, but the goal of the show is simple. Avoid wasting the listener's time. (and make the commute less boring)

Enjoy. Who knows what'll happen in the next show?