Giuseppe Guerrasio

Using a global audio player and EE4 for live audio Smooth Streaming on Windows Phone 7

Giuseppe Guerrasio — Wed, 22 Jun 2011 14:43:00 GMT

After my previous post about Smooth Streaming on Windows Phone 7 I received questions about Live Audio Streaming on Windows Phone 7. In particular the most recurrent questions are:

- Is it possible to create a global audio player that works in every page of my application?

- Is it possible use Expression Encoder 4 for Audio only Live Smooth Streaming?

I would try to respond to these questions starting from the first.

Is it possible to create a global audio player that works in every page of my application?

I assuming that you are familiar with Smooth Streaming Media Element on Windows Phone, in the case that you want learn more about how use it you can read my previous blog post about this.

Smooth Streaming Media Element (SSME) is a UI control. In order to works it is necessary insert this in the visual tree of your page. If you insert this in the visual Tree of a page and after that your application navigates in other pages, SSME stopped. If you would create a global SSME for audio streaming that continue to works in every page of your application, the most simple thing that you can do is put it in the template of the page and take a reference to it in a property on the App object.

In order to understand how it is possible do this, you can create a simple Windows Phone Visual Studio project . You can start a new Windows Phone 7 project from Visual Studio using the specific template project:

And after that you can add a reference to Microsoft.Web.Media.SmoothStreaming.dll for WP7 (look my previous blog post about this for more info ):

In order to insert the Smooth Streaming Media Element in the template of the page, you have to create a new template and insert it in the app.xaml as a resource. To add the SSME to this template you have to add this reference to the app.xaml, in the <Application tag:

xmlns:SSME="clr-namespace:Microsoft.Web.Media.SmoothStreaming;assembly=Microsoft.Web.Media.SmoothStreaming"

After that, you can add this new control template inside the <Application.Resources> tag in app.xaml:

<ControlTemplate x:Key="AudioPlayerContentTemplate">

<Grid x:Name="MediaElementContainer">

<ssme:SmoothStreamingMediaElement Loaded="OnMediaLoaded" Height="1" Width="1" />

<Grid x:Name="ClientArea">

<ContentPresenter />

</Grid>

</ControlTemplate>

We use this control template to substitute the default template that the Phone use for the Root Phone Page. In the App.cs file add the code to inject the template in the method CompleteInitializePhoneApplication :

private void CompleteInitializePhoneApplication(object sender, NavigationEventArgs e)

{

// Set the root visual to allow the application to render

if (RootVisual != RootFrame

RootVisual = RootFrame;

// Remove this handler since it is no longer needed

RootFrame.Navigated -= CompleteInitializePhoneApplication;

// Add this to inject the smooth streaming media element Control template

RootFrame.Template = App.Current.Resources["AudioPlayerContentTemplate"]

as ControlTemplate;

}

In App.cs we can also add a property that can permit to access to the SSME loaded in the template and the event to load it from the template that we have declared in the template xaml listed before. We set also the SmoothStreamingPlaybackMode to PlaybackMode.AudioOnly, in order to ask to SSME to download only audio chunk and ignore video tracks that could be presents in the manifest:

private static SmoothStreamingMediaElement _globalMediaElement = null;

public static SmoothStreamingMediaElement GlobalMediaElement

{

get { return _globalMediaElement; }

}

private void OnMediaLoaded(object sender, RoutedEventArgs e)

{

if (_globalAudioElement == null)

{

_globalAudioElement = sender as SmoothStreamingMediaElement;

_globalAudioElement.SmoothStreamingPlaybackMode = PlaybackMode.AudioOnly;

}

After that, you can access from every page of the page to App.GlobalMediaElement and use it to set the SmoothStreamingSource and control Play and Stop.

For example you can add this to the LoadedEvent in the mainpage of your application, in order to start the stream:

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)

{

if ((App.GlobalAudioElement.CurrentState == SmoothStreamingMediaElementState.Stopped) || (App.GlobalAudioElement.CurrentState == SmoothStreamingMediaElementState.Closed))

{

App.GlobalAudioElement.SmoothStreamingSource = new Uri(http://server/live/audiolivestream.isml/Manifest);

}

Is it possible use Expression Encoder 4 for Audio only Live Smooth Streaming?

Yes, it is possible use Expression Encoder 4 Pro Sp1 to stream audio only live Smooth Streaming. You can also use others encoders compatible with Smooth Streaming for delivering Live Audio with this type of streaming. The current version of Smooth Streaming supports the adaptive streaming capability only for the video tracks. You can insert more audio tracks but these tracks can't be used for adapt the quality to the avaliable bandwith but only as alternative tracks that the user can select ( for example different languages tracks ). EE4 SP1 doesn't support multi audio track and if you need to insert more track you have to use a different encoder that support this or you can create more streams with separate manifests with EE4.

The current version of EE4 Pro Sp1 dosen't permit to create a live smooth streaming project without a video track, but you can insert a black screen video track and ignore it on a client side. In order to do that you have to select in the live project only the audio input and inserting in the manifest also one video track, that stream a black screen with a low bitrate. In the player based on SSME on the Windows Phone, or on in Silverlight for PC if you set the property SmoothStreamingPlaybackMode to PlaybackMode.AudioOnly, before to set the SmoothStreamingSource property, Smooth Streaming Media Element download only the audio track and ignore the video track that you have inserted in the manifest.

In order to configure EE4 Pro SP1 to deliver this in order to use Audio only live Smooth Streaming with IIS Media Services you need to use a PC with IIS Media Services 4 and EE4 Pro SP1.If you aren't familiar with Live Smooth Streaming, you can find more information about how configure IIS Media Services and Expression Encoder 4Pro SP1 for Live Smooth Streaming in this tutorial .

You can start a new EE4 project and select a Live Broadcasting project:

Add a Live Source:

Select only the audio device input:

Select from the preset for the project the H264 IIS Smooth Streaming for Windows Phone 7 presets and reduce the video tracks to only one wher you select a low resolution with a low frame rate:

connect the output of EE4 to a publishing point on IIS Media Services and start the encoding ( if you aren't familiar with Live Smooth Streaming, you can find more information about how configure IIS Media Services and Expression Encoder 4Pro SP1 for Live Smooth Streaming in this tutorial ):

Now you can set the url of the publishing point in the SSME player on Windows Phone 7 and pay attention to set the property SmoothStreamingPlaybackMode to PlaybackMode.AudioOnly, before to set the SmoothStreamingSource property, and you are able to Play the Live Audio only Smooth Streaming.

Enjoy !!!

Monitoring and Management services in IIS Transform Manager 1.0 Beta

Giuseppe Guerrasio — Fri, 17 Jun 2011 15:29:00 GMT

IIS Transform Manager 1.0 – Beta refresh is available for download. IIS Transform Manager (IIS TM) is a new component of the next version of the IIS Media Services platform and provides a simple integrated video encoding/encrypting and batch conversion and transformation of video files. IIS Transform Manager integrates directly with Expression Encoder 4 to allow you to use "watch folders" to queue up multiple encode jobs on your server and deliver them directly to IIS Media Services 4.0 Web folders as IIS Smooth Streaming presentations. Transform Manager offers also an SDK that permits developers to write custom Task plug-ins that can be used with Transform Manager to support custom actions, third-party encoders, or your own custom workflows. IIS TM can permit to you an easly scalability for your transformations workflow because you could leverage Windows server HPC (High Performance Computing) and scale out your encoding\trans-mux tasks on a grid of servers in easy way. In the next picture you can see the typical architecture that you can implement using IIS TM:

As I have written in others articles in Italy we have some important customers that use today IIS TM Beta in some relevant video service like RAI Replay TV and Video Mediaset web site.

You can learn more about IIS TM starting from the page dedicated to this new service on IIS Media Sevices Web site.

With this new Beta coming some new interesting features in IIS TM like the new Notifications service and the Monitoring and Management API.

Notifications service can permit to you to send notifications as a POST web requests with job status changes to a remote web application or service. This enables web developers to build a custom Transform Manager job-monitoring system. You can learn more about notifications in IIS TM in this tutorial on IIS Media Web site.

The new Monitoring and Management API can permit to manage Jobs using custom code. You can directly use the same API that the Management Console application uses, in order to create custom code to manage and monitoring Jobs Status and IIS TM configuration. You can send any command to IIS TM from your code and execute operation like stopping or resubmiting a Job. These API are available as WCF endpoints. You have to use a process that runs in the context of a user with administrative privilege to use these endpoints.

Before to start to use IIS TM and this features make sure that you have downloaded the latest IIS TM Beta build (build 1151.5) from the Microsoft download center in order to have the right build where this API works with the right behavior.

The interfaces of this API are described in the IIS TM SDK and these offering a large numbers of methods useful to manage and monitoring Jobs and IIS TM configurations.

You can consume these WCF Endpoints in a very simple way using Visual Studio 2010. For example you can build in a very simple way a WPF app that is able to consume these API.

In order to do this you can open Visual Studio using “run as Administrator” in order to have the right permissions to consume management and monitoring API:

From Visual Studio you have to create a new WPF project:

In the Solution Explorer you can add a Service reference to the management and monitoring API on the PC where you running the IIS TM and Visual Studio:

The addresses of the WCF endpoints are:

net.tcp://localhost:59999/TransformManager/Management/Monitoring

net.tcp://localhost:59999/TransformManager/Management/Management

and the metadata URL where is available the WSDL is:

net.tcp://localhost:59999/TransformManager/Management/mex

You can use the metadata URL and insert it in the service reference wizard that creates for you the WCF proxy code to access to the services endpoints:

After the creation of the WCF proxy, you can add a reference to the WCF proxy namespace to your WPF window code, in my case ia called the namespace of the project IISTMTest and the namespace of the proxy ServiceReference1:

using IISTMTest.ServiceReference1;

and you can use the proxy classes ManagementServiceClient and MonitoringServiceClient in order to consume the IIS TM services.

For Example , you can add a Button and a ListBox with a DataTemplate to the WPF Window in order to show some details from the Jobs:

<Window x:Class="IISTMTest.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="350" Width="525">

<Grid>

<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="22,12,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />

<ListBox Height="100" HorizontalAlignment="Left" Margin="12,73,0,0" Name="listBox1" VerticalAlignment="Top" Width="479" >

<ListBox.ItemTemplate>

<DataTemplate>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<TextBlock Margin="10,0,0,0" Grid.Column="0" Text="{Binding JobSchedulerId}"/>

<TextBlock Margin="10,0,0,0" Grid.Column="1" Text="{Binding JobSchedulerName}"/>

<TextBlock Margin="10,0,0,0" Grid.Column="2" Text="{Binding EndTime}"/>

</Grid>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</Grid>

</Window>

and in the click event of the button you can write this code:

private void button1_Click(object sender, RoutedEventArgs e)

{

MonitoringServiceClient svc = new MonitoringServiceClient();

int num=svc.GetJobCountByStatus(JobStatus.Finished);

JobDetails[] jobs =svc.GetJobDetails(JobStatus.Finished,JobDetailsField.JobSchedulerId, true, 0, num);

listBox1.ItemsSource = jobs;

}

And in this way you could list all the finished Jobs and show some properties about these in the ListBox.

In the IIS TM SDK you can find all the methods available from IManagementService and IMonitoringService that you can call using the WCF Proxy classes created from the WSDL of the IIS TM service using the Visual Studio service reference wizard.

Because the methods from the services require that the process that call the services run in the context of a user with administrative elevated privilege, in order to run the exe compiled, you have also to add a .manifest file with the configuration that required the administrative privilege for the .exe. For this reason you have to add a new item to the project and insert an app.manifest file:

In the manifest file you have to configure the requestedExecutionLevel in order to require administrative privilege:

<?xml version="1.0" encoding="utf-8"?>

<asmv1:assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1" xmlns:asmv1="urn:schemas-microsoft-com:asm.v1" xmlns:asmv2="urn:schemas-microsoft-com:asm.v2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

<assemblyIdentity version="1.0.0.0" name="MyApplication.app"/>

<trustInfo xmlns="urn:schemas-microsoft-com:asm.v2">

<security>

<requestedPrivileges xmlns="urn:schemas-microsoft-com:asm.v3">

<!-- UAC Manifest Options

If you want to change the Windows User Account Control level replace the

requestedExecutionLevel node with one of the following.

<requestedExecutionLevel level="asInvoker" uiAccess="false" />

<requestedExecutionLevel level="requireAdministrator" uiAccess="false" />

<requestedExecutionLevel level="highestAvailable" uiAccess="false" />

Specifying requestedExecutionLevel node will disable file and registry virtualization.

If you want to utilize File and Registry Virtualization for backward

compatibility then delete the requestedExecutionLevel node.

-->

<requestedExecutionLevel level="requireAdministrator" uiAccess="false" />

</requestedPrivileges>

</security>

</trustInfo>

</asmv1:assembly>

After this you can run directly the .exe file.

Enjoy this new API from IIS TM and start to build great applications for managing videos workflow !!

JSDay Talks

Giuseppe Guerrasio — Thu, 12 May 2011 11:59:00 GMT

JSDay Talks:

Using today HTML5 Video

The new HTML5 video and audio tags from the HTML5 specification offer a new powerful way to deliver multimedia content using directly HTML and JS . How we can start to use this new features in our web sites ? In this session we will analyze how to use them to play media in modern browsers and on mobile devices. Learn the most advanced techniques and best practices, including encoding and distribution, custom skinnable players, full screen workarounds, seeking settings and fallback scenarios for legacy browsers..

download slides

HTML5, CSS3 – Opening A Whole New World

New web standards like HTML5, CSS3, and ECMAScript, web designers and developers now have a whole new set of tools they can use to build a new class of web applications that are graphically rich and have more immersive experiences than ever before. But do you really know what this new class of HTML5 web applications is capable of? What’s in HTML5 that lets us take our sites to the next level? Let’s find out!

download slides

The new Internet Explorer: Standards, Performance, Security and the new JavaScript Engine

Internet Explorer 9 is here and it is a big step forward for Windows’s browser. Main areas of improvements for IE9 are: Standards, Performance and Security. In this session we will see how Internet Explorer 9 allows developers to build new and exciting web sites using open web standards like HTML5, CSS3 and more. Today’s websites and browsers only use 10% of what your PC offers, but with Internet Explorer 9 you can tap into the power of Windows and your whole PC so your websites look and perform as if they were native to Windows with GPU accelerations and the new JavaScript engine. And because it’s build on standards, the same markup you write not only works across the web, but runs faster and delivers a richer experience through Windows and Internet Explorer 9 and 10!.

download slides

W3C Navigation timing raggiunge lo stato di Candidate Raccomandation

Giuseppe Guerrasio — Fri, 25 Mar 2011 09:00:00 GMT

Sono trascorse solo poche settimane dal post che ho scritto relativamente alle API Navigation Timing che abbiamo già la specifica in candidate raccomandation, come scrive anche il blog ufficiale di IE a volte le specifiche negli enti di standardizzazione riescono a viaggiare velocemente ed a trovare una convergenza rapida all'interno del working group che le segue (Web Performance working group). Solo sei mesi fa la specifica era nello stato di Working Draft to Raccomandation e in poco tempo tutti gli attori del working group da rappresentanti di Opera , Google, Mozilla e Microsoft hanno lavorato convergendo sulla specifica. Lo stato di Candidate Raccomandation significa appunto che il working group considera la specifica stabile e sufficientemente matura per l'implementazione.

A partire dalla RC di IE9 la Navigation Timing interface è implementata senza più il prefisso del vendor e potete provarla su questa pagina del IE Test Drive

Il working group sta già lavorando a due nuove interfacce Resource Timing e User Timing che aggiungeranno delle funzionalità che consentiranno agli sviluppatori di misurare ulteriorment le prestazioni delle singole risorse.

Determinare in modo corretto la versione del browser in Internet Explorer 9

Giuseppe Guerrasio — Mon, 21 Mar 2011 20:06:00 GMT

Implementare codice dipendente dalla versione del browser e quindi effettuare quella che si chiama "browser detection code" è una modalità di sviluppo assolutamente da evitare, fonte di complicazioni ed errori come ben messo in evidenza in questo post sul blog di IE e come ho anche illustrato in questo post sul mio blog che mostra appunto un esempio dei possibil errori derivanti dall'utilizzo di questa tecnica. Ci sono però casi in cui può essere utile determinare la versione del browser in uso. Uno dei problemi tipici che mi capita di incontrare relativamente a script sviluppati Internet Explorer è relativo appunto alla parte di codice che viene utilizzata per determinare la versione di IE. In molti casi gli sviluppatori non tengono in considerazione il comportamento di IE9 relativo alle funzionalità di compatibilità e quindi dei differenti document mode che il browser supporta e la modalità con cui si applicano, scrivendo del codice che produce degli errori nel riconoscimento della versione.

Per determinare la versione del browser via JS si utilizzano genericamente le API navigator.appVersion, navigator.userAgent e navigator.appName ma spesso nel codice che viene scritto , non si tiene conto delle differenti modalità di document mode che Internet Explorer applica, generando quindi degli script che non determinano correttamente la versione del browser. Internet Explorer può infatti, applicare versioni di document mode diverse in base alla struttura del DOCTYPE della pagina e quando viene abilitata la compatibility view, può anche inviare al Web Server uno user agent differente anche nell'header della richiesta HTTP e quindi non soltanto nelle API JS dell'oggetto navigator.

In questo articolo su MSDN trovate un'ottima descrizione dei differenti document mode di Internet Explorer ed in questo post una descrizione del browser mode, del ruolo della compatibility view e del document mode. Determinare il document mode che si applica nell'esecuzione di un a pagina è molto importante non solo per la versione del browser, ma anche perchè le funzionalità di HTML5 in IE9 vengono implementate solo con l'applicazione del document mode IE9 Standard. E' possibile determinare con facilità quale document mode o browser mode viene applicato nella navigazione con IE9 su un sito, utilizzando la developer toolbar. Facendo F12 dopo aver caricato la pagina, comparirà la developer toolbar e tra i menù disponibili troverete anche il browser mode e il document mode che indicano le modalità in quel momento in uso, come potete vedere nell'immagine di seguito:

i menù permettono anche di forzare l'applicazione di uno specifico browser mode o document mode.

Moltissimi script che usano la navigator.appVersion , fanno detect del numero di versione senza tener presente che in caso si applichino document mode precedenti, nella app version viene indicato come primo elemento la versione del browser verso cui il browser sta applicando la compatibiltà, oltre all'indicazione appunto, della versione del browser. Ad esempio nel caso di rendering di una pagina senza DOCTYPE il browser andrà a caricarla in quirks mode e avremo per il valore di navigator.appVersion:

"5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; OfficeLiveConnector.1.4; OfficeLivePatch.1.3; .NET4.0C; .NET4.0E; InfoPath.3; MS-RTC LM 8; Zune 4.7)"

dove vedete indicato per primo il valore 5.0 proprio perchè si applica il document mode corrispondente appunto alla modalità quirk e viene indicata la versione di IE9 in modalità compatibile.

Per poter determinare correttamente via JavaScript la versione dl browser e distinguerla anche dal document mode in uso nella pagina è consigliabile usare una funzione come quella indicata di seguito, valida anche per le versioni precedenti e che continuerà a funzionare anche per le successive versioni di IE :

La funzione ritorna -1 nel caso in cui il browser non è Internet Explorer, altrimenti riporta la versione del browser indipendentemente dal document mode in uso nell'esecuzione della pagina.

HTML5:Manipolare i Pixel con il Canvas

Giuseppe Guerrasio — Wed, 16 Feb 2011 09:24:00 GMT

Nei precedenti post sul Canvas ho introdotto le API fondamentali del context 2D e come gestire le animazioni con questo elemento HTML5 che Internet Explorer 9 possiamo sfruttare avvalendoci della accelerazione grafica garantita dal nuovo browser.

Un'altra interessante potenzialità del Canvas che a partire dalla RC di IE9 è stata completata e migliorata significativamente dal punto di vista delle performance, riguarda la possibilità di utilizzare le API del Canvas che consentono via JavaScript di manipolare direttamente a livello di Pixel con un approccio RGBA il contenuto del Canvas, consentendo l'applicazione di trasformazioni e manipolazioni del contenuto, utili per costruire interessanti effetti grafici nelle nostre applicazioni Web. La principale API disponibile sul context 2D del Canvas che consente l'accesso ai pixel è il metodo getImageData(posX,posY,imgWidth,imgHeight). Questo metodo restituisce un CanvasPixelsArray che contiene essenzialmente i pixel dell'immagine estratta nella proprietà data alla posizione e con le dimensioni passate al metodo. E' possibile accedere e modificare il contenuto dell'array contenente i pixel e riapplicare l'arrai con le modifiche ad un Canvas in una specifica posizione con il metodo putImageData(pixelsArray,posX,posY) .

Il CanvasPixelsArray consente di accedere ai pixel come abbiamo detto, con una struttura rgba.Contiene praticamente per ogni pixel 4 posizioni, 3 contengono rispettivamente i valori da 0 a 255 RGB e una contiene l'alpha . Ad esmpio per accedere al parametro alpha del primo pixel estratto con getImageData, occorre accedere all'elemento nella posizione 3 dell'Array, mentre ad esempio nella posizione 4 troviamo il valore R del secondo pixel estratto.

Di seguito abbiamo un semplice esempio che illustra praticamente l'utilizzo delle API. Nell'esempio viene caricata un immagine in un Canvas e poi accedendo ai pixel, invertito il valore del R di tutti i pixel e ridisegnata l'immagine manipolata nel Canvas:

<!DOCTYPE html />

    this.onload = function () {
        var myCanvas = document.getElementById('myCanvas');
        if (myCanvas.getContext) {
            var ctx = myCanvas.getContext("2d");
            var img = new Image();
            img.src = "IELogo.png";

            img.onload = function () {
                ctx.canvas.height = img.height;
                ctx.canvas.width = img.width;
                ctx.drawImage(img, 0, 0);

var pixelsArray = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);

var data = pixelsArray.data;

for (var i = 0; i < data.length; i += 4) {

                    data[i+1] = 255 - data[i]; //invert G in pixel
               }

                ctx.putImageData(pixelsArray, 0, 0);
            }
        }

}

</script>

</head>
<body>

<canvas id="myCanvas">
Canvas is not supported.
</canvas>
</body>
</html>

Altra interessante API del Canvas che permette di estrarre i pixel e salvarli anche in un file o rileggerli come un immagine direttamente è il metodo toDataURL("image/png") . La specifica prevede il supporto del formato png con questo metodo e utilizzando questa API si può direttamente estrarre l'immagine. Ad esempio, rimanipolando l'esempio precedente possiamo aggiungere un tag image e quindi , dopo aver impostato a display:none il canvas, disegnare nel tag image il risultato della modifica dell'immagine:

<!DOCTYPE html />

    this.onload = function () {
        var myCanvas = document.getElementById('myCanvas');
        var im = document.getElementById('im');
        if (myCanvas.getContext) {
            var ctx = myCanvas.getContext("2d");
            var img = new Image();
            img.src = "IELogo.png";

            img.onload = function () {
                ctx.canvas.height = img.height;
                ctx.canvas.width = img.width;
                ctx.drawImage(img, 0, 0);

var pixelsArray = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);

var data = pixelsArray.data;

for (var i = 0; i < data.length; i += 4) {

data[i + 1] = 255 - data[i]; //invert G

}

                ctx.putImageData(pixelsArray, 0, 0);
                im.src = ctx.canvas.toDataURL("image/png");
            }
        }

}

</script>

</head>
<body>

<canvas id="myCanvas" style="display: none"" >
Canvas is not supported.
</canvas>

E' possibile anche manipolare i contenuti partendo dal catturare le immagini da un video in riproduzione in un tag video. Di seguito un esempio di utilizzo di questa API per ridisegnare un video che ha uno sfondo uniforme, su uno sfondo differente. Viene usata una funzione js con un interval che ogni 50 millisecondi disegna il frame corrente del video in riproduzione su un canvas nascosto e accedendo con getImage() ad ogni singolo pixel, porta a zero l'alpha dei pixel completamente blu . La funzione prende poi l'immagine manipolata e la ridisegna su un canvas visibile dove viene impostata una immagine differente come background, producendo così la riproduzione del video nel Canvas su un background differente, utilizzando direttamente le API del browser del canvas e del tag video.

Di seguito il codice della pagina:

<!DOCTYPE html>
<html>
<head>
    <style>
        body
        {
            background: black;
            color: #CCCCCC;
        }
        #c2
        {
            background-image: url('Background.jpg');
            background-repeat: no-repeat;
        }
        div
        {
            float: left;
            border: 1px solid #444444;
            padding: 10px;
            margin: 10px;
            background: #3B3B3B;
        }
    </style>
    <script type="text/javascript">
        var processor = {
            timerCallback: function () {
                if (this.video.paused || this.video.ended) {
                    return;
                }
                this.computeFrame();
                var self = this;
                setTimeout(function () {
                    self.timerCallback();
                }, 50);
            },

            doLoad: function () {
                this.video = document.getElementById("video");
                this.c1 = document.getElementById("c1");
                this.ctx1 = this.c1.getContext("2d");
                this.c2 = document.getElementById("c2");
                this.ctx2 = this.c2.getContext("2d");
                var self = this;
                this.video.addEventListener("play", function () {
                    self.width = self.video.videoWidth / 2;
                    self.height = self.video.videoHeight / 2;
                    self.timerCallback();
                }, false);
            },

            computeFrame: function () {
                this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
                var frame = this.ctx1.getImageData(0, 0, this.width, this.height);
                var l = frame.data.length / 4;

                var data = frame.data;
                for (var i = 0; i < l; i++) {
                    var r = data[i * 4 + 0];
                    var g = data[i * 4 + 1];
                    var b = data[i * 4 + 2];
                    if (g == 0 && r == 0 && b == 255)
                        data[i * 4 + 3] = 0;
                }
                this.ctx2.putImageData(frame, 0, 0);
                return;
            }
        };
    </script>
</head>
<body onload="processor.doLoad()">
    <div>
        <video id="video" src="video.mp4" controls width="336" height="256" />
    </div>
    <div>
        <canvas id="c1" width="336" height="256" style="display: none">
        </canvas>
        <canvas id="c2" width="336" height="256">
        </canvas>
    </div>
</body>
</html>

e qui il risultato nel browser:

IIS Media Services 4 Integrated Media Platform, Streaming for PC, Windows Phone and iPhone™ / iPad™ with a Single Platform : A good example from Mediaset RTI New Media

Giuseppe Guerrasio — Sat, 05 Feb 2011 15:00:00 GMT

One of the missions of IIS Media Services 4.0 (IIS MS) is to offer an Integrated Media Platform that allows users to use a single encoder and a single backend to serve video content live and on-demand to a large numbers of client devices spanning from PC , MAC, Windows Phone 7 and iPhone^TM\iPad^TM .

A good example of this capability, currently available in Italy, is from RTI New Media - Mediaset. Mediaset is one of the top broadcasters in Italy and RTI New Media inside Mediaset Group is responsible for their web video platform and in particular for video.mediaset.it web site. Video.mediaset.it publishes free live and on demand video content supported by an advertising model from main Mediaset TV channels. In addition, on the same web site RTI new media publishes daily all of the video news content for the TGCOM web site and for SportMediaset web site that are top tier web sites in Italy in terms of importance and number of visitors. Below is an image from the Mediaset web site :

Content from the http://video.mediaset.it and http://www.tgcom.mediaset.it/ web site is available on PC and Mac and for news content videos are available also on Windows Phone 7 and iPhone^TM / iPad^TM devices with a downloadable application. Below is an image from the Windows Phone 7 application:

The video platform in use on this Web Site is based on the IIS Media Services platform which permits the delivery of adaptive HTTP streaming and progressive download . Key features of the service include:

SnackTV content that delivers free short videos from main Mediaset TV channels and leverages .mp4 and .fv4 content, delivered via IIS Media Services progressive download and Bit Rate Throttling capability in IIS Media Services.
Full episode area (puntate intere) that deliver content from TV shows, fictions, etc. from the main Mediaset TV channels, that leverage IIS Media Services and IIS Smooth Streaming and Silverlight for deliver of high quality content with the best experience for customers. Some content is also securely delivered using Microsoft Playready DRM for content protection.
Moto GP and Sport that also leverage IIS Smooth Streaming , Silverlight and Microsoft Playready DRM for secure delivery of premium content.
News videos live and on demand that also leverages IIS Media Services and IIS Smooth Streaming and Windows Media Services.

As I described before, some video content in particular from the news area are also available on Windows Phone 7 and Apple Devices. For delivery of this type of content on mobile devices, RTI New Media uses IIS Media Services features . On Windows Phone 7 the application is built using the IIS Smooth Streaming Client and Silverlight. This combinationgives the phone the ability to stream live and on-demand adaptive HTTP content in the IIS Smooth Streaming format On Apple Devices, RTI leverage IIS Media Services new capabilities to deliver Apple HTTP live streaming format for both live and on-demand.

The content was encoded in Smooth Streaming format using the H.264 video codec and AAC audio, and was transmuxed (repackaged from one file format to another without re-encoding) to Apple HTTP live streaming format using the IIS Transform Manager (currently in Beta) , leveraging a single encoding and delivery platform.

IIS Transform Manager (IIS TM) is a new component of the next version of the IIS Media Services platform and provides not only Iphone/Ipad support but also a simple integrated video encoding/encrypting and batch conversion and transformation of video files. IIS Transform Manager integrates directly with Expression Encoder 4 to allow you to use "watch folders" to queue up multiple encode jobs on your server and deliver them directly to IIS Media Services 4.0 Web folders as IIS Smooth Streaming presentations. Transform Manager offer also an SDK that permits developers to write custom Task plug-ins that can be used with Transform Manager to support custom actions, third-party encoders, or your own custom workflows. Transform Manager comes with a specific task that RTI New Media leverage to convert IIS Smooth Streaming presentations directly into MPEG-2 Transport Streams in the Apple HTTP live streaming format for delivering content to Apple devices and publish it with IIS Media Services 4.0.

The video platform on video.mediaset.it also benefits from the use of IIS Application Request Routing ( IIS ARR) in order to implement a flexible and scalable HTTP edge server infrastructure. Edge caching in the HTTP delivery infrastructure provides a level of caching able to amplify content delivery capability on video.mediaset.it with the right and flexible scalability.

Below you can see a high level picture of the video delivery architecture:

The services delivered on video.mediaset.it from RTI new media are a great example of the integrated media platform capabilities of IIS Media Services and shows how quick it is to implement a robust and interoperable solution that simplifies the delivery of video content for both live and on-demand to a large numbers of different client devices on a single platform.

If you are looking for more details about the latest support for iPhone\iPad in IIS Media Services and IIS Transform Manager you can reference this online tutorial, "Encode and Deliver On-Demand Smooth Streams with IIS Transform Manager and IIS Media Services 4" and for details on Live Streaming, read this tutorial on Live Streaming for iPhone/iPad with IIS MS 4.0.

To download the latest release of the IIS Media Services platform and learn more, visit http://iis.net/media and stay tuned for the Beta of IIS TM that coming soon in march\april timeframe !!!

HTML5: Un database per il browser con IndexedDB per andare oltre il Web Storage

Giuseppe Guerrasio — Fri, 21 Jan 2011 08:20:00 GMT

La possibilità di gestire localmente nel browser uno storage per le applicazioni accessibile direttamente via JavaScript è sicuramente una delle funzionalità tra le più desiderate e potenzialmente utili per arricchire le applicazioni Web, incrementarne le performance, gestire sempre più la possibilità di scenari di offline. Un primo importante passo nelle specifiche HTML5 verso la possibilità di utilizzare uno storage client locale è rappresentato dalle specifiche del WebStorage che sono ampiamente supportate nei diversi browser e presenti anche in IE a partire dalla versione 8 . Il WebStorage permette però di gestire la persistenza di elementi in modo simile a quanto possibile fare con cookie superando però le limitazioni ed in particolare la complicazione non indifferente nella gestione dei cookie stessi.

Le API del Web Storage offrono essenzialmente due oggetti il sessionStorage e il localStorage che consentono di gestire un meccanismo di persistenza per dominio in modalità per sessione o persistente. L'utilizzo è molto semplice, si usano i metodi setItem e removeItem per inserire e cancellare item utilizzando un meccanismo chiave valore . Ad esempio per inserire un valore:

localStorage.setItem("keyName","keyValue");

per rimuoverlo:

localStorage.removeItem("keyName");

Disponibili anche una buona serie di librerie che consentono di gestire il fallback sui browser che non supportano il Web Storage come ad esempio la libreria storage polyfill di Remy Sharp.

Ampia e continua la discussione nel W3C per ampliare il supporto nel browser per lo storage locale, allargandolo anche alla presenza di un vero e proprio database semplificato che consenta di memorizzare e gestire dati in modo strutturato e apra la strada a scenari di sincronizzazione di dati. Tra le specifiche proposte abbiamo la Web SQL Database API e la parte di IndexedDB . Quest'ultima è la specifica proposta da Oracle , Microsoft e Mozilla, su cui stanno convergendo la maggior parte dei membri del W3C, convergenza già in corso come tendenza da alcuni mesi e che comincia a concretizzarsi anche in annunci di implementazione nei browser come ad esempio per firefox. Anche per chrome sta succedendo altrettanto con l'avvio dell'implementazione di IndexedDB e nella parte di Web SQL Database nelle specifiche del W3C si legge oramai formalmente nello status del documento: "Beware. This specification is no longer in active maintenance and the WebApplications Working Group does not intend to maintain it further" ed è quindi oramai IndexedDB la specifica candidata per l'implementazione da parte della maggior parte dei browser. Stiamo comunque parlando di specifiche di standard ancora in definizione e quindi immature per un utilizzo di applicazioni reali e che quindi vanno utilizzate con cautela, come anche i diversi vendor di browser segnalano. Ad esempio in questo post sull'implementazione nella beta di firefox leggiamo "Keep in mind that IndexedDB is brand new and is not uniformly supported by all browsers, and please file bugs for any behavior that seems to contradict the specification!".

Il Web è una piattaforma in continua evoluzione, e ci sarà sempre una tensione tra gli sviluppatori che desiderano utilizzare le tecnologie più recenti e le specifiche ufficiali ancora non consentono, e gli sviluppatori di applicazioni di business che vogliono costruire qualcosa per una specifica che si aspettano stabile e supportata per un decennio. Non in tutte le situazioni è possibile aggiornare i browser e le applicazioni ogni notte o anche ogni settimana, ma al tempo stesso è anche importante avere la possibilità di valutare l'implementazione di specifiche ancora non complete e di stimolare e partecipare all'implemetazione delle stesse.

Per permettere il test delle specifiche in evoluzione e garantire allo stesso tempo, una chiara e netta suddivisione tra le specifiche stabili ed utilizzabili e la parte di specifiche sperimentali, Microsoft sta adottando nello sviluppo di IE un approccio differente rispetto ad altri browser che inserisco e modificano le implementazioni direttamente nelle build , generando anche situazioni di confusione come successo recentemente con i websocket (http://hacks.mozilla.org/2010/12/websockets-disabled-in-firefox-4/) . Nelle preview e nelle beta ed a maggior ragione nelle release finali delle varie versioni di IE, vengono inserite soltanto le implementazioni delle specifiche che sono sufficientemente mature, documentate e che hanno la garanzia di un comportamento uniforme nelle diverse implementazioni nei vari browser. Per consentire invece, la sperimentazione anche della parte di specifiche in evoluzione e che sono candidate ad una futura implementazione uniforme, sono stati appunto creati gli HTML5 Labs . Attraverso gli HTML5 Labs si possono aggiungere al browser delle implementazioni sperimentali delle nuove specifiche e cominciare a provarle utilizzandole in modo controllato, avendo così una netta separazione tra gli elementi stabili da quelli in forte evoluzione, garantendo pienamente gli sviluppatori rispetto alla stabilità e la compatibilità delle implementazioni supportate nel browser.

Tra le specifiche disponibili come componenti aggiuntivi su HTML5 Labs abbiamo appunto l'implementazione di IndexedDB che possiamo scaricare dal sito e registrare localmente sul nostro PC per sperimentarla utilizzando IE 9. Si come già detto, di una implementazione per test realizzata attraverso un ActiveX. Nel package scaricato da HTML5 Labs troviamo un readme introduttivo che spiega come configurare e registrare il componente aggiuntivo , un file js di base che carica il componente nella pagina e genera delle variabili per consentire un utilizzo diretto dei metodi dell'ActiveX da JS e una serie di esempi che illustrano il funzionamento delle API implementate al momento secondo .

IndexedDB prevede essenzialmente delle API con due modalità di utilizzo: sincrono e asincrono. Si possono creare dei database locali comuni ad uno specifico dominio. Attraverso le API si possono gestire gestione dei dati avanzate attraverso la gestione di indici per l'accesso ai dati. Si possono anche utilizzare delle transazioni per la gestione di più operazioni sui dati e vengono usati dei di dati persistenti in una struttura B-tree che permettono in modo efficace l'inserimento, cancellazione, e accesso in-order anche di un numero elevato di record di dati.

Di seguito riporto un semplice esempio di creazione\accesso ad un database locale con la parte di API sincrone:

try
        {
            var db = indexedDBSync.open(indexedDBName, indexedDBDescription);
            if (db)
            {
                db.setVersion("1.0");

            var sName = db.name;
            var dVersion = db.version;
            var dTableNames = db.objectStoreNames;
            var strNames = "IndexedDB name: " + sName
                            + "; version: " + dVersion + "; object stores: ";
            for (var i = 0; i < dTableNames.length; i++) {
                strNames = strNames + dTableNames[i] + ", ";
            }

      alert(strNames);

                db.close();
            }
        }
        catch (e)
        {
            alert("Error: " + e.message);
        }

Si possono poi creare degli indici e inserire contenuti ed accederci direttamente attrraverso l'indice stesso ed il semplice esempio descrittivo che trovate nella specifica e che riporto di seguito da un idea della modalità di utilizzo:

var db = indexedDB.open('books', 'Book store', false);
if (db.version !== '1.0') {
var olddb = indexedDB.open('books', 'Book store');
olddb.createObjectStore('books', 'isbn');
olddb.createIndex('BookAuthor', 'books', 'author', false);
olddb.setVersion("1.0");
}
// db.version === "1.0";
var index = db.openIndex('BookAuthor');
var matching = index.get('fred');
if (matching)
report(matching.isbn, matching.name, matching.author);
else
report(null);

Nel caso di utilizzo delle API asincrone si possono impostare direttamente le funzioni su cui essere richiamati ad esecuzione ultimata come nel seguente esempio tratto sempre dal documento della specifica:

Scaricando l'implementazione di test da HTML5 Labs, trovate ulteriori esempi per poter approfondire l'utilizzo di questa specifica in elaborazione.

UPDATED 4-feb-2011:

Aggiornata l'implementazione su HTML5 Labs di Indexed DB . Informazioni sull'aggiornamento nel blog http://blogs.msdn.com/b/interoperability/archive/2011/02/03/the-indexeddb-prototype-gets-an-update.aspx

HTML5:Canvas e animazioni

Giuseppe Guerrasio — Fri, 14 Jan 2011 10:30:00 GMT

Nel precedente post sul Canvas ho descritto l'utilizzo del nuovo tag HTML5 e le API JavaScript che permettono di programmarlo. Per riassumere quello che abbiamo discusso nel precedente post:
- il Canvas fornisce una superficie di disegno immediato
- gli sviluppatori Web utilizzano le API JS esposte dal Canvas per disegnare varie primitive grafiche direttamente sulla superfice del Canvas stesso

Cercherò ora di introdurre le modalità con cui è possibile gestire con JS delle animazioni sfruttando il context 2D del Canvas. La gestione delle animazioni con il Canvas può essere effettuata attraverso la modifica diretta del suo contenuto, sfruttando delle funzioni JS richiamate ad intervalli specifici, con una frequenza determinata in base al frame rate che si vuole ottenere nella gestione del ridisegno del movimento. Si procede in pratica ad intervalli con:

- cancellare l'area canvas coinvolta

- ridisegnare l'elemento nella nuova posizione

Di seguito un semplice esempio di animazione dove abbiamo una pagina contenente un canvas e una funzione draw che ogni 10 millisecondi ridisegna il canvas, producendo un'animazione di scorrimento di una immagine.

Il processo di avvio dell'intervallo di ridisegno, viene eseguito solo dopo il load dell'immagine per avere tutti gli elementi, scaricati localmente e quindi utilizzabili per l'esecuzione dell'animazione.

<!DOCTYPE html>

<html lang="en">
<head>
<title title="test anim"></title>
<meta charset="utf-8" />

Come si vede dal codice contenuto nella funzione draw, viene usata una variabile per mantenere la posizione dell'ultimo ridisegno all'interno del canvas e, dopo aver cancellato il canvas, con le API del context 2D si ridisegna l'elemento nella nuova posizione. Richiamando la funzione draw con un intervallo di 16 millisecondi , si produce una animazione con teoricamente 60 frame al secondo, dipendente ovviamente dalla velocità con cui il browser esegue la funzione di ridisegno. E' anche possibile applicare delle trasformazioni usando le API specifiche del canvas (rotate, translate, transform ) durante un'animazione per gestire il funzionamento della stessa.

Oltre alla precedente modalità di cancellazione e riscrittura, le API del canvas offrono la possibilità di gestire lo stato del contenuto prima di applicare un nuovo disegno. Attraverso i metodi save e restore è possibile gestire lo stato e salvarlo prima di applicare una trasformazione e con save, riportarlo nello stato precedente, funzione molto utile nel caso in cui si debba, ad esempio, ridisegnare più elementi in una animazione. Ad esempio se si devono disegnare più elementi in sequenza si può utilizzare questa funzionalità:

for(var a=1;i<10;i++)
{
ctx.save();
ctx.translate(a,a);
drawSomething();
ctx.restore();
}

Nel caso di IE9 nelle animazioni di immagini, il ridisegno delle stesse sfrutta le capacità della GPU e consente di ottenere delle per eccellenti, sfruttando intervalli di ridisegno che consentono di ottenere un elevatissimo numero di frame al secondo con una eccellente esperienza utente ed un ottima fluidità nelle animazioni. Un bel esempio di animazioni lo trovate nel Test Drive Center come ad esempio l'applicazione fishIETank e Galactic . Anche nel già citato Canvas Pad trovate un esempio di animazione utile per approfondire l'utilizzo del canvas per questo tipo di operazione.

Una delle fasi dell'animazione è quello di rendere una immagine (o una cella singola animazione) nella posizione specifica e ci sono due principali tecniche di calcolo della posizione specifica. Queste tecniche di animazione sono:
- Animazione frame-based
- Animazioni time-based

Nell'animazione frame-based oggetti vengono spostati lo stesso numero di pixel in ogni aggiornamento. Nelle time-based lo spostamento è basato sul tempo e vengono spostati lo stesso numero di pixel per unità di tempo. Ognuno dei due approcci ha vantaggi e svantaggi ed è più idoneo in determinati scenari.

L'animazione frame-based è semplice da implementare ma è fortemente dipendente dalla velocità del PC così come lo spazio percorso dall'animazione non è costante e per tanto questo tipo di tecnica è poco usata nei giochi e di più per animazioni che non hanno dei percorsi di dimensione predefinita in una specifica unità di tempo. Di seguito un semplice esempio di frame-base animation, dove ctx è il context 2d del canvas, che in questo caso cancella completamente il canvas perchè abbiamo un unico oggetto presente nell'animazione:

var distance=5 lastFrameTime = 0;
setInterval(drawTimeBased, 16);

function drawFrameBased() {

y1 += distance;

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, x1, y1, imgWidth, imgHeight);
}

Di seguito abbiamo un esempio di questo tipo di animazione applicata ad un canvas sovrapposto ad un video, che illustra la flessibilità con cui il canvas può essere usato anche per gestire animazioni in overlay ad un video, come ad esempio banner pubblicitari o altri elementi interattivi:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<video id="myVideo" src="fish.mp4" height="480" width="640"autoplay controls loop>
Video is not supported.
</video>

<canvas id="myCanvas" height="480" width="640" style="left: 0px; top: 0px; position: absolute;" >
Canvas is not supported
</canvas>
<script language="javascript">
    window.addEventListener("load", Main, false);
    var y1 = 10, distance = 1;
    var customText = "Canvas text on top of video";
    var ctx;
    var msg;
    function Main() {

        msg = document.getElementById("msg");
        myCanvas = document.getElementById("myCanvas");
        if (myCanvas.getContext) {
            ctx = myCanvas.getContext("2d");
            ctx.shadowOffsetX = 5;
            ctx.shadowOffsetY = 5;
            ctx.shadowBlur = 5;
            ctx.shadowColor = "grey";
            ctx.fillStyle = "black";
            ctx.font = '35px "Segoe UI" bold';

setInterval(draw, 16);
}

}
function draw() {

        if (distance < 0) {
            distance = 0;
        }
        y1 += distance;

        // make text show up again when it falls of the page
        if (y1 > (ctx.canvas.height - 35)) {
            y1 = 10;
        }

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

        ctx.fillText(customText, 60, y1);

    }

</script>
</body>
</html>

L'Animazione time-based è più complicata da implementare. In questo tipo di animazione la distanza per spostare una specifica immagine è calcolato su l'unità di tempo. Questo tipo di animazione non è dipendente della macchina e può essere usata nei giochi. Nei giochi in genere tutti i giocatori hanno la stessa quantità di tempo da spendere per il certo livello, a prescindere macchina utilizzata per giocare una partita - quindi abbiamo bisogno di animazione indipendente macchina. La fluidità dell'animazione è dipendente dalle performance del PC su cui si esegue ma le distanze sono costanti nell'unità di tempo. Ecco di seguito un esempio di codice di utilizzo di un'animazione time-based:

var speed = 250, lastFrameTime = 0;
setInterval(drawTimeBased, 16);

function drawTimeBased() {
// time since last frame
var now = new Date().getTime();
dt = (now - lastFrameTime) / 1000;
lastFrameTime = now;

y2 += speed * dt;

ctx.clearRect(x2, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, x2, y2, imgWidth, imgHeight);
}

In questo caso l'oggetto non viene spostato di una distanza predeterminata ad ogni intervallo di ridisegno dell'animazione, ma viene invece calcolato lo spostamento, in base al tempo trascorso dal precedente ciclo di rendering.
Ricordando che la distanza è uguale velocità moltiplicata per il tempo, che la velocità è una costante che abbiamo fissato da qualche parte nel codice (250 pixel nel nostro caso), e che dt è calcolato in ciascun ciclo, possiamo facilmente calcolare la distanza necessaria per muovere il nostro oggetto in ogni step dell'animazione. Tutto quello che dobbiamo fare è moltiplicare la velocità per il delta del tempo, ottenendo i pixel da applicare al movimento.

Di seguito un semplice esempio delle due tipologie di animazione applicate sullo stesso canvas a coordinate differenti:

<!DOCTYPE html>

<html lang="en">

</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
Canvas is not supported.
</canvas>
</body>
</html>

Come potete vedere nell'esempio precedente le due animazioni vengono eseguite assieme ed in questo caso, viene cancellato prima del ridisegno solo la porzione del canvas che contiene la posizione dell'elemento su cui si esegue l'animazione, utilizzando il metododo del context clearRect utilizzando come parametri le specifiche coodinate e dimensioni.

Nel caso di animazioni complesse con elementi che durante il movimento , simulano anche altri tipi di movimento come ad esempio l'applicazione FishIETank che simula un acquario con i pesci che si muovono nello spazio e che cambiano direzione e muovono la coda per simulare il nuoto:

o come il bellissimo esempio\gioco implementato in HTML5 Pirates Love Daises :

Dove ci sono vari personaggi animati su canvas.

Per gestire animazioni di questo tipo e garantire le migliori performance possibili, sfruttando in particolare su IE9 l'accelerazione grafica, si utilizzano genericamente delle tecniche ( sprite animation ) che accorpano in un unica immagine gli stati degli elementi durante le animazioni, che vengono suddivisi in celle con delle specifiche coordinate, utilizzate poi nelle funzioni che ridisegnano gli oggetti.

Ad esempio nel caso dell'acquario del FishIETank abbiamo, una immagine di background che viene applicata al canvas e una immagine in cui sono contenuti tutti gli stati necessari all'animazione dei pesci e le diverse "razze" di pesci che vengono poi divise in celle che permettono attraverso le coordinate definite di ridisegnare una specifica cella sul canvas:

Di seguito un esempio della funzione che sintetizza l'utilizzo delle immagini all'interno dell'animazione:

<img id="imageStrip" src="fishstrip.png" style="display: none" tabIndex="-1">

// rif allo strip di img
imageStrip = document.getElementById('imageStrip');

ctx.drawImage (

// informazioni source image

FishImageStrip, // source
fishW * cell, // sX della cella
fishH * species, // SY della cella
fishW, // larghezza della cella
fishH, // altezza della cella

// Canvas destinazione
x, // X dove disegnare il pesce
y, // Y dove disegnare il pesce
fishW, // larghezza
fishH, // altezza
);

Come si vede nel codice precedente, viene caricata l'intera immagine è poi utilizzate le coordinate della cella per indicare la porzione di immagine (cella) da disegnare nel canvas di destinazione ad una specifica coordinata, con delle dimensioni definite.

Il particolare nell'applicazione FishIETank dell'acquario viene essenzialmente:

1-Caricato ed impostato lo sfondo dell'acquario

2- caricata l'intera sprite image

3- applicare al canvas le trasformazioni per disegnare il pesce, salvando prima lo stato del canvas, per riapplicarlo ripetendo poi le operazioni per ogni pesce

Questa demo di acquario, utilizza una animazione Time-Based. Di seguito un esempio semplificato della funzione di disegno dei pesci:

var myCanvas = document.getElementById('myCanvas');
var ctx = myCanvas.getContext("2d");
…
ctx.save();
ctx.translate(x, y);
ctx.scale(scale, scale);
ctx.transform(flip, 0, 0, 1, 0, 0);
ctx.drawImage(imageStrip, fishW * cell, fishH * species, fishW, fishH, -fishW / 2, -fishH / 2, fishW, fishH);
scale = nextScale;
ctx.restore();

Proprio come ho spiegato prima, viene salvato lo stato del canvas, applicata la trasformazione e disegnata la cella corretta in base allo stato dell'animazione e quindi ripristinato lo stato. Viene applicata anche una trasformazione personalizzata dove il primo parametro (flip) è 1 o -1 serve per eventualmente riflettere pesce in una direzione diversa in base alla direzione che il pesce ha nell'acquario. Le trasformazioni nel canvas in IE9 vengono svolte sfruttando completamente la GPU con l'accelerazione grafica offerta dal browser, garantendo delle perfomance eccellenti nell'animazione.

Approfondendo il funzionamento dell'applicazione nel test drive di IE9, trovate di seguito una porzione del codice della applicazione fishIETank che potete anche trovare online :

//set up the canvas
           var tempCtx = document.createElement("canvas");
            tempCtx.id = "canvas1";
            tempCtx.setAttribute('width', WIDTH);
            tempCtx.setAttribute('height', HEIGHT);
            tempCtx.setAttribute('tabIndex', -1);
            document.body.insertBefore(tempCtx, document.body.firstChild);

            var tempCtx3 = document.createElement("canvas");
            tempCtx3.id = "background";
            tempCtx3.setAttribute('width', WIDTH);
            tempCtx3.setAttribute('height', HEIGHT);
            tempCtx3.setAttribute('tabIndex', -1);
            document.body.insertBefore(tempCtx3, document.body.firstChild);

ctx = tempCtx.getContext("2d");

ctx3 = tempCtx3.getContext("2d");

            //draw the background
            backgroundImage = document.getElementById('backgroundImage');
            drawBackground();

            //create the fish
            imageStrip = document.getElementById('imageStrip');
            createFish(startFish);

            //start animation
            setInterval(function () { draw(); }, 16);

    window.addEventListener("resize", OnWindowResize, false);

Vengono creati i canvas utilizzati nella parte grafica, impostato il background dell'acquario e creati gli oggetti che rappresentano i pesci ed avviato l'intervallo che chiama la funzione che si occupa di ridisegnare l'acquario e implementare quindi le animazioni. La funzione draw essenzialmente effettua un ciclo nella collezione di oggetti che rappresentano i pesci, creati nella funzione createFish e che consarvano lo stato in cui si trovano all'interno dell'acquario e chiama il metodo swim, che fa essenzialmente ridisegnare l'acquario:

function draw() {
//clear the canvas
ctx.clearRect(0, 0, WIDTH, HEIGHT);

            //set velocity of fish as a function of FPS
   var fps = fpsMeter.meterFps;

            power = Math.min(fps, 60);
   if(isNaN(power)) power = 1;
            //velocity = 100 + 100 * (power * power / 3600); //exponential curve between 100-200
            velocity = Math.floor((power * power * .5) / 3) < 1 ? 1 : Math.floor((power * power * .5) / 3); //exponential curve between 1 and 600.

            // Draw each fish
            for (var fishie in fish) {
                fish[fishie].swim();
            }

   //draw fpsometer with the current number of fish
            fpsMeter.Draw(fish.length);
        }

la funzione swim, essenzialmente ridisegna il pesce dopo aver calcolato le coordinate della posizione del pesce. Il cuore nella funzione lo vedete di seguito:

//draw the fish
                //locate the fish
                ctx.save();
                ctx.translate(x, y);
                ctx.scale(scale, scale); // make the fish bigger or smaller depending on how far away it is.
                ctx.transform(flip, 0, 0, 1, 0, 0); //make the fish face the way he's swimming.
                ctx.drawImage(imageStrip, fishW * cell, fishH * species, fishW, fishH, -fishW / 2, -fishH / 2, fishW, fishH); //draw the fish
                ctx.save();
                scale = nextScale // increment scale for next time
                ctx.restore();
                ctx.restore();

                //increment to next state
                x = nextX;
                y = nextY;
                z = nextZ;
                if (cell >= cellCount-1 || cell <= 0) { cellReverse = cellReverse * -1; } //go through each cell in the animation
                cell = cell + 1 * cellReverse; //go back down once we hit the end of the animation

Che come descritto prima, essenzialmente salva il contesto del canvas, posiziona e disegna il pesce e ripristina lo stato e incrementa le variabili per il successivo ridisegno. Nella demo FishIETank potete vedere ed apporfondire il resto dell'esempio di animazione con il canvas realizzata.

Multi-language audio with IIS Smooth Streaming: An example from Radiovaticana Live Streaming

Giuseppe Guerrasio — Sat, 08 Jan 2011 14:30:00 GMT

One of many useful features that comes with IIS Media Services 4.0 and Smooth Streaming is the ability to stream live and on-demand content with multiple language audio tracks that are selectable by the viewer. An example of this capability is the recent schedule of events that Vatican Radio (http://www.radiovaticana.org/) delivered during the last month. Vatican Radio delivered several events, such as Christmas night liturgical celebrations presided over by the Holy Father, World Day of Peace on January 1^st, Jannuary 9 at 09.30 CET we have another event with the Pope, and other events with multiple audio tracks (Natural Audio, Italian, English, French, German, Spanish, Portuguese and Arabic) was delivered during the last month. The player used for these events was based on the Silverlight Media Framework (SMF) and provides the viewer with the ability to select which audio track to listen to. Below is an image of the player with the audio tracks selector shown:

Leveraging the integrated media platform capabilities of IIS Media Services (IIS MS) 4.0, the Vatican was also able to deliver the same events, using the same encoders and media server infrastructure, to Apple devices. Note that in this case only 1 audio track is available because these devices do not natively support multiple audio tracks.

You can see the architecture implemented for these events below:

The Digital Rapids encoders received as inputs 8 audio signals from Vatican Radio channels and a video signal from the Vatican TV center. They generated 8 audio tracks in sync with 6 video tracks at different bit rates (quality levels) and pushed all the audio and video tracks to a publishing point on an IIS MS 4.0 ingest server. A subset of the video tracks and a single audio track went to a second publishing point for Apple devices on the same IIS MS 4.0 ingest server. The ingest server pushed the content of both publishing points to the origin server.

The first publishing point on the IIS MS origin server provided a client manifest (.ismc file) of all the available tracks and the actual content to Silverlight media players. The second origin server publishing point had the Apple Devices Adaptive Streaming feature selected. This enabled the origin server to do on-the-fly trans-muxing (repackaging from one file format to another) from the fragmented MP4 streams used by the Smooth Streaming format to the Apple HTTP Live Adaptive Streaming (HLS) format compatible with iPhone and iPad. It also created and published an HLS-compatible client manifest (.m3u8 file). An HTTP CDN (content delivery network) pulled the content from the origin publishing points and distributed it to viewers on their Silverlight or iPhone/iPad clients.

The Silverlight client player, based on SMF, read all tracks published in the manifest and transparently adapted the video quality as needed, based on the bandwidth available and video rendering capabilities of each client. The player also offered the possibility to the viewer to choose the audio track.

If you are interested in more details about Smooth Streaming architectures for Live Streaming, you can start with this blog post.

As I mentioned before, the multiple audio tracks feature is available not only for live streaming, but also for on-demand scenarios. In the case of on-demand you have more flexibility, as you could add more audio tracks to existing assets. The Smooth Streaming format permits to you to add additional audio tracks at any time without re-encoding the assets. This is because the Smooth Streaming format uses a server manifest to describe to the streaming server the available tracks and file sources that are available in the assets, and the client manifest is used to describe to the client the available tracks.

If you are looking more information about smooth streaming files you can read this post and the Technical Overview of Smooth Streaming.

Smooth Streaming is built on top of technologies that Microsoft has released via the Community Promise Initiative, including the Protected Interoperable File Format (PIFF) and the IIS Smooth Streaming Transport Protocol (SSTP). The Protected Interoperable File Format (PIFF) Specification defines a standard file format for multimedia content delivery and playback. It includes the audio-video container, stream encryption, and metadata to support content delivery for multiple bit rate adaptive streaming, optionally using a standard encryption scheme that can support multiple digital rights management (DRM) systems. The IIS Smooth Streaming Transport Protocol Specification describes how live and on-demand Smooth Streaming audio/video content is distributed and cached over an HTTP network. It enables third parties to build their own client implementations that interoperate with IIS Media Services.

At any time you can encode a new PIFF (Protected Interoperable File Format) asset, creating a fragmented MP4 file (.ismv, or .isma in the case of an audio-only file) that contains the additional audio tracks. You can update the manifests to describe the additional tracks to the server and client. Ideally, you would synchronize the new audio track with the existing video track.

Here is an example of a server manifest (.ism extension) with two video tracks and one audio track:

<head>

<meta

name="clientManifestRelativePath"

content="big_buck_bunny_1080p_surround.ismc" />

----omitted-------

</head>

<body>

<video

src="big_buck_bunny_1080p_surround_330.ismv"

systemBitrate="330000">

<param

name="trackID"

value="2"

valuetype="data" />

<param

name="trackName"

value="video"

valuetype="data" />

<param

name="timeScale"

value="10000000"

valuetype="data" />

</video>

<video

src="big_buck_bunny_1080p_surround_230.ismv"

systemBitrate="230000">

<param

name="trackID"

value="2"

valuetype="data" />

<param

name="trackName"

value="video"

valuetype="data" />

<param

name="timeScale"

value="10000000"

valuetype="data" />

</video>

<audio

src="big_buck_bunny_1080p_surround_6000.ismv"

systemBitrate="128000">

<param

name="trackID"

value="1"

valuetype="data" />

<param

name="trackName"

value="audio1"

valuetype="data" />

<param

name="timeScale"

value="10000000"

valuetype="data" />

</audio>

</switch>

</body>

</smil>

As you can see, this file describes to the server how many video and audio tracks are available and the location of the physical PIFF file where the content is available.

Here is an example of a client manifest file (.ismc extension) for the same asset:

<SmoothStreamingMedia

MajorVersion="2"

MinorVersion="1"

Duration="5964800000">

<StreamIndex

Type="video"

Name="video"

Chunks="312"

QualityLevels="2"

Url="QualityLevels({bitrate})/Fragments(video={start time})">

<QualityLevel

Index="0"

Bitrate="6000000"

FourCC="WVC1"

MaxWidth="1920"

MaxHeight="1080"

CodecPrivateData="250000010FDBBE3BF21B8A3BF8EFF18044800000010E5A0040" />

<QualityLevel

Index="1"

Bitrate="4176000"

FourCC="WVC1"

MaxWidth="1920"

MaxHeight="1080"

CodecPrivateData="250000010FDBBE3BF21B8A3BF8EFF18044800000010E5A0040" />

<QualityLevel

Index="0"

Bitrate="330000"

FourCC="WVC1"

MaxWidth="480"

MaxHeight="272"

CodecPrivateData="250000010FDB8A3BF21B8A3BF8EFF18044800000010E5A0040" />

<QualityLevel

Index="1"

Bitrate="230000"

FourCC="WVC1"

MaxWidth="320"

MaxHeight="180"

CodecPrivateData="250000010FDB863BF21B8A3BF8EFF18044800000010E5A0040" />

d="19999968"/>

-----omitted-------

</StreamIndex>

<StreamIndex

Type="audio"

Index="0"

Name="audio"

Chunks="299"

QualityLevels="1"

Url="QualityLevels({bitrate})/Fragments(audio={start time})">

<QualityLevel

FourCC="WMAP"

Bitrate="128000"

SamplingRate="44100"

Channels="2"

BitsPerSample="16"

PacketSize="5945"

AudioTag="354"

CodecPrivateData="1000030000000000000000000000E0000000" />

d="20433560" />

----omitted ------

</StreamIndex>

</SmoothStreamingMedia>

As you can see, this file describes to the client the video and audio tracks and fragments ("chunks") available.

Again, if you would like to add an additional audio track, you can encode the track in a separate PIFF file and add it to the video asset by editing the server and client manifests to indicate the new track. Very flexible!!!

The job delivered from Vatican Radio Web Team is a very good example of how you can use the robust features and flexibility of IIS Smooth Streaming to deliver a compelling and more engaging experience to more viewers.

Video Sessione Ottimizzare i siti per Internet Explorer 9 e Video sessioni Evento Internet Explorer 9 Beta

Giuseppe Guerrasio — Thu, 23 Dec 2010 08:00:00 GMT

Alcuni giorni fa in un evento Community ad Ancona organizzato da DotNetMarche ho partecipato come speaker con 2 sessioni, una dedicata alla preparazione dei nostri siti per Internet Explorer 9 è l'altra dedicata a l'introduzione allo sviluppo per Windows Phone 7.

Per chi è interessato ai contenuti delle sessioni su IE9 e WP7 è possibile rivedere la registrazione della sessione qui e da qui potete scaricare le slide.

Disponibile anche il video dell'evento di fine ottobre dedicato a Internet Exporer che potete rivedere qui. Questo evento contiene le seguenti sessioni che sono nel video dell'evento :

                - Keynote relativa a Internet Explorer 9 Beta
                - Sessione sul IE9 Pinning , Jump list e Windows 7 Experience (ulteriori info in questo post )
                - Sessione Introduzione a HTML5
                - Sessione su IE9 Developer Tools e Compatibility in IE9

Le slide dell'evento potete scaricarle da qui.

HTML5: Introduzione al tag video

Giuseppe Guerrasio — Wed, 22 Dec 2010 00:00:00 GMT

Un altro interessante elemento dell'HTML5 è rappresentato dal tag video descritto nella specifica HTML5 del W3C . In Internet Explorer 9 abbiamo il supporto anche per questo elemento in aderenza alle specifiche del W3C a cui collabora anche Microsoft stessa ed anche in questo caso il nuovo engine di IE9 consente di sfruttare l'accelerazione grafica anche per questo elemento. Un esempio di utilizzo del tag video per lo sviluppo di applicazioni multimediali lo trovate in questo esempio dedicato a questo aspetto del supporto HTML5 di IE9 nel test drive center di Internet Explorer.

Il tag video consente di inserire direttamente nell'HTML della nostra pagina un elemento di tipo video e permette di controllarne la riproduzione attraverso il JavaScript. I vari browser che implementando il tag offrono anche direttamente una pulsantiera di controlli per i classici controlli di riproduzione(play, pause, etc) ed è possibile anche gestire la costruzione di una barra di comandi personalizzata.

Come prima cosa voglio specificare che il tag video ad oggi permette di gestire in modo standard solo gli scenari di progressive download e non tutti i browser implementando la stessa tipologia di formato video in quanto nella specifica non sono indicati gli aspetti relativi appunto al formato, anche se al momento il formato maggiormente diffuso è H264/AAC in un container .mp4 . Non c'è supporto nella parte standard per lo streaming Live o per protocolli adattativi come ad esempio lo Smooth Stremaming, e per la protezione dei contenuti video. Per tanto con questo tag si possono gestire al momento solo alcuni tipi di scenario nella riproduzione del video, per scenari avanzati dove si vuole costruire una maggiore esperienza utente o gestire eventi live o contenuti protetti, si può utilizzare Silverlight e lo Smooth Streaming. Una introduzione allo Smooth Streaming la trovate in questo post ed in questo articolo.

Inserire il tag video in una pagina HTML è semplice è può essere fatto come indicato nel seguente esempio:

<video id="videoElement1" src=sample.mp4 width=320 height=240 controls poster=sample.jpg>Video not supported</video>

Attraverso la proprietà src si può indicare l'url del video da riprodurre. Con la proprietà autoplay si imposta l'avvio automatico del file (basta scrivere autoplay non è necessario inserire autoplay="true" sono equivalenti), con poster si indica l'url dell'immagine da mostrare caricata nel tag video prima del play del video, con controls si chiede al player di mostrare i controlli per play\pause ect , con loop si può mandare in loop la riproduzione del video, con height e width si impostano le dimensioni , con preload si può stabilire il tipo di preload che il browser fa del video ( none nessun preload, metadata solo i metadati, auto il browser può avviare il download dell'intero file).

Si può accedere ai metodi ed alle proprietà dell'elemento anche via JavaScript accedendo direttamente all'oggetto nel DOM ad esempio con un getElementById. Relativamente al tag precedente a cui abbiamo dato il nome videoElement1 per eseguire un play sull'elemento per far partire il video si può usare il seguente codice:

var myVideo = document.getElementById("myVideo");

myVideo.play();

Oppure ad esempio, si può spostare la posizione del video attraverso la proprietà currentTime ad un valore specifico :

var myVideo = document.getElementById("myVideo");

myVideo.currentTime = document.getElementById ("time").value;

o con la proprietà duration si può accedere alla durata del video caricato nell'elemento. La stessa proprietà currentTime può essere utilizzata, ad esempio, per mostrare dei contenuti solo durante degli intervalli specifici di tempo durante la riproduzione del video, per gestire ad esempio, dei sottotitoli o delle inserzioni pubblicitarie. Di seguito un banale esempio di utilizzo che moetra un div solo in uno specifico intervallo di tempo, usanto un interval che punta ad usa funzione specifica:

<div style="visibility:hidden" id=msg>Messaggio</div>
<script>

var starttime=2; var endtime=3;
var video = document.getElementsByTagName('video')[0];
var msg = document.getElementById('msg');
var msgstart = msg.getAttribute('starttime');
var msgend = msg.getAttribute('endtime');

setInterval(function() {
var hasHidden = msg.hasAttribute('hidden');
if (video.currentTime > msgstart && video.currentTime < msgend) {
msg.style.visibility="visible" }

else {
msg.style.visibility='"hidden";
}
}, 100);
</script>

Si tratta ovviamente di un esempio molto semplice per spiegare il concetto di utilizzo della proprietà currentTime per questo tipo di scenari , che poi può ovviamente ssere esteso e generalizzato in applicazioni più complesse o che , ad esempio , utilizzano un canvas sovrapposto al video per permettere ad esempio, la comparsa di banner pubblicitari animati , in specifici momenti della riproduzione del video.

Attraverso la proprietà error si può accedere all'errore incontrato durante la riproduzione del video e con la proprietà readyState si può accedere allo stato del tag video.

Si possono controllare le dimensioni del video con le proprietà classiche dell'elemento width and height e con le stesse si può gestire il full screen allargando il video all'intera dimensione del browser.

L'elemento espone anche una serie eventi che possono essere usati come ad esempio onplay che ci permette di agganciare una funzione da eseguire all'inizio del play, abbiamo poi ad esempio onended che permette di ricevere l'evento di fine video onseeking e onseeked che permette di capire quando è in corso un seeking sul video e quando è terminato e molti altri eventi ancora.

Ad esempio per agganciare l'evento di fine video alla funzione test direttamente inline:

<video src="fish.mp4" autoplay controls onerror="fallback(this)" onended="test(this)">

oppure si può ovviamente farlo agganciando l'evento direttamente via JavaScript con addEventListener .

Per un elenco esaustivo delle proprietà , metodi e degli eventi vi consiglio di riferirvi direttamente alla specifica .

Come vedete dall'esempio precedente anche per questo tag html5 si possono inserire all'interno del tag i contenuti alternativi per i browser che non supportano il tag video. In particolare per gestire il fallback per i browser che non implementano il tag video si può inserire un player alternativo come ad esempio un player basato su Silverlight.

Genericamente si imposta anche il metodo onerror per gestire anche le eccezioni che si possono generare su quei browser che implementano il tag ma ad esempio non sono compatibili con il codec utilizzato nel video e quindi si può gestire il fallback in questo modo:

var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;

            if (errorType == "ImageError" || errorType == "MediaError") {
                return;
            }

var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n";

            errMsg += "Code: " + iErrorCode + "    \n";
            errMsg += "Category: " + errorType + "       \n";
            errMsg += "Message: " + args.ErrorMessage + "     \n";

            if (errorType == "ParserError") {
                errMsg += "File: " + args.xamlFile + "     \n";
                errMsg += "Line: " + args.lineNumber + "     \n";
                errMsg += "Position: " + args.charPosition + "     \n";
            }
            else if (errorType == "RuntimeError") {
                if (args.lineNumber != 0) {
                    errMsg += "Line: " + args.lineNumber + "     \n";
                    errMsg += "Position: " + args.charPosition + "     \n";
                }
                errMsg += "MethodName: " + args.methodName + "     \n";
            }

            throw new Error(errMsg);
        }

        function fallback(video) {
            while (video.firstChild) {
                if (video.firstChild instanceof HTMLSourceElement) {
                    video.removeChild(video.firstChild);
                } else {
                    video.parentNode.insertBefore(video.firstChild, video);
                }
            }
            video.parentNode.removeChild(video);
        }
    </script>
</head>
<body>

<video src="fish.mp4" autoplay controls onerror="fallback(this)">

</video>

</body>
</html>

Nel caso in cui il browser non supporta il tag video, viene caricato automaticamente il player Silverlight e sarà lui ad effettuare la riproduzione dle video. Nel caso in cui il browser supporta il tag video ma, ade sempio, non supporta il formato del video, il tag video genera l'evento onerror e viene quindi eseguita la funzione fallback che rimuove il tag video dal DOM e fa caricare il player alternativo che riprodurrà così il video.

E' eventualmente possibile utilizzare il JavaScript e delle specifiche API per poter determinare via script se il tag video è supportato o meno :

function supports_video() {
return !!document.createElement('video').canPlayType;
}

Come abbiamo già detto prima per poter riprodurre il video il nostro tag video deve fare almeno tre cose contemporaneamente:

1.Interpretare il formato contenitore per scoprire quali tracce video e audio sono disponibili, e il modo in cui sono memorizzati all'interno del file in modo che possa trovare i dati necessari per decodificare prossimo
2.Decoding il flusso video e la visualizzazione di una serie di immagini sullo schermo
3.Decoding il flusso audio e l'invio del suono agli altoparlanti

I principali formati che sono implementati non tutti allo stesso tempo, dai diversi browser che implementano in tag video HTML5 sono tre e sono i seguenti:

- H.264 video + AAC audio in an MP4 container

- Ogg Theora (video) + Vorbis (audio) in Ogg container

- Wbem VP8(video) + Vorbis (audio) in wbem container

Internet Explorer 9 supporta nativamente il primo e con l'istallazione di codec aggiuntivi permette di riprodurre i contenuti anche negli altri formati. Il formato più comune e oggi su Internet anche oltre il tag video HTML5 è sicuramente il formato H.264 video + AAC audio in an MP4 container .

Per determinare i formati video supportati dal browser su cui si esegue la nostra pagina, il tag video espone anche un metodo canPlayType che consente di verificare se uno specifico formato è supportato dal browser :

videoElement1.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

Il metodo torna indietro =="" in caso di formato non supportato e =="probably" quando il browser è confidente di poter riprodurre il formato. E' opportuno anche in caso di risposta di probabile possibilità di riproduzione del contenuto proposto, agganciare l'evento enerror e gestire il fallback con il player basato su pluging come ad esempio Silverlight in quanto non è comunque sicura la riproduzione , dato uno specifico codec, possono esserci problemi di coincompatibilità o limiti nella risoluzione , nel numero di frame o nel livello di bitrate del file. Di seguito abbiamo un esempio di funzione della verifica del probabile supporto di un formato h264 baseline da parte del browser che esegue la nostra pagina:

function supports_h264_baseline_video() {
if (!supports_video()) { return false; }

var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

In maniera simile a quanto abbiamo visto per il canvas, possiamo anche utilizzare la libreria Modernzr sia per verificare il supporto del tag video sia per la verifica dei codec. Di seguito un esempio di utilizzo:

if (Modernizr.video) {
if (Modernizr.video.webm) {
// try WebM
}
else if (Modernizr.video.ogg)
{ // try Ogg Theora + Vorbis in an Ogg container }
else if (Modernizr.video.h264){
// try H.264 video + AAC audio in an MP4 container }
}

Per gestire la riproduzione in maniera da poter supportare browser che implementano formati diversi ,oltre al fallback sul plugin, si può anche decidere di codificare il video in formati diversi e di appendere più src ai differenti formati come da esempio:

il browser seleziona i diversi formati e riproduce quello idoneo, generando un onerror nel caso in cui nessuno dei formati indicati sia supportato.

Una buona libreria per gestire player HTML5 con il fallback su uno dei plugin è sicuramente mediaelement.js e qui trovate un elenco con il confronto tra varie librerie disponibili.

Codificare i video in formati diversi per permetterne la riproduzione su browser differenti non è una operazione semplice e comoda, comporta una maggiore spesa sia di tempo di preparazione dei contenuti , sia di storage. Si complica inoltre, lo sviluppo della pagina. Il suggerimento è quello di prevedere un unico formato basato su H264 e AAC in un container .mp4 che è il formato tipicamente più diffuso e gestire il fallback con un plugin come Silverlight. Il tag video permette di gestire solo gli secanri più semplici di riproduzione in progressive download e come già detto non supporta ne streaming adattatico , ne live streaming ne tantomeno la protezione dei contenuti con un DRM. Ad oggi i player basati su plugin come ad esempio Silverlight, anche per la sola riproduzione in progressive download offrono una maggiore semplicità e uniformità di riproduzione su browser e SO differenti, consentendo anche la protezione con Microsft Playready , lo streaming adattativo con lo Smooth Streaming e anche il live streaming. Anche se il tag video comincia ad avere una sua applicabilità negli scenari più semplici di progressive download senza protezione e per contenuti che non hanno lunghezza eccessiva e bitrate elevati , per i quali è meglio utilizzare uno streaming adattativo come lo Smooth Streaming con Silverlight. Anche negli scenari mobile lo streaming adattativo permette di fornire una migliore user experience durante la riproduzione.

Per produrre i contenuti video in H264/AAC in .mp4 si possono utilizzare diversi tipi di encoder. La maggioranza degli encoder disponibili è in grado di produrre contenuti in questo formato che è tra i più utilizzati. Si può utilizzare anche Expression Encoder 4 Pro per produrre file .mp4 per il tag video ed avere al tempo stesso un encoder in grado di produrre anche contenuti Smooth Streaming. In un successivo post illustrerò un breve tutorial per utilizzare Expression Encoder 4 Pro per codificare contenuti in .p4 utilizzabili con il tag video HTML5. Vi invito a prestare attenzione al fatto che solo nella versione full del prodotto sono presenti i codec H264, nella trial e nella versione che trovate in msdn non sono presenti, occorre appunto la versione full. Expression Encoder 4 è anche utilizzabile come encoder per il Live Smooth Streaming in combinazione con IIS Media Services e Silverlight consentendo anche lo streaming Live e on demand non solo per Silverlight PC e MAC ma anche per per i device Apple e Windows Phone 7. In particolare su Windows Phone 7 si può usare lo specifico Smooth Streaming Media Element per la riproduzione dei contenuti Smooth Streaming.

Per la distribuzione dei contenuti video in progressive download si può utilizzare un qualunque server web. Per una maggiore efficienza e per ridurre ed ottimizzare il consumo di banda per la distribuzione di contenuti in progressive download, vi suggerisco di prendere in considerazione IIS con gli IIS Media Services. IIS Media Services è una estensione di IIS che si scarica e si installa in modo gratuito dal sito deidicato e che oltre a permettervi anche l'utilizzo dello Smooth Streaming live e ondemand, offre una interessante funzionalità per il progressive downaload anche per file .mp4 che si chiama Bit Rate Throttling che consente di controllare il consumo di banda portandolo al livello del bitrate con cui è codificato il file, permettendo un significativo risparmio di banda e una maggiore ottimizzazione della stessa. Maggiori informazioni sull'utilizzo le trovate in questo mio post sulla specifica funzionalità e nell'area del sito di IIS MS dedicata a questa feature.

Oltre al tag video nella specifica HTML5 abbiamo anche il tag audio che ha un funzionamento molto simile a quanto visto per il video e serve essenzialmente a riprodurre contenuti audio. Il formato più comune per i contenuti audio è .mp3 e wav.

HTML5: Introduzione al Canvas

Giuseppe Guerrasio — Mon, 20 Dec 2010 09:30:00 GMT

Una delle novità più interessanti per il supporto di HTML5 in Internet Explorer 9 è sicuramente rappresentata da supporto per il tag Canvas. Il Canvas è definito nella specifica HTML5 e offre un elemento che aggiunto alle nostre pagine, permette il rendering di grafica su una superfice bitmap dipendente dalla risoluzione. Per disegnare sulla superfice grafica offerta da questo nuovo elemento standard dell'HTML, si utilizzando dei "contesti" accessibili tramite specifiche API JavaScript, quali il contesto Canvas 2D, indicato nelle specifiche del W3C Canvas 2D API. Internet Explorer 9, introduce il supporto per le API di disegno 2D Canvas, consentendone lo sfruttamento attraverso l'accelerazione grafica come tutte le funzionalità di rendering e composizione grafica di IE9, consentendo di ottenere ottime performance. Potete ad esempio provare le demo sul test drive di IE9, in particolare trovate il famoso "acquario" assieme a tante altre demo del test drive di IE che potete provare installando la beta di IE9 o l'ultima Platform Preview .

Il Canvas permette di disegnare scenari che includono i rectangles, paths, lines, fills, arcs, le curve di Bézier e le quadratic curves. Canvas è un modo per implementare elementi di grafica sul web. Il tag consente di disegnare in "modo immediato" (i comandi di disegno via JS vengono inviati direttamente con l'hardware grafico), la superficie di disegno si può utilizzare per fornire grafici in tempo reale, animazioni o giochi interattivi, direttamente usando HTML e JavaScript. Le API definite da HTML Canvas 2D Context specification, consentono i seguenti scenari di disegno che includono:

Il link collegati alle caratteristiche elencate sopra , vi portano su una specifica pagina demo sul test drive center di IE9 che si chiama Canvas Pad , dove potete vedere l'uso delle diverse API JS offerte dal Canvas ad anche l'utilizzo delle stesse per gestire delle animazioni e delle trasformazioni.

Per riassumere quello che abbiamo discusso finora:
- Canvas fornisce una superficie di disegno immediato
- Gli sviluppatori Web utilizzano le API JS esposte dal Canvas per disegnare varie primitive grafiche direttamente sulla superfice del Canvas stesso
- Le animazioni sono realizzate sulla base di JavaScript chiamando le API Canvas.

Per un uso efficace del Canvas è necessario comprendere le primitive che supporta, la specifica è vasta e ci occuperemo elementi più importanti. La prima cosa da capire riguarda il sistema di coordinate. Avvio del sistema di coordinate è in alto a sinistra nello schermo punto con coordinate (0,0) .

L'elemento Canvas in Internet Explorer 9 supporta gli attributi larghezza e altezza. (I valori di default per la larghezza e l'altezza sono 300 e 150 pixel, rispettivamente, e il colore predefinito è nero trasparente.).
È possibile ottenere e impostare le dimensioni del canvas nel DOM:

document.getElementById ('canvas1') .width =larghezza
document.getElementById ('canvas1') .height = altezza

L'utilizzo del Canvas in una pagina HTML5 è semplice. Il primo passo consiste nel definire il tag all'interno della pagina in cui vogliamo utilizzarlo, assegnandogli un id per poi poterlo utilizzare dalle API JS come dal seguente esempio:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500">
Canvas is not supported.
</canvas>
</body>
</html>

Definito il Canvas possiamo via JavaScript acquisire un riferimento al 2D Context su cui effettuare le operazioni di disegno. Ad esempio per disegnare un cerchio utilizzando le API del 2D Context e impostando le coordinate :

Potete provare lo script usando il Canvas Pad degli esempi precedenti o creando una semplice pagina.

Come vedete dall'esempio, sopra il tag consente anche di gestire direttamente dall'HTML un eventuale fallback per i browser che non supportano il Canvas. Infatti all'inteno del tag, possiamo inserire il contenuto HTML alternativo da mostrare per i browser che non supportano il tag. Come per le altre funzionalità dell'HTML5 si utilizza un approccio feature detection. Oltre a gestire il fallback per i browser che non supportando il Canvas si può utilizzare lo stesso approccio feature detection via JS. Ecco di seguito un esempio di funzione che provede a verificare il supporto del Canvas, senza entrare nel merito del tipo di browser (browser detection code), approccio quest'ultimo di gestire il riconoscimento del browser e non della specifica funzionalità che è da evitare in generale perchè fonte di codice meno robusto e riutilizzabile. Ecco l'esempio di feature detection del Canvas via JS:

function supports_canvas()
{ return !!document.createElement('canvas').getContext; }

La funzione crea un elemento di tipo canvas e verifica la presenza del metodo getContext(), disponibile solo su istanze dell'elemento canvas. Nella pagina possiamo usare un if supports_canvas() per gestire appunto la verifica ed eseguire in conseguenza del codice alternativo.

Disponibili librerie come Modernizr che offrono una serie di funzioni precostruite per effettuare la feature detection delle principali funzionalità del HTML5 con maggiore semplicità. Ad esempio per quanto riguarda il Canvas, se nella pagina abbiamo referenziato Modernizr.js possiamo determinare il supporto di questo tag con molta seplicità usando la specifica funzione prevista come mostrato di seguito:

if (Modernizr.canvas)
{ // Canvas supported ! }
else
{ // no canvas support available}

Siccome le implementazioni non sono sempre omogenee nel senso che non tutte le api grafiche del canvas sono implementate su tutti i browser che supportando il canvas, si può con lo stesso approccio di cui sopra verificare anche la presenza di specifiche features. Ad esempio per verificare che nel browser in cui si sta eseguendo la nostra pagina il canvas supporti il testo:

if (Modernizr.canvastext)
{ // draw text! }
else
{ // no native canvas text support }

invece senza la libreria Modernizr :

function supports_canvas_text()
{
if (!supports_canvas())
  {
   return false;

  }
var dummy_canvas = document.createElement('canvas');
var context = dummy_canvas.getContext('2d');
return typeof context.fillText == 'function';
}

Dove utiliziamo la funzione sopra per verificare il canvas e poi acquisito il contesto di un canvas generato per il test, si verifica che ci sia il metodo fillText e che sia una function.

Abbiamo visto nel precedente esempio che è veramente facile da disegnare elementi come il cerchio dell'esempio colorati nel modo desiderato.
Con le proprietà fillStyle e strokeStyle si può facilmente impostare i colori utilizzati per il rendering di forme riempite . I valori di colore è possibile utilizzare sono gli stessi in CSS: codici hex, rgb (), RGBA () e anche HSLA (), entrambi supportati in IE9 .
Con fillRect è possibile disegnare rettangoli pieni. Con strokeRect è possibile disegnare rettangoli utilizzando solo i confini, senza ripieno. Se si desidera cancellare una parte specifica del canvas dal contenuto disegnato, è possibile utilizzare clearRect. Questi tre metodi utilizzano tutti gli stessi argomenti: x, y, larghezza, altezza. I primi due argomenti raccontare la (x, y) le coordinate, e gli ultimi due argomenti si impostano le dimensioni larghezza e l'altezza per il rettangolo

// Draw black rect
ctx.fillRect(50, 20, 145, 145);

// Draw blue rect
ctx.fillStyle = "rgb(0, 162, 232)";
ctx.fillRect(135, 85, 125, 125);

// Increase line width
ctx.lineWidth = 5;

// Draw black rect outline
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.strokeRect(50, 335, 145, 145);

// Draw blue rect outline
ctx.strokeStyle = "rgb(0, 162, 232)";
ctx.strokeRect(135, 275, 125, 125);

// Draw transparent yellow rect
ctx.fillStyle = "rgba(255, 255, 0, 0.75)";
ctx.fillRect(210, 180, 125, 125);

Ecco il risultato:

Oltre alle precedenti API con il canvas si possono usare i paths e le line consentono di disegnare forme personalizzate. Per creare una forma personalizzata è semplice, per iniziare a disegnare il percorso si usa beginPath uso, quindi si compone la forma utilizzando linee, curve e altre primitive. Una volta fatto, chiamata riempimento e traccia se si vuole riempire la forma o il disegno del tracciato, quindi chiamare stroke per finire la tua forma. Di seguito un esempio per disegnare uno Smile:

ctx= myCanvas.getContext("2d");
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // cerchio viso
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // bocca
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // occhio
ctx.closePath();
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // occhio
ctx.stroke();

Ecco il risultato:

Si possono gestire anche gradienti e shadows e potete vedere gli esempi nel Canvas Pad. Ad esempio per i gradienti:

// Define gradients
var gradient1 = ctx.createLinearGradient(0, 0, 0, 500);
gradient1.addColorStop(0, "#00ABEB");
gradient1.addColorStop(1, "white");

// Draw
ctx.fillStyle = gradient1;
ctx.fillRect(0,0,400,500);

si ottiene:

In un canvas è anche possibile disegnare un immagine con la specifica api. Ad esempio di seguito un esempio:

function draw(){

var image = document.getElementById("myimg");
ctx.drawImage(image, -10, 45, 400, 400);
}

dove myimg è il riferimento ad un elemento di tipo immagine che avete all'interno della pagina. Il tipico uso di un immagine per poi gestire animazioni o altro su un canvas, parte genericamente dall'utilizzo di un immagine, spesso nascosta, che viene caricata nel dom. Per manipolare l'immagine solo al termine del download della stessa si inserisce genericamente il codice nell'evento load della pagina:

window.addEventListener("load",draw, false);

Si può anche utilizzare un elemento Image e per capire quando l'immagine è disponibile ed ha terminato il download genericamente si usa l'questo tipo di approccio:

img = new Image();

    img.addEventListener("load", function(){

     imgWidth = 100;
     imgHeight = 100;
     ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
         }, false);

img.src = "IELogo.png";

Potete provare sempre sul Canvas Pad il supporto per le immagini.

L'HTML5 consente anche l'utilizzo di video con lo specifico tag video che viene supportato anche in IE9 ed è possibile anche utilizzare anche un video all'interno di un canvas per gestrire particolari effeti grafici:

// Create a timer to draw the video
timer1 = setInterval(drawVideo, 16);

function drawVideo()
{
    if (!isNaN(video.duration))
    {
      // Play the video
      video.play();

      // Draw the video
      ctx.drawImage(video, 0, 0, 400, 500);
    }
}

Il timer impostato a 16ms consente di disegnare nel canvas il video contenuto nel tag html con la funzione drawImage.

E' possibile anche sovrapporre direttamente un canvas sopra un tag video con l'opportuno z-index, per avere appunto sopra al video delle animazioni, banner pubblicitari e contenuti interattivi. In un prossimo post illustrerò proprio un esempio di questo tipo.

Si possono anche applicare delle trasformazioni aal canvas e in conseguenza agli elementi rappresentati nello stesso. Possiamo applicare spostamenti, rotazioni, scaling. anche qui avvalendosi con IE9 di tutta la potenzialità di sfruttare per queste operazioni l'accelerazione hardware e le potenzialità della GPU.

Di seguito aggiungo un esempio di video ridisegnato in un canvas ruotato e translato che viene aggiornato a 60 frame al secondo. Anche qui abbiamo un timer impostato a 16ms per presentare ridisegnare il video, e postete vedere la rotazione sul canvas con la specifica funzione:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language='javascript' type='text/javascript'>

window.addEventListener("DOMContentLoaded", Init, false);

        function Init() {
            var video = document.getElementById("vid");
            var canvas = document.getElementById("can");
            var ctx = canvas.getContext("2d");

     ctx.translate(100, 10);
            ctx.rotate(-0.2);

</script>

</head>
<body>
    <video style="display: none" id="vid" src="fish.mp4" width="640" height="360" controls
        autoplay></video>
    <canvas id="can" width="1000" height="600"></canvas>
</body>
</html>

Come vedete dal codice terminato il caricamento del DOM viene eseguita la funzione Init che accede al contesto 2D dell'elemento canvas di nome can inserito nella pagina e che applica allo stesso una translazione e una rotazione, per poi avviare un intervallo che attende l'avvio del video. Appena avviato il video viene rimosso, l'intervallo con la funzione di attesa del caricamento del video, ed avviato un timer di 16 millisecondi che ridisegna a 60 frame al secondo il video, che questa volta appare ruotato, proprio per la rotazione dell'intero canvas. Di seguito avete l'immagine di come si presenta il video nel canvas trasformato opportunamente:

Possiamo ad esempio, anche effettuare uno scale di un video, ed anche qui avvalendosi con IE9 di tutta la potenzialità di sfruttare per queste operazioni l'accelerazione hardware nell'operazione di rendering e scale:

<html >

<head>
<script type="text/javascript" src="default.js"></script>
<style>
span {left: 450px; position: absolute; opacity:.75}
.Inc {top: 50px}
.Dcr {top: 80px}
button {width: 150px}
</style>

</head>
<body>

<video id="myVideo" src="fish.mp4" loop autoplay style="display: none">
Video is not supported.
</video>

<canvas id="myCanvas" height="480" width="640" style="left: 0px; top: 0px; position: absolute;" >
Canvas is not supported
</canvas>
<span class="Inc"> <button type="button" onclick="scaleFunc(1)"> Zoom in </button></span>
<span class="Dcr"> <button type="button" onclick="scaleFunc(-1)";> Zoom out </button></span>
</body>
</html>

Di seguito la funzione scalefunction che effettua lo scaling:

function scaleFunc( scaleFactor) {
   ctx.clearRect (0, 0, 645, 485);
if (scaleFactor==1) {scale = 1.1;}
    else {scale = .9;
    }
   ctx.scale (scale, scale);
}

ometto la funzione che ridisegna il video in un interval che abbiamo già descritto prima.

Per continuare a provare il canvas ed approfondire le API vi ricordo il Canvas Pad .

Segnalo anhce un interessante plugin disponibile per convertire da Adobe illustrator a codice per il Canvas su cui trovate maggiori informazioni qui .

In un prossimo post vedremo come gestire le animazioni nel canvas attraverso il JavaScript .

Internet Explorer 9: CSS3 Fonts e WOFF

Giuseppe Guerrasio — Tue, 14 Dec 2010 09:24:00 GMT

Tra gli elementi supportati in IE9 abbiamo anche il supporto per il Web Open Font Format il web container format nato per fornire un nuovo formato unico per i diversi browser, proposto al W3C nel Aprile 2010 da Mozilla, Opera e Microsoft. Internet Explorer 9 supporta sia i WOFF che anche EOT (Embedded OpenType) con il rule descriptor @font-face implementato in modo conforme alle specifiche del modulo CSS3 Fonts Module, consentendo l'installazione dinamica di Font per una pagina Web .

Attraverso @font-face si possono dichiarare in uno style ed installare dinamicamente per l'utilizzo nella pagina dei font come nell'esempio di seguito:

@font-face {
    font-family: freeBooterFont;    src: url('../fonts/fsample.woff') format('woff');
   font-weight: normal;
   font-style: normal;}

Aggiornata anche la proprietà font-weight e font-size che ora è aderente al CSS3 Fonts Module e disponibile anche la proprietà font-stretch nuova in IE che permete di selezionare normal, condensed, o expanded face da una font family, la proprietà è disponibile anche in @font-face .

Disponibili per l'uso con il nuovo formato WOFF-encoded font tra cui Monotype Imaging, Ascender Corporation, FontShop e Typotheque che hanno fornito anche i Font utilizzati nella demo su questa funzionalità nel Testdrive demos.

Un bel esempio di utilizzo di @font-face CCS3 e WOFF lo trovate tra i siti di beautyoftheweb in particolare con il sito NeverMindThe Bullets ed anche nella implementazione demo di Deejay.

IIS Media Services 4.0: publishing point runtime status

Giuseppe Guerrasio — Sat, 11 Dec 2010 14:30:00 GMT

In my previous post I introduced some new features added to IIS Media Services (IIS MS) 4.0 and in particular the new manifest compression used for Live Streaming. In this post I discuss about the new publishing point runtime status avaliable with IIS MS 4.0.

This new feature can permit to you during a Live Streaming to check the status of the publishing point using the new UI added to IIS manager and in alternative using the RSCA API. During a live streaming in the pubpoint UI you can see a recap of the pubpoint status in the "Publishingh Point Summary" that you can see in the figure below:

As you can see in the pubpoint summary you can see status of incoming streams in IIS and a recap of the option activated on the pubpoint. Using the new "details" menù on the Actions pubpoint , you can activate a detailed view on pubpoint status:

The details view give to you a complete view of the status in the pub point. You have the "stream summary" and the "track view details" and connections details :

The "stream summary" section show the status of incoming streams and give to you the opportunity to see the stream in input in the pubpoint from encoder or others IIS MS source.

In the "tracks details" you can see the status of every Track in input to the IIS MS pubpoint form an encoder or another server.

In order to clarify the terms a "stream" for Live Smooth Streaming publishing points, is a group of “tracks” that are combined in a single Fragmented MP4 formatted bit stream. It’s the same bit stream that is transmitted over a single TCP connection from encoder or from another server. The grouping of tracks into streams is determined by the encoder. For example, you can have some encoder that have in output one track per stream and in this case you have many streams as the number of tracks. Others encoder can have in output all tracks in one stream, or you can have any combinations of the previous approach.

A "track" is a collection of related samples. In the case of media data, a track is a sequence of images or sampled audio. For example if the presentation has X video bitrates, each one of them is a separate video track. You have a track also for the audio part of the presentation or more of one if the streaming has a multiaudio and in this case we have one track for every audio supported. You can have not only media (audio\video) track, you can have data track like captioning or others type of data.

In the tracks details you can see also the status of the stream , the last timestamp receives, track name and other information.

Each stream can have two states: started or stopped. When the stream is in started state, it is receiving media data or ready to receive media data from new sources. It is important to understand that a “started” stream does NOT necessarily mean that it is currently receiving live stream. A stream can stay in started state even if all connections from encoders have dropped. A stream can only be stopped by either an End-Of-Stream (EOS) signal from the encoder (or upstream server), a manual publishing point stop/shutdown command, or some internal errors. Without having any one of those three conditions, the stream will stay in started state. If you are looking for more information about Live Streaming Architecture and Fault Tolerance I suggest to you to read my post on this topics.

In the "connection details " you can see source and destination in the pubpoint . Source: “Source” is from the publishing point receive data. Each source can provides one or more streams to the publishing point. In genaral, every stream has one source. But in some scenarios, like active-active failover, you could have multiple sources from different locations sending in the same stream (identified by the Stream Name) to the same publishing point. In this case, the publishing point will do the proper job to consolidate the identical streams into one logical stream. The types of sources that IIS Media Services 4.0 support are: HTTP Push and HTTP Pull.
Destination: “Destination” is where the media data goes to. The type of destination shows how the publishing point isuse the media data . The types of destinations in IIS Media Services 4.0 are: IIS Smooth Streaming, Apple HTTP Live Streaming, HTTP Push and HTTP Pull. The last two types of HTTP destinations are for server-to-server distribution.

You can access to the pubpoint runtime status also using RSCA API.In order to use this API you can use Microsoft.Web.Administration.dll (can be found at IIS Directory %windir%\System32\inetSrv) or a JS script that leverage ActiveXObject("Microsoft.ApplicationHost.AdminManager").

In order to access to a Pubpoint from managed code you can reference Microsoft.Web.Administration.dll and write this code in order to start the pub point:

// Live Streaming Section Path
const string LiveStreamingSectionPath = "system.webServer/media/liveStreaming";

//Pubpoint informations data

// Site name
string siteName = "Default Web Site";
// Application name
string applicationName = "/SmoothStreaming";
// Publishing point filename
string fileName = "LiveSmooth.isml";

ServerManager serverManager = new ServerManager();

// Gets the site from IIS
Site site = serverManager.Sites[siteName];

// Gets the application from IIS
Application application = site.Applications[applicationName];

// Gets the LiveStreamingSection from the site configuration
ConfigurationSection section = site.GetWebConfiguration().GetSection(LiveStreamingSectionPath);

// Gets the ConfigurationMethodInstance to get the available publishing points
ConfigurationMethodInstance instance = section.Methods["GetPublishingPoints"].CreateInstance();

// Sets the input parameters of the GetPublishingPoints method
instance.Input["siteName"] = site.Name;
instance.Input["virtualPath"] = applicationName;

// Executes the method
instance.Execute();

// Gets the PublishingPointCollection associated with the method output
ConfigurationElement collection = instance.Output.GetCollection();

// Looks for the publishing point and Invokes the desired method of the Publishing Point.
// In this case we are calling the Start method (others supported functions are "Shutdown" and "Stop")
foreach (var item in collection.GetCollection())
{
if (item.Attributes["name"].Value.ToString().Equals(fileName))
{
    var method = item.Methods["Start"];
    var methodInstance = method.CreateInstance();
    methodInstance.Execute();
break;
}
}

You can use the same API to read the runtime status information. Below a sample to read on a pubpoint active streams and tracks in input:

// Live Streaming Section Path
const string LiveStreamingSectionPath = "system.webServer/media/liveStreaming";

// Change this settings with your values

// Site name
string siteName = "Default Web Site";
// Application name
string applicationName = "/SmoothStreaming";
// Publishing point filename
string fileName = "LiveSmooth.isml";

ServerManager serverManager = new ServerManager();

// Gets the site from IIS
Site site = serverManager.Sites[siteName];

// Gets the application from IIS
Application application = site.Applications[applicationName];

// Gets the LiveStreamingSection from the site configuration
ConfigurationSection section = site.GetWebConfiguration().GetSection(LiveStreamingSectionPath);

// Gets the ConfigurationMethodInstance to get the available publishing points
ConfigurationMethodInstance instance = section.Methods["GetPublishingPoints"].CreateInstance();

// Sets the input parameters of the GetPublishingPoints method
instance.Input["siteName"] = site.Name;
instance.Input["virtualPath"] = applicationName;

// Executes the method
instance.Execute();

// Gets the PublishingPointCollection associated with the method output
ConfigurationElement collection = instance.Output.GetCollection();

ConfigurationElement collectionInputStreams=null;

//Get Input Stream on a selected pubpoint
foreach (var item in collection.GetCollection())
            {
                if (item.Attributes["name"].Value.ToString().Equals(fileName))
                {
                    var method = item.Methods["GetInputStreams"];
                    var methodInstance = method.CreateInstance();
                    methodInstance.Execute();
                   collectionInputStreams=methodInstance.Output.GetCollection();
                    break;
                }
            }

//Read Streams and for each stream read Tracks
foreach (var item in collectionInputStreams.GetCollection())
{
Console.WriteLine("Stream ID {0} State {1} archive file {2}", item.GetAttributeValue("id"), item.GetAttributeValue("state"), item.GetAttributeValue("archiveFileName"));

var tracks = item.GetCollection("tracks");

               foreach (var track in tracks)
               {
                   Console.WriteLine("TrackId {0} Name {1} encoded bitrate {2} ", track.GetAttributeValue("id"), track.GetAttributeValue("name"), track.GetAttributeValue("encodedBitrate"));

               }

            }

   }

Below the results in the Console after the execution of the previous code on a pubpoint on my PC:

Stream ID 7936-stream4 State 1 archive file 7936-stream4.ismv
TrackId 2 Name video encoded bitrate 350000
Stream ID 7936-stream1 State 1 archive file 7936-stream1.ismv
TrackId 2 Name video encoded bitrate 1050000
Stream ID 7936-stream3 State 1 archive file 7936-stream3.ismv
TrackId 2 Name video encoded bitrate 475000
Stream ID 7936-stream0 State 1 archive file 7936-stream0.ismv
TrackId 2 Name video encoded bitrate 1450000
TrackId 1 Name audio encoded bitrate 64000
Stream ID 7936-stream2 State 1 archive file 7936-stream2.ismv
TrackId 2 Name video encoded bitrate 600000

IIS Media Services 4.0 : Manifest Compression

Giuseppe Guerrasio — Thu, 09 Dec 2010 14:30:00 GMT

IIS Media Service 4.0 was released and now you can use it as an integrated media platform . As you can read in Chris Knowlton blog post there are a lot of new features in IIS Media Services 4.0 not only connected to the integrated media platform that I described in my previous post on this. We have a lot additionals features for iOS support like:

•Live DVR – Pause, Rewind, Seek
•Archiving – saves the live content for DVR use or later on-demand playback
•Archive Segmentation – breaks a long broadcast archive into shorter clips for storage purposes
•AES Encryption – keeps your content safe while streaming
•B-frame support – provides better picture quality
•Compatibility mode for iOS3 devices

and about performance improvements like:

•Publishing point runtime status – provides real-time stats via APIs and the UI
•Manifest compression – reduces the size of the manifest sent to clients
•Metadata delivery support – delivers RDF format metadata from encoder to the client
•Reduced memory usage – handles even higher server loads
•Smarter disk access – provides higher consistency server performance
•Dedicated fragment caching – reduces disk access during live sessions
•Low latentcy in end to end streaming

One of the feature added in this version that you can leverage is about manifest compression in Live Streaming. We have some improvements that are active by default in IIS MS 4.0 that are compatible with previous player version and some additional improvement that can be activated on IIS MS 4.0 but that are compatible only with player based on Smooth Streaming Media Element (SSME) version >= 1.5 . These features can permit to have a to fast experience during parsing of manifest because permit to reduce the dimension of the manifest.

The typical format of manifest for the chunks rappresentation during a Live Streaming in the previous version of IIS MS during a live look like below sample:

in this manifest t rappresent the timestamp of the chunks. In the IIS MS 4.0 we have by default a new manifest format during a live based on the version 2.0 of manifest that is compatible with the previous version of Smooth Streaming Media Element (SSME) but that can permit to have a better compression ratio with gzip with good results :

in this case we have a manifest that have the same information of the previous but we have the timestamp indicated only in the first chunk and with d a duration of every chunk that can permit to calculate the timestamp of every chunk . This format is a default in IIS MS 4.0 and is compatible with the current versio v1.1 of SSME

In addition to the previous improvement you can activate on the live pub point the 2.2 version of the manifest that can permit to use a new keyword to obtain more compression in the manifest. For example if we activate 2.2 manifest version the previous manifest client is:

where r is the repeat tag that means in this case the number of times that the chunk with the same duration as repeated . This manifest is logical equivalent to the previous and means that we have 6 chunks with duration of d=”20000000” starting from timestamp of t=”80000000” . This format can permit to reduce the manifest dimension in same case to small fixed size, but it is compatible only with SSME >= v 1.5 .

You can enable Smooth Streaming Manifest Format version 2.2 on a live publishing point in IIS Media Services 4.0 adding the tag below in the <head> sections of .isml file created for a publishing point:

Pay attention to activate this feature because I mentioned before if you activate this version of manifest on IIS MS 4.0 only player based on SSME >= version 1.5 are able to read the manifest and put at work streaming. You can download Smooth Streaming Media Element Client SDK v1.5 that is compatible with this new version of manifest .

Using Smooth Streaming Media Element for Windows Phone 7

Giuseppe Guerrasio — Mon, 06 Dec 2010 15:30:00 GMT

In my previous post I described the avaliability of Smooth Streaming Media Element (SSME) for Windows Phone (WP) as a part of the Integrated Media Platform vision for IIS Media Services. In this post I would show you how you can use SSME for WP7 in order to reproduce Smooth Streaming (SS) content live and ondemand. In this post I'll show you how it is possible use directly SSME in a WP project but I would remember that if you are looking for a complete player solution you can leverage the Silverlight Media Framework that give to you a complete solution based on SSME compatible also with WP .

For first you can download the dll that contain SSME for WP from the latest version of Smooth Streaming Client SDK . After intalled the SS Client SDK you can found the Microsoft.Web.Media.SmoothStreaming.dll for WP7 in (your drive):\Program Files (x86)\Microsoft SDKs\IIS Smooth Streaming Client\ select the Windows Phone version.

In order to start with WP you have to download and Install Visual Studio for Windows Phone Tool and Expression Encoder for Windows Phone . You can read all the info for starting with Windows Phone here.

If you are intrested in a global player that works in every page of your app and in a live smooth streaming audio only, you can read for more info this additional post on this topics.

You can start a new Windows Phone project from Visual Studio using the specific template project:

And after that you can add a reference to Microsoft.Web.Media.SmoothStreaming.dll for WP :

In order to insert the SSME in your project you have to add a reference to your MainPage.xaml page, and insert this reference in the <phone:PhoneApplicationPage tag:

xmlns:SSME="clr-namespace:Microsoft.Web.Media.SmoothStreaming;assembly=Microsoft.Web.Media.SmoothStreaming"

I suggest to change also the Orientation Support on the page in order to have the landscape orientation that is more useful for wotching videos:

SupportedOrientations="Landscape" Orientation="Landscape"

this means that you have this PhoneApplicationPage tag in your mainpage.xaml:

<phone:PhoneApplicationPage
    x:Class="WindowsPhoneSSMESample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:SSME="clr-namespace:Microsoft.Web.Media.SmoothStreaming;assembly=Microsoft.Web.Media.SmoothStreaming"
    mc:Ignorable="d" d:DesignWidth="728" d:DesignHeight="480"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Landscape" Orientation="Landscape"
    shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded">

In this way you have referenced a namespace SSME that point to the control that are in Microsoft.Web.Media.SmoothStreaming and you could insert these in your xaml page. Now you can add in ContentPanel Grid this tag in order to insert SSME in your page:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>
            <SSME:SmoothStreamingMediaElement x:Name="video"/>
        </Grid>

We can use video as a reference from our code to the instance of SSME inserted in the page. From the Loaded Event in MainPage.xaml we can manage the reference and set the SmoothStreamingSource property to the uri of the manifest SS content that we want reproduce:

video.SmoothStreamingSource = new Uri("http://localhost/adaptivestreaming/video/vc1/big_buck_bunny_1080p_surround.ism/manifest");

You can use Play , Stop, Pause method to control reproduction and you can subscribe all the event in the SSME like video.CurrentStateChanged or video.MediaFailed or video.ManifestReady to manage the lifecycle of the SSME in the same way that is possible do for SSME for PC (http://msdn.microsoft.com/en-us/library/ee958035(v=VS.90).aspx) .In order to access to the SSME from the code you have to add to your .cs file this namespace:

using Microsoft.Web.Media.SmoothStreaming;

For example in order to manage Play, Pause, audio volume etc and to show status of Streaming and current Level of bitrates involved in the reproduction we can add these elements to our xaml:

<Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="0.90*"></RowDefinition>

            <RowDefinition Height="0.10*"></RowDefinition>

        </Grid.RowDefinitions>

        <SSME:SmoothStreamingMediaElement x:Name="video" Grid.Row="0" />

        <StackPanel Orientation="Horizontal" Grid.Row="1">

I removed the content grid and added directly in the first layaout grid in our mainpage.xaml:

- two buttons used for Play and Stop directly attached to an handler for click event in the code described before;

- two textblocks used to present status and current bitrates used in reproduction

On the code in .cs files I added this handler and additional code in the loaded event:

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
        {
            video.CurrentStateChanged += new RoutedEventHandler(video_CurrentStateChanged);
            video.PlaybackTrackChanged +=new EventHandler<TrackChangedEventArgs>(video_PlaybackTrackChanged);
            video.SmoothStreamingSource = new Uri("http://localhost/adaptivestreaming/CESARONI_DVD02Video.ism/manifest");

        }

        void video_PlaybackTrackChanged(object sender, TrackChangedEventArgs e)
        {
            currentBitrate.Text = e.NewTrack.Bitrate.ToString();
        }

        void video_CurrentStateChanged(object sender, RoutedEventArgs e)
        {
            status.Text = video.CurrentState.ToString();
        }

        private void StopButton_Click(object sender, RoutedEventArgs e)
        {
            //This should simply stop the playback
            video.Stop();
            //We should also reflect the chang on the play button
            PlayButton.Content = "Play";
        }

        private void PlayButton_Loaded(object sender, RoutedEventArgs e)
        {
            switch (video.AutoPlay)
            {
                case false:
                    PlayButton.Content = "Play";
                    break;
                case true:
                    PlayButton.Content = "Pause";
                    break;
            }
        }

private void PlayButton_Click(object sender, RoutedEventArgs e)
{

            //Monitor the state of the content to determine the right action to take on this button being clicked
            //and then change the text to reflect the next action
            switch (video.CurrentState)
            {
                case SmoothStreamingMediaElementState.Playing:
                    video.Pause();
                    PlayButton.Content = "Play";
                    break;
                case SmoothStreamingMediaElementState.Stopped:
                case SmoothStreamingMediaElementState.Paused:
                    video.Play();
                    PlayButton.Content = "Pause";
                    break;
            }

}

As you can see before I subrcibed in Loaded event two events :

video.CurrentStateChanged += new RoutedEventHandler(video_CurrentStateChanged);
video.PlaybackTrackChanged +=new EventHandler<TrackChangedEventArgs>(video_PlaybackTrackChanged);

The first is used to catch change status in SSME and in the handler I write in a specifc TextBlock the current status of SSME, in the second we capture changes in bitrates level used in reproduction and also in this case in the handler I write the current level of bitrate in a specific TextBlock.

The others handlers added to the code are conected to the click event and are used to manage the play stop pause on the SSME. You could read in the code before how this works.

If you would avoid that the application is deactiveted when the Phone go idle or lock (for example you stream audio content and would that the user continue to listen the content ) , you can add to the Loaded Event this code:

PhoneApplicationService.Current.ApplicationIdleDetectionMode = IdleDetectionMode.Disabled;

that prevent deactivation of the app like you can read here and in the specific api description in sdk of wp .

With SSME for WP7 you can play also audio only streaming.

In order to reproduce SS content with SSME on WP7 you have to pay attention to some additional rules about the type of content supported in the current version of WP7 and SSME 1.5. Here you have a list of supported codecs for SS: VC1 / H.264 for video, WMA Pro/HEAAC/AACL for audio.

The Maximum Resolution admited on the W7 for H.264 are :

720 x 480 pixels at 30 fps
720 x 576 pixels at 25 fps

The Current profile for H264 supported on the phone are baseline and main Level 3.0.

It is nesessary PAY ATTENTION TO THE FACT THAT IN CURRENT VERSION OF WP IN SOME HW MULTIPLE RESOLUTIONS BITRATE ISN'T SUPPORTED this means that it is necessary have the same resolution for all the bitrates inlcuded in the range of levels to reproduce in SSME for WP7. You can check if the device supports multiple resolutions during a play with this api http://msdn.microsoft.com/en-us/library/microsoft.phone.info.mediacapabilities.ismultiresolutionvideosupported(v=VS.92).aspx. In the case that the devices doesnt support multiple resolution and you have a previous encoded content with multiple resolutions or you want create a single asset for multiple devices , you have to pay attention to this and in the case you can use the StreamInfo.RestrictTracks API in a ManifestReady event , in order to restrict the range of bitrates used in reproduction . For example imagine to have a manifest that have for biterates <= of 600K the same resolutions and for bitrates > 400k a variable resolutions in order to meet quality requirements of others devices like a PC, in the case tha the is multipleresolutionvideo supported respond with false you can add the code below in the manifest ready event on WP in order to limit the bitarates used in the reproduction :

void video_ManifestReady(object sender, EventArgs e)
        {
            if (video == null)
            {
                return;
            }

            foreach (SegmentInfo segment in video.ManifestInfo.Segments)
            {
                foreach (StreamInfo streaminfo in segment.AvailableStreams)
                {
                    if (MediaStreamType.Video == streaminfo.Type)
                    {
                        List<TrackInfo> tracks = new List<TrackInfo>();

                        foreach (TrackInfo track in streaminfo.AvailableTracks)
                        {
                            if (track.Bitrate <= 400000)
                            {
                                tracks.Add(track);
                            }
                        }
                        streaminfo.RestrictTracks(tracks);
                    }
                }
            }
        }

You can subcribe the ManifestReady event in SSME called video in this way : video.ManifestReady += new EventHandler<EventArgs>(video_ManifestReady);

In alternative you can create an adhoc manifest, server side , one for every devices and point every devices to the right manifest.

Propose an encoding profile is difficult because there are a lot of parameters to consider like bandwith avaliable type of content etc, but on my experience in others project that leverare SS for WP7 I can suggest to have in the manifest of your content this generic profile:

Use Main Level 3.0 with 640x352 for 16:9 with this levels: 1000 k(Full framerate but <=30) , 800k (Full framerate but <=30) , 600k (Full framerate but <=30) , 400k (Full framerate but <=30) , 200k (half framerate <=15), 100 k(half framerate <=15)

If you would serve the same content to WP7, PC and Apple Devices like iPhone and iPad leveraging the capability of IIS Media Services 4.0 and IIS Transform Manager , you have to built a profile using H264 Baseline Level 3.0 and pay attention to the resolutions in differents bitrates levels and Transmux the SS also in Apple Adaptive Streaming.

If you have to stream a to low level of the maximu 1000k suggested before , you can leverage these profiles for WP7 and iPhone/iPad and in the case add more level fo PC using variable resolution for profiles > 600k and use RestrictTracks API on PC for the minimu bitrates for WP7 for the maximum bitrate and during the transmux operation on IIS Transform Manager and IIS MS 4,0 (in the case of live streaming ) limiting profile fo Apple devices to 600k :

4:3 use Baseline Level 3.0 with 480x360 with this levels: 600 k(Full framerate but <=30) , 400k (Full framerate but <=30) , 200k (half framerate <=15), 100 k(half framerate <=15)

16:9 use Baseline Level 3.0 with 480x272 with this levels: 600 k(Full framerate but <=30) , 400k (Full framerate but <=30) , 200k (half framerate <=15), 100 k(half framerate <=15)

If you don't need to cover old iPhone you could move to Main Level 3.0 with the same resolution in order to increase the quality.

Pay attention to the fact that profiles suggested before are only a sample and not necessary these profile are good for your scenarios. It is necessary test it and adjust it to your requirements in order to have the best solution.

Promuovere il Pinning del nostro sito con Internet Explorer 9 utilizzando unobtrusive JavaScript

Giuseppe Guerrasio — Fri, 03 Dec 2010 09:00:00 GMT

Il Pinning e la Windows 7 Experience sono una delle feature interessanti di IE9 per portare il nostro sito direttamente sul desktop dei nostri utenti.

Con i Pinned Site si possono trascinare ed agganciare direttamente alla barra delle applicazioni di Windows 7 i siti trascinando l'icona dal box dell'indirizzo direttamente sulla barra :

L'icona rimane agganciata alla barra di Windows 7 e consente di avere il sito disponibile come una applicazione direttamente all'interno del desktop e di poterci accedere nuovamente partendo dall'icona aggiunta alla barra delle applicazioni:

Nel mio precedente post sull'argomento ho illustrato come sia semplice implementare questa funzionalità . Rimanere in contatto con l'utente e portare il nostro sito direttamente sul desktop dell'utente ha un grosso valore aggiunto è può incrementare l'utilizzo della nostra applicazione significativamente. Promuovere è spiegare all'utente che può sfruttare questa funzionalità e rimanere con più facilità in contatto con i nostri servizi contribusce ulteriormente a promuovere l'utilizzo del nostro sito.

Introdotta con la RC di IE9 per semplificare ulteriormente la proposizione del Pinning, la possibilità di applicare uno specifico stile il "pinImage" per permettere il Pinning direttamente da un elemento immagine:

Applicando lo stile indicato sopra si può effettuare il Pinning trascinando direttamente l'immagine sulla barra di windows.

I siti che nel mondo hanno già cominciato ad implementare il Pinning e le JumpList hanno anche cominciato a promuovere in modo molto semplice verso gli utenti che già usano IE9 la possibilità di sfruttare il Pinning . Anche in italia abbiamo diversi importanti siti che hanno cominciato a proporre il Pinning con un'interessante modalità che prevede la comparsa di un banner temporizzato che l'utente può anche eliminare.

Di seguito abbiamo alcuni esempi riportati tra i tanti esistenti tra i primi partner in italia che hanno implementato questa funzionalità :

Ho pensato che questo tipo di banner può essere utile in tutti i siti e applicazioni per promuovere l'utilizzo di questa funzionalità presso i nostri utenti e fornire loro nuovi servizi con il Pinning e le JumpList e facilitare l'utilizzo dei nostri siti e servizi. Implementare poi un semplice esempio in JS che consenta di implementare un banner di promozione del Pinning come quello illustrato che possa essere facilmente inserito in qualunque sito senza impattare in modo significativo sulla struttura del sito, ci da anche la possibilità di mostrare un buon esempio di unobtrusive JavaScript e di feature detection code invece del browser detection code.

Per unobtrusive JavaScript si intende semplificando in modo generico l'implementazione di una funzionalità che possa essere aggiunta ad una pagina senza alterarne in modo significativo la struttura e che possa servire la funzionalità in modo corretto in base alle capacità dei diversi browser che navigano sulla pagina.

Nel nostro caso, questo significa implementare uno script che possa essere referenziato nella pagina e che mostri il banner senza bisogno di modificare la struttura della pagina preesistente, applicando il comportamento in modo corretto sui browser che implementano il Pinning, senza alterare il comportamento della pagina per quelli che non lo supportano. L'implementazione fatta è semplicemente una implementazione di esempio, non ha l'ambizione di essere una soluzione finale utilizzabile in ogni scenario, ma vuole essere un esempio di base da cui partire. L'esempio contiene solo la parte di banner che propone il Pinning. Per implementare Pinning e JumpList sul vostro sito trovate le informazioni e gli esempi nel mio precedente post sull'argomento.

L'implementazione è contenuta in un file js e per portarla a funzionare su una vostra pagina basta includere il riferimento al file js, senza alcun cambiamento alla struttura della pagina. Per innescare lo script che porta a far comparire il banner nei casi opportuni ed a gestirne l'utilizzo e l'interazione con l'utente, viene utilizzato come classico nelle implementazioni unobstrusive, l'evento DOMContentLoaded ora supportato anche in Internet Explorer 9. In particolare all'inizio dello script di esempio che implementa la funzionalità di promozione del Pinning abbiamo la seguente istruzione:

//start check for message on DOM Loaded
window.addEventListener("DOMContentLoaded", function(){ var alertP= new IEPinningAlert();alertP.init();},false);

Sul DomContentLoaded viene eseguita la funzione init() associata ad una nuova istanza di IEPinningAlert che vedete di seguito:

function IEPinningAlert(){

var myAlert;
var cookieName="pinning";

this.init=function()
{
     try {
             if (window.external.msIsSiteMode() == false) {
               this.start();
             }
             else {
                //Already Pinned
             }
         }
         catch (e) {
             // Pinning not supported
                  //alert("Pinning non supportato");
         }

}

Nella funzione init() viene usata la nuova API JS di IE9 window.external.msIsSiteMode() che risponde con true se il sito è già Pinned e con false se il sito non è ancora stato agganciato alla TaskBar di Windows. Nel caso di true nella nostra funzione, viene eseguita la funzione start() riportata sotto che si preoccupa di mostrare il banner. In init() abbiamo anche un esempio di feature detection code tipico dell'approccio unobstrusive. Come potete vedere sopra l'if sulla API JS window.external.msIsSiteMode() viene eseguito in un try catch in modo da avere tre opzioni: sito pinned, non pinned o in caso di eccezione API non supportata da browser. In questo modo invece di ragionare con una logica browser detection , ovvero inserire un if che decide se eseguire o meno il codice per il banner in base al riconoscimento del tipo di browser e della versione, usiamo l'approccio diretto di verifica della implementazione della funzionalità da parte del browser che è la pratica corretta per implementare del codice più robusto e che continui a funzionare correttamente anche in versioni future del browser.

Di seguito abbiamo l'implementazione della funzione start() che esegue le due funzioni createHTML() e createStyle() che praticamente creano l'HTML per il box che propone il Pinning che viene poi mostrato con la funzione showAlert() .

this.start=function(){
            //if cookie hide message
   var IsCookie = readCookie('pinning');

   if (!IsCookie){
        this.createHtml();
       this.createStyle();
       myAlert = document.getElementById('alertWrapper');
       myAlert.style.top = 0 - myAlert.offsetHeight + 'px';
       showAlert();
   }
};

di seguito un immagine del banner:

Viene usato un Cookie per dare la possibilità all'utente di disattivare l'alert senza dover agganciare il Pinning. Il banner presenta un messaggio differente nel caso in cui IE9 è in esecuzione su Vista in quanto il pinning sulla taskbar è possibile solo in Windows 7, mentre sia in Windows Vista che in Windows 7 è possibile il pin sul menù start che si può effettuare eseguento la specifica API JS e che nel nostro esempio viene presentata con il pulsante Pin To Start Menù. In caso che il sistema operativo è Windows Vista viene presentato solo il pulsante Pin To Start Menù senza la scritta trascina l'icona sulla taskbar che viene mostrata solo se IE9 è in esecuzione su Windows 7. Si possono inserire dei link aggiuntivi a pagine del nostro sito che spiegano all'utente cosa si può fare con il Pinning, un buon esempio di questo approccio lo trovate sul sito meteo.it che ha appunto una pagina dedicata a questo lanciata da un link nel banner di proposizione del Pinning.

Di seguito le due funzioni showAlert e hideAlert:

//show alert
   function showAlert() {
    if(parseInt(myAlert.style.top) < 0){
     //myAlert.style.top = parseInt(myAlert.style.top) + 2 + 'px';
     myAlert.style.top = '0px';
     setTimeout(showAlert,100); // call showAlert

    }
    else{
     setTimeout(hideAlert,20000);// call hideAlert
    }
   }

   //Hide alert
   function hideAlert() {
    if(parseInt(myAlert.style.top) > (0 - myAlert.offsetHeight)){
     myAlert.style.top = parseInt(myAlert.style.top) - 3 + 'px';
     setTimeout(hideAlert,100); // call hideAlert
    }
   }

Se volete scaricare l'esempio lo trovate qui.

Internet Explorer 9 , CSS 3, e Multiple Background

Giuseppe Guerrasio — Fri, 19 Nov 2010 09:30:00 GMT

Relativamente al supporto del CSS3 in IE9 una nelle feature chè ho citato anche nel precedente post sulle nuove funzionalità introdotte in IE9 e che è estremamente utile in diverse situazioni e che come altre funzionalità beneficia del valore aggiunto apportato dalla accelerazione grafica del rendering di IE9 è relativo alla possibilità di impostare più background su uno stesso elemento specificando le coordinate. Siccome IE9 supporta anche SVG ,sia inline che come contenuto di un img, è possibile anche impostare come background anche degli SVG.

Per impostare più background attraverso uno stile si può utilizzare la specifica proprietà background-image prevista dal CSS3 e impostare nella definizione, più elementi di sfondo anche utilizzando contenuti .svg . Attraverso la proprietà background-position, andremo a definire le posizione dei background rispetto all'elemnto su cui sono applicate. Di seguito riporto un esempio di applicazione di background mutlipli:

#demo {
background-image:
      url('backgrounds/crosshair.svg'),
      url('backgrounds/ufo.svg'),
      url('backgrounds/clouds.svg');
background-position:
      373px 198px,
      203px 64px,
      -166px -108px;
  background-clip:
  padding-box, border-box, border-box;
background-repeat: no-repeat, no-repeat, repeat;
}

che produce la seguente visualizzazione:

Le proprietà sono anche accessibili via JS e possono essere modificate dinamicamente e nel test Drive center di IE9 trovate uno specifico esempio che illustra l'utilizzo di questa funzionalità in un semplicissimo gioco che usa anche il JS per modificare dinamicamente la posizione dei background. Spostando il mirino (che è uno dei tre background) con il mouse dovete colpire l'ufo (parte del secondo elemento di background) e durante il gioco possiamo vedere lo sfondo (costituito dal terzo background applicato al div) che scorre. Analizzando il codice nella parte HTML trovate la definizione dello stile per il div demo esattamente uguale a quella riportata sopra come evento e dal codice dell'applicazione, aggiungo di seguito l'implementazione della funzione agganciata all'evento onmousemove in cui viene appunto gestito il movimento del mirino e dello sfondo ed eventualmente in caso di successo nel colpire l'ufo, sostituito dinamicamente il background dell'ufo con un immagine che evidenzia il successo nel colpirlo:

var d = document.getElementById('demo');

d.onmousemove = function(e) {
  var x = getElementX(d,e.clientX + document.documentElement.scrollLeft);
  var y = getElementY(d,e.clientY + document.documentElement.scrollTop);
  var crosshairX = x-125;
  var crosshairY = y-125;
  var ufoX = 800-Math.floor(x*1.2);
  var ufoY = Math.floor(y*0.2);

  if (Math.abs(ufoX-crosshairX) <= 45 && Math.abs(ufoY-crosshairY) <= 45) {
   if (!zapped) {
         d.style.backgroundImage = "url('./backgrounds/crosshair.svg'),url('./backgrounds/zap.svg'),url('./backgrounds/clouds.svg')";
         bgUrlUfo.innerHTML = "<a href='./backgrounds/zap.svg' target='_blank'>zap.svg</a>"
         miniBgUfo.style.backgroundImage = "url('./backgrounds/zap.svg')";
         zapped = true;
     if (!muted) {
        ufoSound.pause();
        zapSound.play();
     }
   }
  } else {
   if (zapped) {
    d.style.backgroundImage = "url('./backgrounds/crosshair.svg'),url('./backgrounds/ufo.svg'),url('./backgrounds/clouds.svg')";
    bgUrlUfo.innerHTML = "<a href='./backgrounds/ufo.svg' target='_blank'>ufo.svg</a>"
    miniBgUfo.style.backgroundImage = "url('./backgrounds/ufo.svg')";
    zapped = false;
    if (!muted) {
     ufoSound.play();
     zapSound.pause(); zapSound.currentTime = 0;
    }
   }
  }

var chPos = $pos(crosshairX,crosshairY);
  var ufoPos = $pos(ufoX,ufoY);
  var cloudsPos = $pos(Math.floor(-x/3),Math.floor(-y/3));
  this.style.backgroundPosition = chPos+","+ufoPos+","+cloudsPos;

  posCrosshair.innerHTML = chPos;
  posUfo.innerHTML = ufoPos;
  posClouds.innerHTML = cloudsPos;
};

Nella variabile d abbiamo l'elemento che ci permette di accedere al div dove sono impostati i background e attraverso d.style.backgroundImage si accede ai background. Con this.style.backgroundPosition = chPos+","+ufoPos+","+cloudsPos; viene impostata la posizione dei background in base ai calcoli effettuati sul movimento del mouse.

Possiamo verificare la possibilità di modificare dinamicamente la posizione e i background usando i developer tool. Se lanciamo i Developer Tool e mandiamo in debug l'applicazione e impostiamo nella console la seguente istruzione

document.getElementById('demo').style.backgroundPosition = "0px 0px, 0px 0px, 0px 0px";

è la facciamo eseguire con il pulsante Run Script come nell'immagine seguente, vediamo che i background si spostano immediatamente alle coordinate impostate:

mentre se usiamo l'istruzione :

document.getElementById('demo').style.backgroundImage = "url('./backgrounds/crosshair.svg'),url('./backgrounds/zap.svg'),url('./backgrounds/clouds.svg')";

l'immagine dell'ufo fiene sostituita con l'svg dello zap.svg usato quando l'ufo viene colpito, come da immagine seguente:

Internet Explorer 9: Misurare le performance nelle pagine Web

Giuseppe Guerrasio — Wed, 17 Nov 2010 09:30:00 GMT

La misura delle performance all'interno delle pagine Web per la parte client dell'esecuzione delle nostre pagine è uno dei temi da sempre più complessi nello sviluppo web. Avere degli strumenti che consentano di raccogliere feedback sul funzionamento delle nostre pagine, nelle diverse condizioni di utilizzo, sia nello sviluppo che durante l'esercizio della nostra applicazione anche all'interno dei browser dei nostri clienti è un tema utilissimo per capire il funzionamento del nostro codice ed ottimizzarlo.

Negli anni si sono implementate da parte degli sviluppatori diverse modalità per effettuare questo tipo di misurazione, che vanno dall'inseririre nel codice JS dei TimeStamp usando ad esempio (new Date).getTime(); ed infrastrutture che finiscono per influire negativamente sulle performance delle applicazioni e che forniscono delle modalità inaffidabili per la corretta misurazione del comportamento della pagina. Ad esempio l'utilizzo di (new Date).getTime(); è impreciso ed è estremamente difficile effettuare misurazioni al di sotto dei 15ms .

Il browser in effetti, conosce perfettamente lo stato di esecuzione della pagina ed i tempi di esecuzione delle diverse componenti e pertanto avere in aggiunta alle API del browser una modello di oggetti per accedere alle informazioni di performance sarebbe estremamente utile per questi scenari, in particolare se esposto attraverso una modalità standard .

Le Web Timing specification del W3C rappresentano un ottima base per implementare le API per risolvere il problema descritto in maniera interoperabile e Internet Explorer 9 è il primo browser che comincia ad implementare delle API per esporre ai developer le informazioni relative ai timing. Le API di IE9 in questo campo sono basate in particolare sulla sezione navigation della specifica Web Timing ed è avviata all'interno del W3C la discussione con altri costruttori di browser per avere implementata anche in altri browser la stessa specifica ad arrivare ad un modello completamente interoperabile e funzionale alle esigenze rappresentate.

Con la Platform Preview 6 (PP6) di IE9 le API ed in particolare la Navigation Timing interface è stata aggiornata proprio per essere aderente alle ultime modifiche apportate alla specifica dal Web Performance Group del W3C ed arrivare ad avere appunto una specifica affidabile, sicura ed interoperabile. Le API esposte in IE9 sono inserite in :

window.msPerformance

UPDATED: Dalla RC aggiornato il namespace e rimosso il prefisso ms , aggiornata la specifica all'ultimo draft che ha raggiunto lo stato di candidate raccomandation

In particolare la parte di Navigation Timing interface è inserta in window.Performance.timing e fornisce accesso alle informazioni relative al timing nelle diverse fasi del caricamento della pagina. Oltre a questa interfaccia è disponibile anche l'interfaccia window.performance.navigation che contiene informazioni aggiuntive relative alla navigazione e alle network activity .Di seguito avete la struttura delle due interfacce implementate nel in window.performance :

interface PerformanceTiming {
readonly attribute unsigned long long navigationStart;
readonly attribute unsigned long long unloadEventStart;
readonly attribute unsigned long long unloadEventEnd;
readonly attribute unsigned long long redirectStart;
readonly attribute unsigned long long redirectEnd;
readonly attribute unsigned long long fetchStart;
readonly attribute unsigned long long domainLookupStart;
readonly attribute unsigned long long domainLookupEnd;
readonly attribute unsigned long long connectStart;
readonly attribute unsigned long long connectEnd;
readonly attribute unsigned long long secureConnectionStart;
readonly attribute unsigned long long requestStart;
readonly attribute unsigned long long responseStart;
readonly attribute unsigned long long responseEnd;
readonly attribute unsigned long long domLoading;
readonly attribute unsigned long long domInteractive;
readonly attribute unsigned long long domContentLoadedEventStart;
readonly attribute unsigned long long domContentLoadedEventEnd;
readonly attribute unsigned long long domComplete;
readonly attribute unsigned long long loadEventStart;
readonly attribute unsigned long long loadEventEnd;
};

interface PerformanceNavigation {
const unsigned short TYPE_NAVIGATE = 0;
const unsigned short TYPE_RELOAD = 1;
const unsigned short TYPE_BACK_FORWARD = 2;
const unsigned short TYPE_RESERVED = 255;
readonly attribute unsigned short type;
readonly attribute unsigned short redirectCount;
};

I due namespace permettono di ottenere via JS le informazioni relative ai tempi presi durante il caricamento della nostrapagina nel browser . In particolare la parte di timing ci da accesso ad un timestamp che può essere usato per misurare dei tempi ed anche semplicemente formattato in una DataOra. Di seguito un semplice esempio di JS che utilizza alcune informazioni della interfaccia descritta:

var myBody;
this.onload = function ()
{
myBody = document.getElementById ("myBody");
if (window.msPerformance)
{
myBody.innerHTML = 'navigationStart: ' + window.performance.timing.navigationStart +'ms (' + Date (window.performance.timing.navigationStart) + ') <br>';
}
return;
};

Il seguente codice, ad esempio, permette di calcolare il tempo richiesto per l'esecuizione dell'evento onload:

var oTiming = window.performance.timing;
var iTimeMS = oTiming.loadEventEnd - oTiming.loadEventStart;

Attraverso JSON è possibile effettuare una raccolta complessiva come:

JSON.Stringify(window.msPerformance);

Per vedere in azione queste API, potete provare window.Performance nel Test Drive center.

UPDATED: Dalla RC aggiornato il namespace e rimosso il prefisso ms , aggiornata la specifica all'ultimo draft che ha raggiunto lo stato di candidate raccomandation

Implementare la FavIcon HigRes per il Pinning con X-Icon Editor

Giuseppe Guerrasio — Fri, 29 Oct 2010 13:15:00 GMT

In uno dei miei precedenti post ho descritto le nuove API JS che con IE9 permettono di sfruttare l'integrazione con il desktop di Windows 7 e sfruttare il Pinning sulla TaskBar e le nuove JumpList . Uno degli elementi fondamentali per la User Experience nella nuova funzionalità di Pinning è rappresentato dalla possibilità di utilizzare delle FavIcon ad alta risoluzione per portare il logo del nostro sito direttamente sul desktop di Windows 7 e da li metterlo bene in mostra . Per fare questo abbiamo visto nel precedente post come personalizzare il Pinning e che viene direttamente sfruttata la classica FavIcon in formato .ico e il normale TAG già previsto per questa funzionalità

I file .ico possono contenere Icon a diversa risoluzione e nell'operazione di Pinning se nella nostra FavIcon abbiamo inserito delle Icon a più alta risoluzione, vengono automaticamente usate per gestire il pinning e per l'icona che poi viene mostrata sulla TaskBar una volta completata l'operazione di aggancio del sito.

Per implementare con facilità la nostra FavIcon multirisoluzione, in modo che possa contenere sia la classica 16x16 usata dai browser sulla barra dell'indirizzo e sui Tab , sia le Icon a più alta risoluzione per il Pinning ( 32x32, 64x64) possiamo da oggi usare un nuovo tool online che si chiama X-Icon Editor . Di seguito un immagine di come si presenta il tool che tra le altre cose è completamente implementato sfruttando HTML5 per la parte di interfaccia utente:

Potete dare in input al tool delle immagini partendo da diversi formati (jpg,png,bmp e ico) e caricarle con rapidità nell'applicazione che vi farà subito una preview delle Icon e vi consentirà di selezionare all'interno dell'immagine la porzione che volete inserire nella Icon multi-risoluzione:

Fatta la selezione dell'elemento da inserire nella nostra Icon multirisoluzione, possiamo selezionare le risoluzioni che vogliamo inserire e procediamo con il tasto OK e il nostro editor ci porta nell'area dell'applicazione che ci consente di ritoccare eventualmente la Icon:

Possiamo anche in qualunque momento fare una preview con lo specifico pulsante previsto nell'interfaccia del tool, di come la nostra Icon multirisoluzione verrà poi inserita sfruttando le differenti risoluzioni disponibili , nelle diverse componenti di utilizzo nel Pinning (taskbar, barra indirizzi, JumpList , Tab, etc):

Terminata l'operazione di ritocco possiamo con il pulsante Export far generare la nostra Icon per il download:

Terminato il download , possiamo implementarla sul nostro sito con il TAG della FavIcon

e , personalizzare il resto delle funzionalità del Pinning per avere così un bellissima esperianza utente sul desktop di Windows 7 con Internet Explorer 9 !!!

Ribadisco il suggerimento fatto anche nell'altro articolo di applicare GZIP ed un buon livello di HTTP cache per garantire una migliore esperienza agli utenti che useranno il Pinning sul vostro siti o sulla vostra Web Application.

IIS Media Services: Live Smooth Streaming, Fault Tolerance and Architecture

Giuseppe Guerrasio — Wed, 27 Oct 2010 17:19:00 GMT

A frequent question that I received is about suggested architecture for live Smooth Streaming and fault tolerance during a live streaming.

With this post I would try to explain in a simple way some details about Live Smooth Streaming and summarize architecture and suggestions for deliver robust Live Streaming with IIS Media Services (IIS MS).

One of the most significant differences about Smooth Streaming respect to past technologies for delivering real time streaming is about the way that is used for delivering content to player client.

In classic streaming like RTSP\RTMPE\WMS etc , client open a permanent connection to the streaming server that is responsible to control streaming and that provide to push the video to the client and manage buffers . Server receive control command to the client like play, pause etc and react at this command and push the content to the client. This way to deliver streaming have a lot of limits and lack in terms of scalability because is required a permanent connection with a specific server and costs, because is required a specialized server for deliver video content.

In order to offer a more scalable solution at lower costs Smooth Streaming leverage pull model using standards HTTP get to give access to the client also for live streaming , that could permit to use a simple HTTP cache server for distribute video content on Internet . In this model, client drive the streaming and ask for content to any http cache server involved in streaming distribution without any affinity or dependency. This permit to increase dramatically scalability and reducing costs for this type of service. In Smooth Streaming video content is segmented in a sequence of video chunk with a specific duration that the client download with a sequence of HTTP get and use these to create a buffer and starts the video decode and play on the client.

In live smooth streaming client starts reading via HTTP get a manifest for streaming . In this manifest client have a description of available bitrates\quality for live streaming, url that is necessary call to download content, actual status of live streaming with the list of the video and audio chunks available and the time code that drive the streaming and the duration of every chunk. For example below you can see a manifest for a live streaming with ten minutes of DVR :

<?xml version="1.0"?>

</StreamIndex>

</StreamIndex>

</SmoothStreamingMedia>

You can see the audio and video track , the levels of bitrates available for the client , the DVR window length of the content , the attribute IsLive that explain to the client the fact that it is a live streaming, the lists of the chunks available for download. With the t parameter in the chunks you can find the time code and with d parameter the duration of every chunk. With this information the client can calculate actual position of live streaming and starts to pull chunks in order to create the buffer for a correct reproduction, using a sequence of HTTP GET request to one of the HTTP cache server involved in the streaming. Buffer dimensions in the client could be determined with a specific parameter in player configuration.

You can see below the structure of the HTTP get that the client use for video chunks:

http://{ service uri}/QualityLevels({bitrate})/Fragments(video={start time})">

and for audio chunks:

http://{ service uri}/QualityLevels({bitrate})/Fragments(video={start time})">

As you can see client send an HTTP GET request for every audio and video chunk and specify in the request bitrates required and start time code for the video fragment.

This is a sample request for a video chunk at 350k for 60000000 position time code:

http://localhost/test.isml/QualityLevels(350000)/Fragments(video=60000000)

and this is a sample for an audio chunk for 60000000 position time code 10980716553:

http://localhost/test.isml/QualityLevels(64000)/Fragments(audio=10980716553)

The client selects the bitrates that requests to the server and adjusts it continuously during the streaming in base to the real bandwidth available for the download and the capability of the client to decode the quality level of the video.

Time code for every request is calculated starting from the information in the manifest and using a local clock in order to establish the frequency of the requests for the new time code aligned with the buffer in the client.

As you can understand from the previous description, time code play a fundamental role in this type of streaming .

In order to go in deep on the architecture required for achieve a robust live streaming with fault tolerance we start to describe the role that IIS MS play in the architecture.

Every IIS MS can receive video fragment from an encoder or from another IIS MS and can offer this to a client or to another IIS MS or to an HTTP cache server.

IIS MS can receive or transmit content in push or in pull from the encoder or from another IIS MS and can ingest locally an archive of the content in live streaming. Starting from IIS MS 4.0 you could enabled also trans-mux of content in Http Adaptive Streaming for Apple devices like I described in this post on this topic.

In the picture below you could see the possible combination for input output video fragment to IIS MS:

For the input in push IIS MS accept long running HTTP POST to a specific rest URL of the publishing point configured for live streaming and append a stream id after the url of the pubpoint in order to identify the stream in a unique way. For example for a pub point that have this url:

http://localhost/test.isml

We have this type of url used for push the content using a long running HTTP POST:

http://localhost/test.isml/streams({streamid})

The "streamID" value uniquely identifies an incoming fragmented stream which is transmitted over a HTTP POST request. One fragmented MP4 stream could contain multiple tracks (e.g. video and audio). In Live Smooth Streaming, typically there are multiple fragmented MP4 streams coming from the encoder or encoders to the server.

Encoders or others IIS MS use this approach to push video fragment for live streaming to a server. This is the typical configuration used for encoder connection. IIS MS ingest the content and based on the configuration of the publishing point can:

-archive it on local disk

- push the content to other servers

- offer it in pull to other servers or to client player.

IIS MS admit to receive content in input with more HTTP POSTS, in the case of failure in a long running HTTP POST , IIS MS wait that the source of the Input reconnect in order to continue to push video fragments. In the case that the streaming is finished encoder can send a specific EOS signal to inform IIS MS that the streaming is ended.

In the case that IIS MS receive an EOS the publishing point remain in Stopped state but with DVR active for client. If the encoder reconnect after EOS streaming doesn't restart. You could use a specific entry in the .isml file to instruct IIS MS to reset the publishing point when an encoder reconnects after an EOS. This is the TAG that you can insert in the .isml files that configure the pubpoint:

In order to achieve fault tolerance IIS MS can accept in input more stream with the same streamID on the same publishing point. This can permit to push with 2 encoder video fragments on the same pubpoint . IIS MS select only one fragments with the same time code and discard the others. In this way you can use 2 encoders in parallel with aligned time code in order to have fault tolerance. Time code play a fundamental role for video fragments in Input, and IIS MS use the time code to discriminate video fragments in input with the same StreamiID. For this reason pay attention to the fact that if you have 1 encoder active on a pubpoint and you have a fault on the encoder and the long running HTTP POST stopped, IIS MS wait that the encoder reconnect and it is fundamental that when the encoder reconnect use a coherent time code. IIS MS restart streaming only when start to receive video fragment with a time code > of the last time code ingested . For this reason is fundamental that you have a time code in your video fragment, if your encoder restart the time code from zero or with a time code in the past respect to the last ingested in IIS MS streaming can't restart since time code is in the future from the last known time code ingested.

The figure below describe the suggested architecture for a robust live streaming delivery :

As you can see we have a different layers with a different role:

- Encoders
- Ingest Servers
- Origin Servers
- Distribution Servers

Encoders:

Encoders take the video signal, encode it in Smooth Streaming format . The encoder use a long running HTTP POST to push video fragment to the ingest server.

In order to achieve redundancy you could use two different model :

- 1 active encoder and 1 not active encoder that could be used as backup in the case of failure of the first encoder (called N+M scenario): The backup can be shared with more of 1 active streaming and managed with the software management solution of the encoders in order to start when one of the active encoder fail. This is a less expensive scenario, also in this case is necessary that when the backup encoder starts after the fault of the first active encoder, restart to push video fragments with the same streamID and with a time code in the future from the last known time code sent to the ingest server from the previous faulted encoder. In this case we could have a short interruption in the streaming that you could manage from a client player, managing the exception and start to try to reconnect to the server automatically.

- 1 + 1 Encoders active : in this scenario we have 2 active encoders that push the same video framents to the same ingest server. This is a configuration suggested for mission critical streaming . Encoders can push at the same time the signal to two ingest servers in order to offer a complete redundancy. It is required that both encoders be timecode aligned using a common source clock, such as embedded SMPTE timecode (VITC) on the source signal. As we have described before ingest servers discard duplicated fragments and in the case of fault of one of the encoder, streaming continue to work without interruption.

Ingest Servers:

Ingest Servers have the role to receive content from the encoder and push it to origin servers (in general at minimum 2 origin servers). Typically Ingest Servers don't have the archive active and push content to 2 origin servers and manage reconnection in the case of network fault.

You can configure on IIS MS the possibility to push from the ingest servers to the oring servers with the specific tab.

The ingest Server push the content to all the servers that you insert in the configuration.

In the case of fault in one of the ingest servers we have a situation similar to the encoders fault . In the case that the encoders push on the 2 ingest servers we don't have any interruption in the other case management software of encoders detect the failure and start the backup encoder that starts to push on the second ingest server and restart the streaming. In this case we could have a short interruption that can be managed at client player level as described before.

Origin Servers:

The origin servers have the role to hold all the information about the live stream, they archive content and can directly serve client requests or distribution servers. We have multiple origin servers that run simultaneously in order to have redundancy and scalability. On origin servers can be drive a transmuxing to convert content to other formats. For example IIS MS 4.0 can drive a transmuxing in HTTP Live Streaming for Apple Devices. It can also be the source for distribution servers and synchronize past information with them if needed. In the case of fault in a origin server, additional origin servers can immediately serve as backups because they are all running and have the same data. Distribution servers know where to re-request and retry the stream from a backup in the case of origin server failure. To serve client requests, either directly or indirectly through a generic HTTP network that contains HTTP cache/proxy/edge servers, they must have archive and client output options configured.

Distribution Servers:

Distribution servers are used to scale out a network by offloading archiving and client request serving from the origin server tier. Distribution servers use the pull input stream option and are configured with multiple origin server URLs for redundancy. Like origin servers, we have multiple distribution servers to have scalability and redundancy. Is it possible use IIS MS configured in pull that point to all origins server in combination with IIS Application Request Routing (ARR). You can configure with the specific tab a publishing point in IIS MS to pull content from origins and configure a list of the origin where the distribution server can pull.

In the case of failure in one of the origin, the distribution server start to pull to the next in the list. Pay attention to the fact that the distributore switch to next server only in the case of origin server failure (machine down, netowrk error, etc.) and not in the case of encoder fault.

For more information about live streaming I would suggest to you to read these two fantastic posts from Sam Zhang (Developer Lead in IIS Media Services Team for live streaming) about live Smooth Streaming, the first about design principle of live Smooth Streaming, the second about the suggested architecture for delivering real-time streaming on IIS MS.

If you want learn more about configurations for Live Streaming with Smooth Streaming , you can use this resources on iis.net:

Internet Explorer 9 , CSS 3, Opacity Alpha e Browser detection code

Giuseppe Guerrasio — Wed, 13 Oct 2010 17:37:00 GMT

Nei precedenti post dedicati a IE9 ho introdotto le caratteristiche della integrazione con Windows 7 e gli aspetti principali presenti in questa nuova versione del browser . Per chi volesse approfondire vi consiglio di seguire l'evento in live streaming dedicato al tema .

Tra i punti più importanti abbiamo parlato del grande supporto dedicato ai nuovi standard web quali come HTML5, CSS3, SVG e ECMAScript5, che in combinazione consentono agli sviluppatori di creare una nuova generazione di applicazioni Web, sempre più ricche ed interattive.

In particolare relativamente al CSS già con Internet Explorer 8 era già stato fatto un grandissimo lavoro, IE è il browser che implementa praticamente in modo completo il CSS 2.1 e un ottimo lavoro con la versione 9 è stato fatto nell'implementazione di quelle parti del CSS 3 che nella specifica hanno raggiunto un buon livello di maturità nella definizione. Sulla parte di Standard e verifica della compatibilità, sono stati sviluppati migliaia di test ( soltanto con quesat beta ne sono stati aggiunti 569 e in totale ben 7200 solo per il CSS ) che sono stati anche sottomessi al W3C come contributo nella semplificazione della verifica dell'aderenza alle specifiche dei diversi browser, contribuendo in modo significativo a rendere più semplici la vita degli sviluppatori nel poter realmente scrivere del markup che abbia poi lo stesso comportamento sui diversi browser. Sul sito IE Testing Center potete trovare un riepilogo dei nuovi test che vengono mano a mano creati e i risultati di compatibilità per questi test dei vari Browser.

Relativamente al CSS3 le nuove feature implementate nella Beta di IE9 sono le seguenti:

· Rounded corners con la border-radius property

· CSS3 background e border features

· La opacity property

· Modelli di colore RGBA, HSL, e HSLA

· CSS3 fonts e nuovi web font formats

· CSS3 media queries

· CSS3 namespaces

· CSS3 values e units

· CSS3 selectors

· Supporto per CSS3 2D Transformation (Aggiunto con la preview 6 successiva alla beta)

IE9 come descritto sopra , implementa il CSS3 Color Module e in questo post in particolare cerco di illustrare la proprietà Opacity e alpha, attraverso la quale è possibile gestire attraverso uno style, in modo standard, sia vi JS che nella definizione di uno specifico stile per l’appunto la trasparenza di uno specifico elemento. Le versioni precedenti di IE supportavano questa feature attraverso l’utilizzo di una proprietà chiamata filter e l’utilizzo del alpha su questo canale. Importante sottolineare che quando lavora con un document mode in compatibilità con le versioni precenti e non in standard mode, applica il comportamento delle versioni precedenti di Explorer e quindi il filter, mentre quando lavora in standard mode mette a disposizione la proprietà opacity ma non la precedente proprietà filter.

Per utilizzare questa feature con uno stile, garantendo la compatibilitò con le versioni precedenti di Explorer si può utilizzare una definizione come nel seguente esempio dove viene applicata una opacity del 70%:

.opaque
{
opacity: 0.7;
filter: alpha(opacity=70);
}

E’ possibile utilizzare la proprietà anche inline:

E sfruttando anche gli eventi onmouseover e onmouseout direttamente in line:

La descrizione dell’utilizzo via JS di questa funzionalità in compatibilità con anche le versioni precedenti di IE9 mi da anche lo spunto per un buon esempio di come convenga ragionare nello sviluppo del nostro codice , rispetto alle implementazioni di specifice feature per la compatibilità versoi diversi browser o l’utilizzo di caratteristiche alternative ad una specifica funzionalità.

Nel caso di script più complessi del precedente , in molti casi come sviluppatori tendiamo a verificare quale tipo di approccio usare per una specifica azione , riconoscendo il tipo di browser per poi decide se applicare o meno una feature piuttosto che un’altra. Questo tipo di approccio per l’applicazione di una specifica feature è noto come “Browser Detection code”. Ad esempio, nel caso specifico avremo sicuramente codice in giro su Internet che decide se applicare opacity o filters andando a riconoscere il tipo di browser, qualcosa tipo: se il browser è IE applica filter , altrimenti usa Opacity.

Questo tipo di approccio è assolutamente sconsigliabile, non solo per questo caso ma per la maggioranza degli senari e delle situazioni ed è fonte di moltissimi errori e di codice che continua ad applicarsi in modalità superate o meno efficienti. Nell’esempio appena fatto, con l’uscita di IE9 che invece supporta l’opacity, nel caso in cui IE9 lavora in standard mode, il codice con la browser detection applicherebbe il filter, generando così un malfunzionamento della nostra pagina.

La modalità corretta da applicare è quasi sempre il riconoscimento dell’implementazione della feature da parte del browser e non il tipo di browser, pattern conosciuto come “Feature Detection Code” .

Per esempio in questo caso, possiamo verificare con la definizione di una variabile come la seguente se il browser supporta o meno la property opacity o in alternativa la proprietà filter:

.
var isOpacityReady =
(typeof document.createElement("div").style.opacity != 'undefined');

var isFilterReady = !useOpacity
&& (typeof document.createElement("div").style.filter != 'undefined');

Si può poi implementare una funzione setOpacity che, verifica lo stato delle variabili e applica sull’elemento specificato come parametro il livello di trasparenza richiesto. Di seguito una possibile implementazione di questa funzione :

function setOpacity(el, value) {

   if (typeof el == 'string')
      el = document.getElementById(el);

      value = Math.min(1, Math.max(value, 0));

   if (isOpacityReady)
      el.style.opacity = value;
   else if (isFilterReady)
      el.style.filter = "alpha(opacity=" + (value * 100) + ")";
}

In questo modo il codice è più robusto e non è dipendente dalle varie release dei Browser che arriveranno in futuro e continuerà a funzionare correttamente nel tempo.

· Supporto per CSS 2D Transformation (agginto a partire dalla preview 6 di IE9 successiva alla Beta)

Integrated Media Platform: Smooth Streaming Media Element for Windows Phone 7 and SMF 2.2

Giuseppe Guerrasio — Sun, 10 Oct 2010 10:17:00 GMT

In my previous post I introduced vision of integrated Media Platform coming with IIS Media Services 4.0 (IIS MS 4.0) and IIS Transform Manager (IIS TM) that could permit to have a single infrastructure, able to deliver content to PC, MAC, Windows Phone 7, Apple devices (iPhone ad iPad) , STB, conntected TV , etc.

I would evidence to you that now we have available for public download the new Smooth Streaming Client SDK 1.1 that contains the Smooth Streaming Media Element (SSME) for Windows Phone 7 (WP7). You can download the new SDK here . This is another step forward to materialize the Integrated Media Platform vision and that permit to you to leverage Smooth Streaming also on Windows Phone 7.

In this post on my blog you can find a sample for implement a WP7 app with SSME.

The new SSME for WP7 give to you possibility to reproduce Live and on demand Smooth Streaming content using Silverlight App for WP7 in same way that you can do with Silverlight for PC and MAC. This release supports also Playready DRM and in this way you could leverage a single backend for content protection too.

Use the new SSME for WP7 is very simple. In order to build apps that leveraging Smooth Streaming content on WP7, you could use Visual Studio 2010 with Windows Phone Developer Tools and after created a new Silverlight Project for WP7, you can add a Reference to SSME for WP7 dll avaliable in Smooth Streaming Client SDK 1.1 and starting to use the new Media Element in the same way that you do for Silverlight PC.

With the release of this new version of SSME, in order to simplify player creation, we have available a new release (2.2) of Silverlight Media Framework (SMF) that leverage the new SSME for WP7 and offer a complete player implementation with full source code, documentation and new samples and how to , that support WP7 too like SMF for the PC Silverlight Player.

I'm really excited about the new features that coming with IIS MS 4.0 and IIS TM and I'm working in several projects that leverage this new platform for deliver content to PC ,MAC iPhone/iPad, Windows Phone 7 and others devices and I'll write soon some posts about technical aspect of these projects were are involved this new platform.

Internet Explorer 9: Implementare i Pinned Site e la Windows 7 Experience

Giuseppe Guerrasio — Thu, 16 Sep 2010 08:49:00 GMT

E' stata da poco rilasciata la beta di Internet Explorer 9, ho pensato di scrivere una serie di post sull'integrazione con Windows 7 e sulle nuove caratteristiche di HTML5 supportate in IE9. In questo primo post comincio proprio partendo dall'integrazione con Windows 7 e le API JS disponibili. A questo link trovate la registrazione completa dell'Evento dedicato a IE9 ed in particolare trovate qui la sessione che nell'evento è stata dedicata alla funzionalità del Pinning e qui gli esempi mostrati nella sessione. Disponibile anche su MSDN una nuova documentazione per sviluppatori sul questa funzionalità.

Oltre al supporto per HTML5 con accelerazione grafica offerta da Windows, in grado di fornire al browser performance che permettono di sfruttare i nuovi standard per costruire una nuova generazione di applicazioni web, IE9 Beta ha un ampio ed interessante supporto di integrazione con Windows 7.

L'integrazione con Windows 7, mette a disposizione nuove funzionalità che consentono di integrare i siti e le applicazioni con il desktop del sitema operativo. Tra le feature più interessanti sia per gli utilizzatori che per chi sviluppa siti ed ha interesse a rimanere in contatto con i propri utenti abbiamo i Pinned Site e le JumpList .

Con i Pinned Site si possono trascinare ed agganciare direttamente alla barra delle applicazioni di Windows 7 i siti trascinando l'icona dal box dell'indirizzo direttamente sulla barra :

Per le icone c'è la possibilità da parte del sito di esporre delle FavIco a più alta risoluzione, proprio per ottimizzare l'esperienza di integrazione con questa specifica funzionalità. Per implementare le FavIcon multiresolution per IE9 potete anche usare un tool disponibile online che vi consente di creare le Icon partendo da delle immagini.

E' inoltre possibile personalizzare le Jump List dinamiche che sono associate ai siti agganciati alla barra delle applicazioni, partendo dall'inserimento di metadati nel sito, per poter esporre un vero e proprio menu applicativo dinamico del nostro sito o della nostra applicazione Web, direttamente dalla barra delle applicazioni di Windows 7 come vedete dalla immagine

Sui Pinned Site in Windows 7 è disponibile anche la Icon overlay che consente di elementi in overlay alla icona per mostrare ad esempio il numero di messaggi disponibili nella cassetta postale della nostra WebMail che abbiamo agganciato alla barra delle applicazioni:

Oltre al Pinning sulla barra si può aggiungere il sito direttamente sullo Start Menù di Windows 7 usando lo specifico comando nel menù di Internet Explorer 9:

All'interno del Test Drive Center di IE9 trovate degli esempi specifici di queste funzionalità .

Per l'implementazione dei Pinned Site, JumpList e Icon Overlay il browser mette a disposizione delle specifiche API. Per effettuare il Pinning di un sito non occorre inserire elementi specifici nella pagina o utilizzare particolari API. Il browser consente di default all'utente di agganciare il sito alla Task Bar di Windows 7 attraverso il Drag and Drop dal box degli indirizzi.

Windows genera uno shortcut file con estensione .website per sito di cui viene effettuato il pinning ed associa ad ognuno uno specifico AppID. Nel momento in cui l'utente fa ripartire il sito con il click dall'icona agganciata alla Task Bar, il sito viene lanciato in una istanza di IE9 isolata dalle altre che condivide tra i diversi Tab, l'AppId associata al sito Pinned. Il browser viene personalizzato ed i bottoni di navigazione

Per suggerire all'utente di effettuare il Pinning del sito si possono aggiungere degli elementi grafici o sfruttare le specifiche API JS previste per la funzionalità di pinning per proporre uno specifico pulsante per aggiungere direttamente allo Start Menù il sito e per verificare se il sito è già Pinned come nell'esempio di seguito.

Introdotta con la RC di IE9 anche la possibilità di applicare uno specifico stile il "pinImage" per permettere il Pinning direttamente da un elemento immagine:

Applicando lo stile indicato sopra si può effettuare il Pinning trascinando direttamente l'immagine sulla barra di windows.

In particolare attraverso window.external.msIsSiteMode() è possibile determinare se il sito è pinned o meno e ad esempio decidere di proporre il Pinning all'utente con la comparsa di un banner sotto il box dell'indirizzo. Di seguito un esempio di utilizzo di questa funzione:

function sampleSiteMode()
{
    try {
        if (window.external.msIsSiteMode()) {
            //Azione da eseguire se il sito è Pinned

alert("pinned");

        }
    }
    catch(ex) {
        alert("Site Mode is not supported.");
        return;
    }
}
window.onload = testSiteMode;

Con la funzione window.external.msAddSiteMode() è possible richiedere all'utente di aggiungere il sito allo Start Menù di Windows 7 . All'esecuzione di questa funzione, comparirà all'utente una finestra di richiesta di conferma per l'aggiunta del sito allo Start Menù all'interno di AllPrograms:

Al completamento dell'approvazione da parte dell'utente, verrà eseguito dal browser l'evento mssitemodeinstalled attraverso il quale l'applicazione Web che ha invocato la funzione window.external.msAddSiteMode() potrà essere notificata dell'approvazione all Pinning sullo Start Menù.

Di seguito un esempio di utilizzo attraverso un bottone che propone il Pinning all'utente:

Se viene usato addEventListener per agganciare l'evento, viene ricevuto l'oggetto MSSiteModeEvent che permette di ottenere un buon numero di informazioni sul sito Pinned.

E' possibile personalizzare la istanza del browser che viene eseguita al pinning del sito, inserendo degli specifici meta all'interno delle pagine . Al momento del pinning IE9 verifica la presenza di questi meta elemet e se li trovo li applica per personalizzare come richiesto l'istanza del browser. Nel caso non vengono trovati si applicano i default.

La struttura dei meta prevista da IE9 per questa funzionalità è la seguente:

<meta name="name" content="content"/>

Il seguente esempio mostra come utilizzare i meta elements per personalizzare pinned site con tooltip, start URL, colori della navigation button e caratteristiche della finestra, .

<meta name="application-name" content="Contoso.it Mode Application"/>
<meta name="msapplication-tooltip" content="Contoso.it in Site Mode"/>
<meta name="msapplication-starturl" content="http://contoso.it/start.html"/>
<meta name="msapplication-navbutton-color" content="green"/>
<meta name="msapplication-window" content="width=800;height=600"/>

Si può anche personalizzare con la sintassi già prevista la favico:

Nella documentazione di IE9 Beta trovate una descrizione dei meta element per la personalizzazione dell'istanza del browser utilizzata dai siti Pinned .

Qui trovate un esempio di pinning con bottoni di proposizione all'utente ed esempio di personalizzazione dell'istanza di IE9 Beta usata dal sito Pinned .

Per la parte riguardante la personalizzazione delle Jump List associate al sito Pinned, abbiamo la possibilità di inserire dei JumpList Task che permettono di aggiungere un vero e proprio menù, collegato direttamente all'elemento di cui si è effettuato il Pinning. Oltre ai Task si possono in modo dinamico, aggiungere, rimuovere e modificare delle Jump List Categories , all'interno delle quali è poi possibile interire degli Itme con informazioni o Link che consentono la navigazione.

Per JumpList Task è possibile aggiungere i task che si vogliono far comparire nella Jump List del sito Pinned utilizzando degli specifici meta. Si possono aggiungere fino a 5 task dove si specifica il testo e l'url su cui deve navigare o una nuova istanza del browser se non ne esistono attive per la app, o un nuovo Tab nella istanza della app già esistente . La struttura è la seguente:


<META name="msapplication-task" content="name=Task 1;action-uri=http://contoso.it/PageSample1.html;icon-uri=http://contoso.it/iconsample.ico"/>
<META name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/PageSample2.html;icon-uri=http://contoso.it/iconbase.ico"/>

I Task vengono messi in cache al momento del Pinning e mostrati all'utente anche se la app non è attiva.

Su questa funzionalità trovate nella demo citato anche prima una implementazione dei Jump List Task .

Oltre ai task descritti sopra si possono aggiungere dinamicamente delle Jump List Categories sfruttando delle specifiche API JS disponibili in IE9 Beta. Qualunque pagina all'interno di un dominio Pinned può utilizzare queste API per aggiungera, modificare o rimuovere categorie e elementi nelle categoria dalle Jump List. Gli elementi aggiunti vengono persistiti nel menù e rimangono disponibili fino alla rimozione da parte dell'utente o tramite le API da parte del sito. Le Jump List Categories possono contenere degli item che , come nel caso dei task, permettono al click dell'utente di navigare ad uno specifico url indicato nella configurazione dell'item stesso. In ogni category è possibile inserire fino a 20 item, nel caso di aggiunta di item superiori a 20 vengono automaticamente rimossi i precedenti.

Per creare delle Categories e inserirci all'interno degli Item sono disponibili in IE9 Beta delle specifiche API JS:

Attraverso il metodo msSiteModeCreateJumplist si può create una Category:

window.external.msSiteModeCreateJumplist('SampleList1');

Creata la Category la si può popolare con il metodo msSiteModeAddJumpListItem indicando label , url dell'item e icona da aggiungere :

window.external.msSiteModeAddJumpListItem('SampleItem 1', 'http://contoso.it/SampleItem1.html', 'http://contoso.it/images/item1.ico');
window.external.msSiteModeAddJumpListItem('Sample Item 2', 'http://contoso.it/SampleItem2.html', 'http://contoso.it/images/item2.ico');

Si può poi mostrare le Categories chiamando il metodo msSiteModeShowJumplist method, Windows immediately updates the in-memory list in the Jump List.

window.external.msSiteModeShowJumplist();

e cancellarle completamente con msSiteModeClearJumplist

window.external.msSiteModeClearJumplist();

Attraverso, l'evento seguente si può essere notificati della rimozione da parte dell'utente di un elemento dalle Jump List:

document.addEventListener('mssitemodejumplistitemremoved', removed, false);
document.attachEvent('onmssitemodejumplistitemremoved', removed);

la funzione di callback dell'evento riceve un url come parametro.

Altra funzionalità disponibile con le API di integrazione con Windows 7 di IE9 Beta è la funzionalità di Icon Overlay . Attraverso il metodo window.external.msSiteModeSetIconOverlay una Web App può richiedere a Windows di mostrare una icona in overlay all'icona sulla Task Bar per comunicare uno specifico stato all'utente. La funzionalità puà essere ad esempio utilizzata per l'arrivo di una mail in una applicazione di web mail o per richiamare in generale l'attenzione dell'utente sulla necessità di effettuare una azione rispetto alla applicazione agganciata alla Task Bar. Ecco di seguito un esempio di utilizzo del metodo:

window.external.msSiteModeSetIconOverlay('http://contoso.it/images/overlay.ico', 'Overlay');

l'icona si può rimuovere con:

window.external.msSiteModeClearIconOverlay();

Oltre a mostrare l'icona in overlay a quella presente sulla Task Bar , si può ulteriormente richiamare l'attenzione dell'utente relativamente alla necessità di effettuare un azione su una delle applicazioni sulla Task Bar, facendo lampeggiare l'icona agganciata sulla Task Bar. Per fare questo si può utilizzare il metodo windows.external.msiteModeActivate come di seguito:

window.external.msSiteModeActivate();

Su Jump List Categories e Icon Overlay trovate un esempio tra le demo nel Test Drive di Internet Explorer 9 Beta.

Ulteriore integrazione utile con Windows 7 è fornita dei bottoni personalizzabili nella Thumbnail toolbar buttons . Attraverso questa funzionalità è possibile personalizzare i bottoni che si possono far comparire nella Thumbnail preview della pagina che viene gestita da Windows 7 quando un utente si posiziona con il mouse su un icona della taskbar. E possibile personalizzare i bottoni ed utilizzarli per gestire delle azioni sul sito ,m direttamente dalla Thumbnali preview, senza che l'utente debba riattivare a schemo intero l'applicazione. Ad esempio nel caso di una pagina in cui è un streaming una playlist,una Web Radio o una Web Tv si può dare la possibilità all'utente di pilotare i controlli del player direttamente dalla preview.

Di seguito l'immagine di un esempio di applicazione questa funzionalità che trovate implementata nell'esempio demo all'interno dell'area Test Drive di IE9 Beta:

Si possono aggiungere e controllare con specifiche API JS previste in IE9 Beta fino a 7 bottoni all'interno della preview . Quando un utente effettua il click su uno dei bottoni un evento, con uno specifico ID che è assoiciato al bottone, viene generato e inviato al browser e la pagina può ricevere l'informazione agganciano una specifica callback con le API JS.

Il bottoni della Thumbnail toolbar , vengono creati in menoria e poi mostrati all'esecuzione di uno specifico metodo del browser IE9 Beta. Per aggiungere i bottoni e personalizzarli si utilizza il metodo msSiteModeAddThumbBarButton come da esempio seguente:

btn1 = window.external.msSiteModeAddThumbBarButton( 'http://host/contoso.it/button1.ico', 'bottone 1');
btn2 = window.external.msSiteModeAddThumbBarButton( 'http://contoso.it/images/button2.ico', 'bottone 2');

Il metodo restituisce un ID che è quello citato sopra che può essere usato per ricevere l'evento di click da parte dell'utente utilizzando il metodo msthumbnailclick come da esempio di seguito:

document.addEventListener('msthumbnailclick', myHandler, false);
…
function myHandler (btn) {
alert ("addeventlist:thumbnail btn id" + btn.buttonID);
}

definiti i bottoni li si può rendere visibili con msSiteModeShowThumbBar :

window.external.msSiteModeShowThumbBar();

I bottoni restano visibili per tutta la durata dell'istanza e rilanciare il metodo può generare delle eccezioni, per tanto è opportuno utilizzare il metodo all'inteno di un blocco try/catch per evitare che rinavigando successivamente nella pagina la funzione che genera i bottoni nel vostro codice produca una eccezione.

Utilizzando il metodo msSiteModeUpdateThumbBarButton è possibile modificare lo stato dei bottoni, ad esempio di seguito disabilitiamo il btn1 lasciandolo visibile e rendiamo invisibile e disabilitato il btn2:

window.external.msSiteModeUpdateThumbBarButton(btn1, false, true);
window.external.msSiteModeUpdateThumbBarButton(btn2, false, false);

Va prestata attenzione al fatto che lo stato cambia immediatamentente mentre la proprietà , visibile o invisibile solo al refresh della thumbnali ovverro, quando l'utente la disattiva e poi la riattiva. E' possibile anche cambiare lo stile dei bottoni già creati, attraverso l'utilizzo del metodo msSiteModeAddButtonStyle come da esempio seguente dove modifichiamo immagine e tooltip associata al btn1 creato precedentemente:

newStyle1 = window.external.msSiteModeAddButtonStyle(btn1, 'http://contoso.it/images/newStyle1.ico', 'nuovo stile bottone 1');

e poi applicarlo mostrandolo a schermo:

window.external.msSiteModeShowButtonStyle(btn1, style1);

Come abbiamo visto Pinned sites usano delle icone in molte funzionalità dalle : Jump List, alla bottone aggiunto alla taskbar, le overlay icons, e i bottoni delle thumbnail preview. i file delle icone devono avere le seguenti dimensioni: per la taskbar le icone devono essere minimo 32x32, nella Jump List 16x16, per i bottoni delle thumbnail preview 16x16, e per le overlay icon 16x16. Per la favicon il suggerimento è quello di realizzare una .ico con le seguenti risoluzioni:

Raccomandate: 16x16, 32x32, 48x48
Ottimali: 16x16, 24x24, 32x32, 64x64

Come detto anche sopra per implementare le Icon multiresolution per IE9 potete anche usare un tool disponibile online che vi consente di creare le Icon partendo da delle immagini.

Come abbiamo visto in questo post , Internet Explorer 9 Beta offre delle nuove ed interessanti funzionalità di Integrazione con Windows 7 che consentono di avvicinare l'integrazione delle Wb App con le applicazioni native di Windows. Nei prossimi post andremo ad analizzare alcune delle caratteristiche di HTML5 introdotte in IE9 come il Tag Video, Audio è il Canvas e vedremo come utilizzarle al meglio per sviluppare pagine web ottimizzate per IE9 con l'utilizzo di questi nuovi tag.

Buona Navigazione con IE9 Beta !!!!