はじめに
多くのSilverlight開発者が長い間待っていたという事実が発生しました。 4番目のSilverlightでは、Webカメラとマイクにアクセスできます。 他の多くの新機能とは異なり、これは革命ではありませんが（競合技術は長い間カメラとマイクをサポートしていました）、新しいAPIのパワー、シンプルさ、利便性は、第4のSilverlightの機能のこの部分に細心の注意を払うに値します。
Webカメラとマイクを使用する
そのため、ユーザーのコンピューターのWebカメラとマイクは使用できる場合と使用できない場合があります。 また、ビデオと音声のソースが複数ある状況もあります。 使用するデバイスを決定し、必要に応じてこれらのデバイスへのアクセスをユーザーに要求するために（Silverlightは、ユーザーからの明示的な許可がない限り、Webカメラまたはマイクへのアクセスを許可しません）、静的クラスCaptureDeviceConfigurationが存在します。 このクラスの使用方法を見てみましょう。 ただし、最初にVisual Studio 2010で新しいSilverlightアプリケーションプロジェクトを作成し、MainPage.xamlページにXAMLマークアップを追加します。
< StackPanel Orientation ="Vertical" VerticalAlignment ="Center"
HorizontalAlignment ="Center" >
< Rectangle Width ="320" Height ="240" x:Name ="videoRect" />
< StackPanel Orientation ="Horizontal" HorizontalAlignment ="Center" >
< ListBox x:Name ="VideoSources" >
< ListBox.ItemTemplate >
< DataTemplate >
< TextBlock Text ="{Binding FriendlyName}" />
</ DataTemplate >
</ ListBox.ItemTemplate >
</ ListBox >
< ListBox x:Name ="AudioSources" >
< ListBox.ItemTemplate >
< DataTemplate >
< TextBlock Text ="{Binding FriendlyName}" />
</ DataTemplate >
</ ListBox.ItemTemplate >
</ ListBox >
</ StackPanel >
< StackPanel Orientation ="Horizontal" HorizontalAlignment ="Center" >
< Button Margin ="5" Content =" " x:Name ="startCapture" />
< Button Margin ="5" Content =" " x:Name ="endCapture" />
</ StackPanel >
</ StackPanel >
* This source code was highlighted with Source Code Highlighter .
このマークアップでは、長方形（Rectangle） "videoRect"に注意する必要があります。Webカメラからのビデオが表示されるのはその中にあります。
以下は2つのリスト（ListBox）の「VideoSources」と「AudioSources」で、ビデオおよびサウンドソースのデバイス名が表示されます。 ユーザーは、自分の名前をクリックして、目的のデバイスを選択できます。 さらに、両方のデバイスからキャプチャを開始および停止するために使用する2つのボタンがページにあります。
動作中のアプリケーションは次のようになります（スクリーンショットでは、Webカメラで「Silverlightについて質問する」アイコンを表示しています）。
しかし、C＃のMainPage.xamlページのソースコードに移りましょう。 そして、コンストラクターで、このページのloadingイベントにサブスクライブします。
this .Loaded += new RoutedEventHandler(MainPage_Loaded);
* This source code was highlighted with Source Code Highlighter .
イベントハンドラーで、利用可能なデバイスを取得し、リストVideoSourcesおよびAudioSourcesにそれぞれ表示します。
void MainPage_Loaded( object sender, RoutedEventArgs e)
{
VideoSources.ItemsSource = CaptureDeviceConfiguration.GetAvailableVideoCaptureDevices();
AudioSources.ItemsSource = CaptureDeviceConfiguration.GetAvailableAudioCaptureDevices();
}
* This source code was highlighted with Source Code Highlighter .
CaptureDeviceConfigurationクラスを使用すると、GetDefaultVideoCaptureDeviceメソッドとGetDefaultAudioCaptureDeviceメソッドをそれぞれ使用して、すべてのビデオおよびオーディオキャプチャデバイスのリストとデフォルトデバイスを取得できます。 デバイスはデフォルトで自動的にインストールされますが、ユーザーはMicrosoft Silverlight構成ユーティリティを使用してデバイスを構成できます。 このユーティリティを実行するには、Silverlightアプリケーションを右クリックして、コンテキストメニューから[Silverlight]を選択します。 必要なウィンドウが開きます。Silverlightの4番目のバージョンでは、新しいタブ「Webcam / Mic」が表示されます。
デフォルトのデバイスを変更するか、脇に置くことができます。 それまでの間、ソースコードに戻ります。
そこで、CaptureSource型のフィールドをMainPageクラスに追加します。 このクラスのオブジェクトは、関連するデバイスからビデオとサウンドをキャプチャするために使用されます。
private CaptureSource _captureSource;
* This source code was highlighted with Source Code Highlighter .
MainPage_Loadedメソッドで、新しく作成されたフィールドを初期化します。
_captureSource = new CaptureSource();
* This source code was highlighted with Source Code Highlighter .
次に、キャプチャボタンが押されたときに実行されるアクションを定義します。 これを行うには、対応するボタン（startCapture）の「Click」イベントハンドラーを追加し、ハンドラーに次のコードを記述します。
private void startCapture_Click( object sender, RoutedEventArgs e)
{
if (_captureSource != null )
{
_captureSource.Stop();
_captureSource.VideoCaptureDevice = (VideoCaptureDevice)VideoSources.SelectedItem;
_captureSource.AudioCaptureDevice = (AudioCaptureDevice)AudioSources.SelectedItem;
VideoBrush vidBrush = new VideoBrush();
vidBrush.SetSource(_captureSource);
videoRect.Fill = vidBrush;
if (CaptureDeviceConfiguration.AllowedDeviceAccess ||
CaptureDeviceConfiguration.RequestDeviceAccess())
{
_captureSource.Start();
}
}
}
* This source code was highlighted with Source Code Highlighter .
最初に、_captureSourceメディアソースがnullでないことを確認し、このソースの現在のキャプチャをすべて停止します。 その後、ユーザーが_captureSourceに選択したビデオおよびオーディオキャプチャデバイスを設定し、Webカメラから受信したビデオのvideoRect四角形をリアルタイムで塗りつぶすブラシ（vidBrush）を作成します。
しかし、それだけではありません。 キャプチャを開始する前に、必要なアクセス権（CaptureDeviceConfiguration.AllowedDeviceAccess）があることを確認する必要があり、それらがない場合は、ユーザーにアクセスを要求します（CaptureDeviceConfiguration.RequestDeviceAccess（））。
アクセス許可を要求すると、ユーザーには同様のダイアログボックスが表示されます。
また、「はい」をクリックすると、キャプチャを開始できます（_captureSource.Start（））。 それ以外の場合は、信じられないほどのユーザーの運命を非難するだけです。
キャプチャ停止ボタンハンドラは、はるかに簡単です。 そのコードは非常に明白です：
private void endCapture_Click( object sender, RoutedEventArgs e)
{
if (_captureSource != null )
{
_captureSource.Stop();
}
}
* This source code was highlighted with Source Code Highlighter .
すべて、基本的なアプリケーションの準備ができました。 それを起動すると、ウェブカメラの目を通して世界を見るユニークな機会があります。
以下は、MainPageページの完全なC＃コードです。
public partial class MainPage : UserControl
{
private CaptureSource _captureSource;
public MainPage()
{
InitializeComponent();
this .Loaded += new RoutedEventHandler(MainPage_Loaded);
}
void MainPage_Loaded( object sender, RoutedEventArgs e)
{
VideoSources.ItemsSource = CaptureDeviceConfiguration.GetAvailableVideoCaptureDevices();
AudioSources.ItemsSource = CaptureDeviceConfiguration.GetAvailableAudioCaptureDevices();
_captureSource = new CaptureSource();
}
private void startCapture_Click( object sender, RoutedEventArgs e)
{
if (_captureSource != null )
{
_captureSource.Stop();
_captureSource.VideoCaptureDevice = (VideoCaptureDevice)VideoSources.SelectedItem;
_captureSource.AudioCaptureDevice = (AudioCaptureDevice)AudioSources.SelectedItem;
VideoBrush vidBrush = new VideoBrush();
vidBrush.SetSource(_captureSource);
videoRect.Fill = vidBrush;
if (CaptureDeviceConfiguration.AllowedDeviceAccess ||
CaptureDeviceConfiguration.RequestDeviceAccess())
{
_captureSource.Start();
}
}
}
private void endCapture_Click( object sender, RoutedEventArgs e)
{
if (_captureSource != null )
{
_captureSource.Stop();
}
}
}
* This source code was highlighted with Source Code Highlighter .
スナップショットを撮る
アプリケーションは動作しています。 しかし、私は何か他のものが欲しい。 たとえば、ボタンを押して、カメラが現在表示しているものを画像として保存します。 これ以上簡単なことはありません。 まず、ボタンを追加する必要があります。
< Button Margin ="5" Content ="Snapshot" x:Name ="takeSnapshot" Click ="takeSnapshot_Click" />
* This source code was highlighted with Source Code Highlighter .
このボタンをクリックするためのイベントハンドラーを作成する必要もあります。 そして、XAMLマークアップでスナップショットを表示するコードを追加します。
< ScrollViewer Width ="400" VerticalScrollBarVisibility ="Hidden" HorizontalScrollBarVisibility ="Auto"
HorizontalAlignment ="Center" >
< ItemsControl x:Name ="snapshots" >
< ItemsControl.ItemTemplate >
< DataTemplate >
< Image Source ="{Binding}" Margin ="5" Height ="50" Stretch ="UniformToFill" ></ Image >
</ DataTemplate >
</ ItemsControl.ItemTemplate >
< ItemsControl.ItemsPanel >
< ItemsPanelTemplate >
< StackPanel Orientation ="Horizontal" />
</ ItemsPanelTemplate >
</ ItemsControl.ItemsPanel >
</ ItemsControl >
</ ScrollViewer >
* This source code was highlighted with Source Code Highlighter .
スナップショットが配置されるScrollViewerを作成します。 ItemsControl要素はそれらを表示する役割を果たします。
写真が保存されるMainPageクラスにフィールド「_images」を追加します。
private ObservableCollection<WriteableBitmap> _images = new ObservableCollection<WriteableBitmap>();
* This source code was highlighted with Source Code Highlighter .
そして、「takeSnapshot」ボタンをクリックするためのハンドラーで、次のコードを記述します。
private void takeSnapshot_Click( object sender, RoutedEventArgs e)
{
if (_captureSource != null )
{
_captureSource.AsyncCaptureImage((snapImage) =>
{
_images.Add(snapImage);
});
}
}
* This source code was highlighted with Source Code Highlighter .
ここでは、新しいスナップショットをスナップショットコレクションに非同期的に追加します。
あとは、_imagesコレクションを視覚的表現に接続するだけです。 これを行うには、MainPage_Loadedメソッドで、次のコードを追加します。
snapshots.ItemsSource = _images;
* This source code was highlighted with Source Code Highlighter .
これで、アプリケーションを起動できます。 そして、もし何かできるなら、それをやろう。 アプリケーションを起動して、この機能を作成したことを理由にではなく、スナップショットの取得を試みます。
このトピックで利用可能な英語のスクリーンキャスト：
見る