How to build your first HTML5 Windows 8 Smooth Streaming Application

Posted: Mar 28, 2012  15 comments  

Average Rating

Tags
media
Smooth Streaming
ssme
Video
wams
windows 8
windows azure media services

Share this Post

In this post I'll cover how to build a basic HTML5 Windows 8 Smooth Streaming application using the Microsoft Smooth Streaming Client SDK Beta for Windows 8. This basic application enables the HTML5 <Video> tag with Smooth Streaming in Windows 8 apps. For rich applications and general player development, I strongly encourage you to use the Microsoft Media Platform Player Framework. You can get more information about the Player Framework here.

Later, I will cover "How to build a basic XAML Smooth Streaming Windows 8 application" in a separate post.

Note: This post is updated for Windows 8 RP compatability and tested with the Windows 8 Release Preview and Visual Studio 11 RC releases. Unexpected results might occur if you run the SDK on different versions of this software.

Prerequisites

· Windows 8 Release Preview (RP) (32-bit or 64-bit) OS. You can get from here.

· You should have either Visual Studio 2012 RC or Visual Studio Express 2012 RC for Windows 8 installed on Windows 8. You can get more information on this here.

· Install the "Microsoft IIS Smooth Streaming Client SDK Beta 1 for Windows 8 " from here.

· Basic JavaScript knowledge is required.

Note: This post is based on pre-release (Beta) builds of software and components; therefore, some features might not be available or supported for some devices and subject to change without notification.

Create the JavaScript Windows Store Project

The very first thing you need to do is create a JavaScript Windows Store project.

1. Open Visual Studio Express 2012 or Visual Studio 2012 .

2. Go to File –> New Project.

3. Chose JavaScript as the project Type and then select Windows Store. Choose Blank Application, name it SS_Metro_Player.


4. In your project, go to references (Windows à Extensions) and add "Microsoft Smooth Streaming Client SDK Beta 1 for Windows 8", "Microsoft Visual C++ Runtime Package" and "Windows Library for JavaScript 1.0"to the references.


 

5. Add "Home or Work Networking" capabilities to your application. (This step is needed if you want to support local source URLs. Ex: http://mycompany/video1.ism/manifest.)

Double-click "package.appxmanifest" file and then go to Capabilities. Mark the check box "Home or Work Networking"

Note: If you want to support enterprise authentication protected sources, you should consider adding "Enterprise Authentication" to capabilities as well. More information can be found here.

Register the Smooth Streaming Byte Stream Handler

Next, you must register the Smooth Streaming Byte Stream handler, which identifies the URL or MIME-type combination that is sent to the Smooth Streaming extension.

To do this:

Open default.js in your project and add the following:

Code Snippet

// For an introduction to the Blank template, see the following documentation:

// http://go.microsoft.com/fwlink/?LinkId=232509

(function () {

"use strict";

var app = WinJS.Application; var activation = Windows.ApplicationModel.Activation;

WinJS.strictProcessing();

// Smooth Streaming Byte Stream Handler Registration

var plugins = new Windows.Media.MediaExtensionManager(); try {

plugins.registerByteStreamHandler("Microsoft.Media.AdaptiveStreaming.SmoothByteStreamHandler", ".ism", "text/xml");

plugins.registerByteStreamHandler("Microsoft.Media.AdaptiveStreaming.SmoothByteStreamHandler", ".ism", "application/vnd.ms-sstr+xml");

}catch (e) {

alert.message(e.message);

}

// Smooth Streaming Byte Stream Handler Registration

app.onactivated = function (args) {

if (args.detail.kind === activation.ActivationKind.launch) {

if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

// TODO: This application has been newly launched. Initialize

// your application here.

} else {

// TODO: This application has been reactivated from suspension.

// Restore application state here.

}

args.setPromise(WinJS.UI.processAll());

}

};

app.oncheckpoint =
function (args) {

// TODO: This application is about to be suspended. Save any state

// that needs to persist across suspensions here. You might use the

// WinJS.Application.sessionState object, which is automatically

// saved and restored across suspension. If you need to complete an

// asynchronous operation before your application is suspended, call

// args.setPromise().

};

app.start();

})();

Add the HTML5 Video Element

Next, you need to add Html5 video element.

To do this; open default.html and add the <video> tag:

Code Snippet

<!DOCTYPE html> <html>

<head>

<meta charset="utf-8" />

<title>SS_Metro_Player</title>

<!-- WinJS references -->

<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />

<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>

<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

<!-- SS_Metro_Player references -->

<link href="/css/default.css" rel="stylesheet" />

<script src="/js/default.js"></script> </head>

<body>

<!-- Video tag -->

<video id="Video1" autoplay="autoplay" controls="controls" src="http://mediadl.microsoft.com/mediadl/iisnet/smoothmedia/Experience/BigBuckBunny_720p.ism/Manifest" style="height: 100%; width: 100%; margin: auto"></video>

<!-- Video tag -->

</body> </html>

The above example has a video element with default controls (Play/Pause/Seek/Volume Control) that consumes a Smooth Streaming source. This is all you need for a basic layout.

Compile and Run the Application

Change your platform type to x64, x86 or ARM depending on which platform you're targeting, and then build your project.

Leaving the Any CPU option selected will display the following warning in the References section in Visual Studio: 

 

You might get compilations errors and warnings such as the following:

The SDK depends on the Microsoft Visual C++ Runtime Package. Failing to add this dependency to the project references will cause Visual Studio to generate compilation errors and warnings, such as the following:
 

Note: Building in 'Any CPU' will fail with following compile errors.

  • Could not find SDK “Microsoft.VCLibs, Version=11.0″.
  • “APPX” attributes were found in the SDK manifest file however none of the attributes matched the targeted configuration and architecture and no “APPX” attribute without configuration and architecture could be found. If an appx is required then the project will fail at runtime.
  • The referenced component ‘Microsoft Visual C++ Runtime Package’ could not be found.
  • Manifest references file 'Microsoft.Media.SmoothStreaming.dll' which is not part of the payload.

Note: There is a known issue regarding to autoplay="autoplay".Sometimes it won't work and you must click Play.

Summary

In this post, we reviewed how to create a basic HTML5 Windows 8 Smooth Streaming application with default controls for playback of Smooth Streaming content.

Here is what you will see after completing all of the steps:

Let me know if you have issues or need further help.

Note: These are just samples meant for educational purposes and there's no guarantee conferred on the code quality. All the samples are based on pre-release (Beta) builds of software and components; therefore, some features might not be available or supported for some devices and subject to change without notification.

Comments

Hi,

Got the sample code working just fine. Undocked & docked the tablet several times, no problems while playing the video.

However, am now getting 'Error: Unsupported video type or invalid path' when I start the app (F5 from VS 11 beta)

I haven't changed any code.

Even applied the latest updates for Windows 8 Consumer Preview.

So, now I'm stuck

Any clues ?

Apr 02 2012 by silvergrey

Thanks for testing and reporting that. Unsupported video type or invalid path error is similar to "MF_MEDIA_ENGINE_ERR_SRC_NOT_SUPPORTED" error.

There is a known issue with some of the manifest files.

Please refer to readme file located here. learn.iis.net/.../smooth-streaming-client-sdk-beta-1-for-metro-style-apps-release-notes

Apr 02 2012 by cenk.dingiloglu

Hi Cenk,

thanks for a great post. Just wanted to let you know that I had got two errors when trying to compile. Those were

- Could not find SDK “Microsoft.VCLibs, Version=11.0″

-“APPX” attributes were found in the SDK manifest file however none of the attributes matched the targeted configuration and architecture and no “APPX” attribute without configuration and architecture could be found. If an appx is required then the project will fail at runtime.

This is happens if you do not set the Platform target to either x86 or x64. Doing that solves the issue.

Issue described in:

msdnrss.thecoderblogs.com/.../using-bing-maps-in-a-windows-8-metro-style-app

Apr 20 2012 by niclasam

Thanks for testing it and reporting the issue.

I already mentioned about the Any platform build problem under "Compile and Run the Application" section, but forgot to add the VClibs problem. I'm updating the post based on your info.

Thanks,

Cenk

Apr 25 2012 by cenk.dingiloglu

Having a reference to the Microsoft.Media.SmoothStreaming.dll in a Metro Style App project, then attempting to run tests from a separate Unit Test project does not work in Visual Studio 11, even with the processor types both set to either x86 or x64 in the Debug compilation configuration.

As described in this article, the platform target of the Metro Style App must be set to either x86 or x64.  The Unit Test project target must match the setting of the Metro Style App when it contains a reference to the Metro Style App assembly, otherwise you get the following error:

"Error 1 There was a mismatch between the processor architecture of the project being built "MSIL" and the processor architecture of the reference "%APPROOT%\bin\x86\Debug\UVerseApp.exe", "x86". This mismatch may cause runtime failures. Please consider changing the targeted processor architecture of your project through the Configuration Manager so as to align the processor architectures between your project and references, or take a dependency on references with a processor architecture that matches the targeted processor architecture of your project"

When both are set to x64, the solution compiles and runs fine but the Unit Test Explorer will not discover any of the tests from the unit test project, so you can't run them or even see them.

When both are set to x86, the solution builds fine and the Unit Test Explorer properly displays all tests.  However, if you attempt to run any of the tests, you encounter an application error in vstest.executionengine.appcontainer.x86.exe every time.  The Metro app will still run fine - this only happens when you attempt to run or debug tests methods using Unit Test Explorer.

Is this a known issue and/or are there any possible workarounds?

May 09 2012 by pcullin

Hi Cenk,

Is there a possibility that you could update this post for Release Preview? I'm having some trouble getting the Smooth Streaming to work. I've changed the RegisterByteStreamHandler to point to Microsoft.Media.AdaptiveStreaming.SmoothByteStreamHandler

Also, there is no registration in the package file anymore (according to the docs this happens automatically when referencing the SDK).

I've tested my app in both x64 and x86 mode.

The player just fails with the message MF_MEDIA_ENGINE_ERR_SRC_NOT_SUPPORTED : HRESULT - 0xC00D36C4

Thanks!

Jun 06 2012 by hannes.nel

Hi,

have you ever referenced the problem of hannes.nl? I have exactly the same problem. We have 4 Windows 8 machine (2 desktop and 2 tablets), just on 2 of them, smooth streaming video is ok.

If the problem is known, have you a fix or do you know when this fix will be available?

Thanks!

Jun 25 2012 by nicosang

Hi Hannes, Nico,

The blog page is up to date to cover Win8 RP and VS 2012 Beta2.

Can you describe your scenarios? Which of the machines are working, desktops or tablets and what are the Win8 versions? “HRESULT - 0xC00D36C4” can be get when the ByteStreamHandler cannot be recognized or the source is different than Smooth Streaming. Are you using the below blog step?

Thanks,

Cenk

Jun 25 2012 by cenk.dingiloglu

Hi,

now, we just have the problem on 1 tablet with Windows 8 RC Build 8400. This tablet has no visual studio Tools. We would like to use it for testing our appx package (with powerShell). We have the 0xC00D36C4 error with smooth streaming video Stream. With fiddler tool, we can see that the http request to get manifest file is ok ( returns 200), but there is video failed.

Any idea?

thanks,

Jun 27 2012 by nicosang

Experiencing similar issues as above.

Could this be related to distributing the Visual C++ runtime onto a machine without a Developer's License?

(see social.msdn.microsoft.com/.../d18269c0-d16c-4d18-b7f4-a407dc4ef79e)

Jun 27 2012 by kevinmills

I added the following to my Package.appxmanifest

<Dependencies>

   <PackageDependency Name="Microsoft.VCLibs.110" MinVersion="11.0.0.0" />

</Dependencies>

and the Smooth Streaming (with DRM!) worked.

Hope this helps someone :-)

Jun 27 2012 by kevinmills

Yes, indeed, that was the problem!!!!

thanks a lot!

Jun 28 2012 by nicosang

Yes, indeed, that was the problem!!!!

thanks a lot!

Jun 28 2012 by nicosang

Yes, indeed, that was the problem!!!!

thanks a lot!

Jun 28 2012 by nicosang

Hi Cenk,

I make app that use smooth streaming,

have problem when create app packages for market, I can't build for any CPU

If I build for x64, 86 or ARM build package success

How to build on any CPU?

Because for submit app only one packages can be upload CMIIW

Thanks

Oct 12 2012 by Kaz32

Submit a Comment

  • Plain text is accepted.
  • URLs starting with http:// are converted to links.