天天看点

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与摄像头与迈克风设备交互

通过这种方式可以很方便的实现用户头像的上传,是不是很方便呢。

继续阅读