[Silverlight] 如何開啟視訊後擷取影像

2010/11/18

延續  [Silverlight] 如何開啟視訊

之後我如何擷取影像呢?!

介紹一下版面..

sshot-158

btnEnableWebCam 會啟動視訊 並且顯示在 cvsMain 這 Canvas 裡面
btnTakePic 點擊時會將影像傳至 imgShot 這Image 物件顯示


XAML Code :

<UserControl x:Class="WebCamCapture.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"
d:DesignHeight="500" d:DesignWidth="600">
 
<Grid x:Name="LayoutRoot" Background="White">
<Button Content="啟動WebCam" Height="23" HorizontalAlignment="Left" Margin="10,225,0,0" Name="btnEnableWebCam" VerticalAlignment="Top" Width="95" Click="btnEnableWebCam_Click" />
<Canvas Height="80" HorizontalAlignment="Left" Margin="20,23,0,0" Name="cvsMain" VerticalAlignment="Top" Width="100"></Canvas>
<Button Content="拍照" Height="23" HorizontalAlignment="Left" Margin="10,254,0,0" Name="btnTakePic" VerticalAlignment="Top" Width="95" Click="btnTakePic_Click" />
<Image Name="imgShot" Stretch="Fill" Margin="133,118,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="400" Height="320" />
</Grid>
</UserControl>

因為之前 [Silverlight] 如何開啟視訊
這邊文章已經說過如何啟動視訊..

這篇文章就不贅述…

唯一特別的是 我把  captureSource 辦到 method 外面..
讓其他 method 可以讀到 captureSource

C# Code :

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;
 
namespace WebCamCapture
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
CaptureSource captureSource = new CaptureSource();
 
private void btnEnableWebCam_Click(object sender, RoutedEventArgs e)
{
 
//RequestDeviceAccess()
//要求存取用戶端系統上所有可用的擷取裝置 (音訊或視訊)。
//如果使用者依據對存取要求對話方塊提示的回應授與裝置存取,或要求在某些情況下自動授與,則為 true。如果使用者未授與存取或存取遭其他因數拒絕,則為 false
 
//AllowedDeviceAccess
//取得值,這個值會報告使用者先前是否曾依據對裝置存取 UI 提示的儲存回應授與裝置存取。
//如果使用者曾依據對存取要求對話方塊提示的回應授與裝置存取,或要求在某些情況下自動授與,則為 true。如果使用者未授與存取或存取遭其他因數拒絕,則為 false。
if (CaptureDeviceConfiguration.RequestDeviceAccess() || CaptureDeviceConfiguration.AllowedDeviceAccess)
{
VideoBrush videoBrush = new VideoBrush();
 
this.cvsMain.Background = videoBrush;
 
videoBrush.SetSource(captureSource);
 
//加入擷取圖片完成事件
captureSource.CaptureImageCompleted += captureSource_CaptureImageCompleted;
 
captureSource.Start();
 
}
else
{
MessageBox.Show("讀取視訊發生問題");
}
}
 
void captureSource_CaptureImageCompleted(object sender, CaptureImageCompletedEventArgs e)
{
//使用 WriteableBitmap 去承接截完圖後的結果
WriteableBitmap capBitmap = e.Result;
 
this.imgShot.Source = capBitmap;
}
 
private void btnTakePic_Click(object sender, RoutedEventArgs e)
{
//啟動擷取圖片
captureSource.CaptureImageAsync();
}
}
}

如果你沒有視訊 大概結果會是這樣..

sshot-159

範例預覽:



讚一下:


檔案下載:


備註:有人問說為何不用 [Silverlight] 用WriteableBitmap對物件做Snapshot(快照) 這方法..
如果透過這方法等於是翻拍Canvas  這樣的話擷取出來的畫面可能會失真..


0 意見:

程式 . 生活 . D小調.@2010 | Binary Design: One Winged Angel.