Tutorial: Meine kleine Daumennagel-Fabrik

Heute habe ich von meinem Kollegen Michael etwas über die Existenz des Expression Media Encoder SDKs erfahren. Es bietet eine sehr umfangreiche API u.a. für das Transcoding, Live Steaming und Unterstützung diverser Screen Capture Funktionen. Eine Aufgabenstellung, wie zum Beispiel das Erstellen von Thumbnails aus einem laufenden Video heraus, das kann man bereits mit den Bordmitteln von Silverlight mit ein paar Zeilen Code realisieren.

Dazu bedient man sich der in Silverlight 3 neu eingeführten WriteableBitmap Klasse. Diese Klasse ermöglicht uns das Rendern eines UIELements. Der Trick ist nun, daß man einfach das MediaElement Control als UIElement übergibt. Als Ergebnis erhalten wir das aktuelle Videobild als Bitmap in der gewünschten Größe. Hier ist meine kleine ThumbnailFactory Lösung:

 <UserControl x:Class=“ThumbnailFactory.MainPage“
xmlns=“http://schemas.microsoft.com/winfx/2006/xaml/presentation“
xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml“
xmlns:d=“http://schemas.microsoft.com/expression/blend/2008“
xmlns:mc=“http://schemas.openxmlformats.org/markup-compatibility/2006“
mc:Ignorable=“d“>
<Grid Background=“DarkGray“ Height=“480″ Width=“680″>
<StackPanel Orientation=“Vertical“  HorizontalAlignment=“Stretch“ Margin=“20″>
<MediaElement x:Name=“myPlayer“ AutoPlay=“True“ Height=“300″ Width=“480″
Source=“http://ecn.channel9.msdn.com/o9/te/NorthAmerica/2010/wmv/Key01_300k.wmv
Stretch=“None“ MouseLeftButtonDown=“myPlayer_MouseLeftButtonDown“/>
<StackPanel x:Name=“thumbs“ Orientation=“Horizontal“ Margin=“5″/>
</StackPanel>
</Grid>
</UserControl>

und der dazugehörige Event-Handler im Code-Behind:

private void myPlayer_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
System.Windows.Media.Imaging.WriteableBitmap wb =
new System.Windows.Media.Imaging.WriteableBitmap(myPlayer, null);
Image image = new Image();
image.Height = 48;
image.Margin = new Thickness(3);
image.Source = wb;
thumbs.Children.Add(image);
}