风云的银光志Silverlight4.0教程之与摄像头与迈克风设备交互（转）

当用户安装好Silverlight 4.0运行时后，打开浏览器在任何一个Silverlight应用程序点击鼠标右键可以看到Silverlight4插件的属性，其中加入了WebCam和MIC支持的TAB项，如图所示。

 

Silverlight 4.0的CaptureDeviceConfiguration.GetAvailableVideoCaptureDevices可以得到用户本机所有可用的摄像头设备列表，下面我们实现在Silverlight中启用用户本机的摄像头，首先在界面中添加一个用来显示视频的“容器”Grid，然后添加一个按钮用来启用CAM设备，如图所示。

 

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          }
6 
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会提示用户是否允许应用程序访问你的本机视频设备。

用户选择是后，用户的视频内容就会立刻显示在Border的VideoBrush区域内，是不是很容易呢。

  

              

                                   启用前                                                                          启用后

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         }

运行结果：

 

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