天天看點

SilverLight與攝像頭與邁克風裝置互動

SilverLight與攝像頭與邁克風裝置互動

微軟于PDC2009上釋出Silverlight 4 Beta版,微軟在Silverlight 4版本中處理了約8000個的Silverlight終端使用者的請求,加入了一系列另開發人員興奮的新特性,最突出的主要展現在幾個方面:

開發工具增強:Visual Studio 2010具有可視化的設計工具,建立項目時可以選擇運作時版本是3.0還是4.0,BLEND4加入XAML和C#代碼全方位智能感覺功能、XAML的樣 式應用更為易用等。

攝像頭與MIC硬體支援:可以用極少量的代碼實作啟用使用者本機的 WebCam和Mic,并可進行本地錄制。

報表列印支援:報表列印問題在Silverlight4中得到的較好的解 決。

更強大的基礎類控件(RichTextBox、DataGrid增強版): 富文本控件RichTextBox和具有可粘貼、排序功能的DataGrid被加入。

WCF增強:終于支援TCP通訊,比較HTTP提升3-5倍,限于 4502-4534端口。

相容性增強:對Google的Chrome浏覽器的支援。

MEF支援:MEF全稱為Managed Extensibility Framework,譯為“托管擴充架構”,支援建立大型複雜的應用程式。

運作速度提升:啟動速度和渲染速度較前個版本提升約2倍左右。

DRM增強:支援PlayReady,可以對視訊和音頻的播放進行的保護, 補充了對H.264的DRM保護。

其它增強:本地檔案讀寫、滑鼠右鍵事件支援、剪粘闆支援。

當使用者安裝好Silverlight 4.0運作時後,打開浏覽器在任何一個Silverlight應用程式點選滑鼠右鍵可以看到Silverlight4插件的屬性,其中加入了WebCam 和MIC支援的TAB項,如圖所示。

SilverLight與攝像頭與邁克風裝置互動

Silverlight 4.0的CaptureDeviceConfiguration.GetAvailableVideoCaptureDevices可以得到使用者本機所有 可用的攝像頭裝置清單,下面我們實作在Silverlight中啟用使用者本機的攝像頭,首先在界面中添加一個用來顯示視訊的“容器”Grid,然後添加一 個按鈕用來啟用CAM裝置,如圖所示。

SilverLight與攝像頭與邁克風裝置互動

XAML:

1          < Border x:Name = " LayoutRoot " CornerRadius = " 5 "  

2                BorderBrush = " Gray " BorderThickness = " 3 " >

3                  < Border.Background >

4                          < VideoBrush x:Name = " myVideoBrush " / >

5                  < /Border.Background >

6                  < Button x:Name = " btnCam " HorizontalAlignment = " Right "

7                        VerticalAlignment = " Bottom "

8                        Width = " 120 " Height = " 30 "  

9                        Content = " 啟動攝像頭 " / >

10         < /Border >

C#:

1                  public   VideoAndAudio ( )

2                  {

3                          InitializeComponent ( ) ;

4                          this . btnCam . Click   + =   new   RoutedEventHandler ( btnCam_Click ) ;

5                  }

7                  void   btnCam_Click ( object   sender,   RoutedEventArgs   e )

8                  {

9                          // 取得預設視訊裝置對象

10                         VideoCaptureDevice   cam   =   CaptureDeviceConfiguration . GetDefaultVideoCaptureDevice ( ) ;

11                         // 建立視訊捕獲源對象

12                         CaptureSource   videoSource   =   new   CaptureSource ( ) ;

13                         // 擷取使用者啟用本機攝像頭的許可

14                         if   ( CaptureDeviceConfiguration . RequestDeviceAccess ( ) )

15                         {

16                                 // 設定視訊裝置

17                                 videoSource . VideoCaptureDevice   =   cam;

18                                 // 設定視訊來源

19                                 myVideoBrush . SetSource ( videoSource ) ;

20                                 myVideoBrush . Stretch   =   Stretch . Fill;

21                                 // 啟動攝像頭

22                                 videoSource . Start ( ) ;

23                         }

24                 }

點選啟用攝像頭按鈕後,Silverlight會提示使用者是否允許應用程式通路你的本機視訊裝置。

SilverLight與攝像頭與邁克風裝置互動

使用者選擇是後,使用者的視訊内容就會立刻顯示在Border的VideoBrush區域内,是不是很容易呢。

SilverLight與攝像頭與邁克風裝置互動
SilverLight與攝像頭與邁克風裝置互動

                                啟用前                                                                     啟用後

Silverlight 4.0不但支援視訊裝置的顯示,同時結合控件的截圖功能,可以很友善的得到使用者的照片,接下來加入截圖代碼。

XAML:

1          < StackPanel x:Name = " LayoutRoot " >

2                  < Border Height = " 350 " x:Name = " myBorder " CornerRadius = " 5 "  

3                BorderBrush = " Gray " BorderThickness = " 3 " >

4                          < Border.Background >

5                                  < VideoBrush x:Name = " myVideoBrush " / >

6                          < /Border.Background >

7                  < /Border >

8                  < StackPanel x:Name = " tsp " Orientation = " Horizontal "  

9                          Height = " 100 " > < /StackPanel >

10                 < StackPanel Orientation = " Horizontal " Height = " 30 "  

11                               HorizontalAlignment = " Center " >

12                         < Button x:Name = " btnCam " HorizontalAlignment = " Right "

13                       VerticalAlignment = " Bottom "

14                       Width = " 120 " Height = " 30 "  

15                       Content = " 啟動攝像頭 " / >

16                         < Button x:Name = " btnCrop " HorizontalAlignment = " Right "

17                       VerticalAlignment = " Bottom "

18                       Width = " 120 " Height = " 30 "  

19                       Content = " 視訊截圖 " / >

20                 < /StackPanel >

21         < /StackPanel >

C#:

1                  void   CropVideo ( )

2                  {

3                          // 建立可寫入位圖對象

4                          WriteableBitmap   wBitmap   =   new   WriteableBitmap ( myBorder,   new   MatrixTransform ( ) ) ;

5                          // 建立一個圖像

6                          Image   img   =   new   Image ( ) ;

7                          img . Width   =   100 ;

8                          img . Margin   =   new   Thickness ( 2 ) ;

9                          // 将wBitmap做為圖像源

10                         img . Source   =   wBitmap;

11                         // 将圖像添加到WrapPanel控件

12                         tsp . Children . Add ( img ) ;

13                 }

運作結果:

SilverLight與攝像頭與邁克風裝置互動

通過這種方式可以很友善的實作使用者頭像的上傳,是不是很友善呢。

繼續閱讀