Reyza

tenang, senang, sederhana
See also: Other Geeks@INDC

Public

June 2010 - Posts

Smooth is Fast, Fast is Lethal

Bila kebetulan anda mengunduh Expression Studio 4, maka (sekali lagi) anda dapat bertemu dengan Expression Encoder 4 Pro, dan jendela berikut ini akan dapat dilihat setiap aplikasi ini dijalankan.

{Expression Encoder 4 Pro}

01

Ada 3 tipe project yang dapat dipilih, yaitu :

  1. Transcoding Project yang dapat digunakan untuk melakukan encode (saja) sesuai format dan kompresi yang diinginkan.
  2. Silverlight Project yang dapat digunakan tidak hanya melakukan encode tetapi juga akan mem-publish hasil encode agar dapat dilihat dengan menggunakan silverlight media player (yang artinya harus dibuka saat  pada web browser).
  3. Live Broadcasting Project yang dapat digunakan untuk melakukan encode dan langsung mem-broadcast hasil encode via ‘Real Time Streaming Protocol’. Sumber yang dapat di-encode dapat berupa file atau dari live source seperti web cam atau tv tunner.

{Broadcast}

Setelah memilih Live Broadcasting Project, maka ada tiga hal penting yaitu :

Source

02

Pilih Add a Live Source maka area Live Sources akan terisi, dan dengan memilih Add a file Source maka area File Sources akan terisi. Sebagai contoh akan dipilih Add a Live Source. Kemudian tinggal pilih device yang akan mengeluarkan video pada Video Device, dan device yang akan mengeluarkan audio pada Audio Device.

03

Setelah itu klik tombol Cue.

Encode

Bagian Encode adalah pilihan format dan kompresi yang diinginkan.

04

Output

Disini dipilih cara mengeluarkan hasil encode, sesuai dengan sub judul makan akan dipilih Broadcast.

05

Setelah ketiga hal tersebut dilakukan maka proses encode dapat dimulai.

06

Cara melihat broadcast ini dapat dilakukan dengan cara menggunakan media player seperti Windows Media Player dengan memasukkan url mms://127.0.0.1:8080 seperti gambar berikut.

07

Dan berikut hasilnya.

08

Bagi yang tidak ingin menggunakan Windows Media Player maka ada alternatif akses via web dengan menggunakan Silverlight Media Player.

09

Tentu ada keterlambatan video yang akan kita lihat, karena ada proses pengambilan gambar dan encode kemudian baru di-broadcast.

10

Dari gambar di atas, paket yang dikirimkan via RTSP hanya satu ukuran yang akan berlaku sama untuk semua client yang terkoneksi. Format dan kompresi yang dipilih oleh user akan berpengaruh terhadap ukuran file video yang dikirim, makin bagus kualitas video maka ukuran file akan relatif besar. Bila ukuran paket yang dikirimkan melalui RTSP hanya 1452byte otomatis informasi yang disampaikan akan sedikit. Kecuali anda adalah juragan bandwidth yang mempunyai kecepatan download yang mumpuni. Sayangnya tidak semua user yang terkoneksi adalah juragan bandwith, tetapi ada kemungkinan terselip para pakir bandiwth.

{IIS Smooth Streaming}

Untuk kasus tersebut di atas maka dapat digunakan solusi seperti berikut ini.

11

Solusi ini hanya menggunakan protokol HTTP. Dengan solusi ini maka ukuran paket yang dikirim akan berbeda-beda, dengan isi informasi yang sama tetapi kualitas video yang berbeda. Bagi para juragan bandwith akan diberikan kualitas yang mempunyai kemampuan download yg cepat, sedangkan bagi pakir bandwith akan dikirimkan paket dengan kualitas yang sesuai. Kemampuan download client akan selalu ‘dipantau’ sehingga bila suatu saat client tiba-tiba mempunyai kemampuan download yg ok, maka secara otomatis file yang akan didownload akan meningkat pula kualitasnya, begitu pula sebaliknya.

Sebagai contoh, para pakir bandwith akan menerima kualitas video seperti berikut ini, ukuran paket hanya 300Kb.

12

Sedangkan bagi yang mempunyai koneksi cepat dapat menerima kualitas video seperti ini.

13 

Dapat dilihat pada gambar, kualitas lebih jernih. Karena paket yang diterima berukuran 2,436MB. Pada gambar di atas dapat dilihat peningkatan ukuran paket yang didownload, sesuai dengan kecepatan yang dimiliki oleh client.

Source

IIS Smooth Streaming ‘mengharuskan’ source video lebih dari satu dengan kualitas yang berbeda, dari kualitas untuk downrate 300kb sampai 2,436Mb. Untuk membuat source video ini maka dapat digunakan Expression Encoder dengan memilih Transcoding Project. Dan memilih IIS Smooth Streaming sebagai Output Format.

14

Jika file video dengan nama file ProjectNatal.wmv di-encode dengan format IIS Smooth Streaming maka berikut ini adalah hasilnya.

15

Dari gambar di atas dapat dilihat file ProjectNatal.wmv akan diubah menjadi beberapa file ProjectNatal_{ukuran paket}.ismv, dari ukuran paket per 230Kb sampai 1,664Mb. Selain itu juga terdapat dua file tambahan, yaitu :

  • ProjectNatal.ism adalah file Server manifest yang berisi informasi hubungan antara media track, bitrate dan file yang ada. File ini diperlukan oleh IIS Smooth Streaming server.
  • ProjectNatal.ismc, adalah file Client manifes yang berisi informasi yang diterima oleh client berupa available stream, codec yang digunakan, bitrates encoded, resolusi video, marker, caption dan lain-lain.

Server

Saatnya ‘Source’ di atas ‘di-deploy’ pada IIS sebagai web server. Namun sebelumnya IIS harus ‘di-tambahkan’ kemampuan Smooth Streaming dengan mendownload kemampuan tersebut di http://www.iis.net/download/LiveSmoothStreaming. Setelah diinstall maka kemampuan tersebut dapat dilihat via Internet Information Server (IIS) Manager.

16

Deployment

Selanjutnya adalah menambahkan Application pada Default Web Site dengan nama smooth yang berisi file ismv, ism dan ismc.

17

Selanjutnya mendaftarkan file Server manifest dengan cara memilih seperti pada gambar berikut ini.

18

Kemudian pilih Add dan daftarkan file Server manifest.

19

Q : Apakah harus mendaftarkan file Server manifest ?

A : Tentu, tidak…walau tidak didaftarkan juga masih akan Smoooooth :P

Player

Selanjutnya adalah membuat Video Player dengan memanfaatkan Silverlight dan tentu saja harus support Smooth Streaming. Untuk itu perlu di-download terlebih dahulu library yang akan mempermudah pembuatannya, library tersebut dapat ditemui di http://www.iis.net/download/SmoothClient. Setelah file didapat dan di-install maka Microsoft.Web.Media.SmoothStreaming.dll dapat ditemui pada folder C:\Program Files\Microsoft SDKs\IIS Smooth Streaming Client\v1.0 atau C:\Program Files (x86)\Microsoft SDKs\IIS Smooth Streaming Client\v1.0 bagi pemakai OS x64.

Untuk membuat video player ini dapat menggunakan Expression Blend atau Visual Studio, berikut adalah langkah yang dapat diikuti untuk membuat video player dengan Expression Blend 4.

Setelah project Silverlight dibuat, maka tambahkan Microsoft.Web.Media.SmoothStreaming.dll sebagai reference.

20

Setelah langkah di atas dilakukan maka namespace Microsoft.Web.Media.SmoothStreaming dapat didaftarkan pada file MainPage.xaml seperti yang dilihat pada baris ke-5. Kemudian tinggal ditambahkan element untuk menampilkan video yang dapat dilihat pada baris ke-9.  Pada element SmoothStreamingMediaElement ini terdapat atribut SmoothStreamingSource yang berisi file Server manifest.

   1: <UserControl
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:     x:Class="SilverlightApplication1.MainPage"
   5:     xmlns:SSME="clr-namespace:Microsoft.Web.Media.SmoothStreaming;assembly=Microsoft.Web.Media.SmoothStreaming"
   6:     Width="640" Height="480">
   7:  
   8:     <Grid x:Name="LayoutRoot" Background="White">
   9:         <SSME:SmoothStreamingMediaElement AutoPlay="True" x:Name="SmoothPlayer" SmoothStreamingSource="http://localhost/smooth/ProjectNatal.ism/Manifest" Grid.Row="0" />
  10:         <StackPanel Orientation="Horizontal" Grid.Row="1">
  11:             <Slider x:Name="VolumeBar" Width="459" Value="{Binding Volume, ElementName=SmoothPlayer, Mode=TwoWay}" Height="31" VerticalAlignment="Bottom" />
  12:             <Button x:Name="PlayButton" Content="Play" Width="50" Click="PlayButton_Click" Loaded="PlayButton_Loaded" Height="31" VerticalAlignment="Bottom"/>
  13:             <Button x:Name="StopButton" Content="Stop" Width="50" Click="StopButton_Click" Height="31" VerticalAlignment="Bottom" /> 
  14:         </StackPanel>
  15:     </Grid>
  16: </UserControl>

Untuk event-handler element slider dan button dapat dilihat pada kode di bawah ini. Pada baris ke-11 dapat dilihat pendaftaran namespace Microsoft.Web.Media.SmoothStreaming.

   1: using System;
   2: using System.Windows;
   3: using System.Windows.Controls;
   4: using System.Windows.Documents;
   5: using System.Windows.Ink;
   6: using System.Windows.Input;
   7: using System.Windows.Media;
   8: using System.Windows.Media.Animation;
   9: using System.Windows.Shapes;
  10:  
  11: using Microsoft.Web.Media.SmoothStreaming;
  12:  
  13: namespace SilverlightApplication1
  14: {
  15:     public partial class MainPage : UserControl
  16:     {
  17:         public MainPage()
  18:         {
  19:             // Required to initialize variables
  20:             InitializeComponent();
  21:         }
  22:         
  23:         private void PlayButton_Loaded(object sender, RoutedEventArgs e)
  24:         {
  25:             switch (SmoothPlayer.AutoPlay)
  26:             {
  27:                 case false:
  28:                     PlayButton.Content = "Play";
  29:                     break;
  30:                 case true:
  31:                     PlayButton.Content = "Pause";
  32:                     break;
  33:             }
  34:         }
  35:  
  36:         private void PlayButton_Click(object sender, RoutedEventArgs e)
  37:         {
  38:             switch (SmoothPlayer.CurrentState)
  39:             {
  40:                 case SmoothStreamingMediaElementState.Playing:
  41:                     SmoothPlayer.Pause();
  42:                     PlayButton.Content = "Play";
  43:                     break;
  44:     
  45:                 case SmoothStreamingMediaElementState.Paused:
  46:                     SmoothPlayer.Play();
  47:                     PlayButton.Content = "Pause";
  48:                     break;
  49:     
  50:                 case SmoothStreamingMediaElementState.Stopped:
  51:                     SmoothPlayer.Play();
  52:                     PlayButton.Content = "Pause";
  53:                     break;
  54:             }
  55:         }
  56:     
  57:         private void StopButton_Click(object sender, RoutedEventArgs e)
  58:         {
  59:             SmoothPlayer.Stop();
  60:             PlayButton.Content = "Play";
  61:         }
  62:  
  63:     }
  64: }

Setelah project di-build, maka folder ClientBin, file Default.html dan Silverlight.js dapat di-copy ke folder “smooth” tempat video & file manifest disimpan. Maka video siap dinikmati dengan smooth sesuai dengan bandwidth yang dimiliki oleh user.

{Event}

Tulisan di atas adalah materi sederhana yang dibawakan saat saya kebetulan sebagai tamu pada acara yang bertempat pada Aula BAPPEDA Provinsi Kalimantan Selatan.DSC_1841-resize

Pada acara ini, kebetulan pesertanya yang datang sekitar 250 orang ini saya bercerita tentang Expresion Encoder untuk transcoding video, publish dan broadcasting. Selain itu juga mestinya menceritakan teknologi IIS Smooth Streaming, tetapi karena waktu yang diberikan terlalu sedikit (30 menit untuk 3 pembicara dari MUGI) maka IIS Smooth Streaming terpaksa harus di-cut.

poliban

DSC_1846-resize

Alhamdulillah tidak ada masalah dengan projector :)

 

This is it…..akhir kata selamat menikmati akhir pekan.

Share this post: | | | |
Posted: Jun 27 2010, 12:34 PM by reyza | with 3 comment(s) |
Filed under: , ,