Partager via


Silverlight 4 Webカム及びマイクのサポート

皆様、こんにちは!

さて、本日は、予定を変更して、Webカム及びマイクのサポートについて、纏めさせてください。このあたり最近、エンタープライズのお客様からも、意外に多くのお問い合わせを戴く機会が多いためです。

Silverlight 4では、メディアデータの入力をサポートしており、Webcam や、マイクが利用可能になりました。 ビデオや音声をリアルタイムに共有するような、インタラクティブなアプリケーション構築ができます。詳細は下記のURLに記載されています。

Web カメラとデバイスの概要

Webカムからのキャプチャーの実装処理については、サンプルソースを使ってご紹介します。

Webカムからのキャプチャー

 if (CaptureDeviceConfiguration.AllowedDeviceAccess 
        || CaptureDeviceConfiguration.RequestDeviceAccess())    // ①
{
    VideoCaptureDevice vcd = 
      CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();  // ②
    if (null != vcd)
    {
        cs = new CaptureSource();  // ④
        cs.VideoCaptureDevice = vcd;                // ③
        cs.Start();                     // ⑤

        VideoBrush videoBrush = new VideoBrush();       // ⑥
        videoBrush.Stretch = Stretch.Uniform;
        videoBrush.SetSource(cs);
        TO_FILL.Fill = videoBrush;        // ⑦
    }
}

① 最初の処理としては、VideoCaptureDeviceがあるかどうかを判断します。

② 次は、VideoCaptureDeviceの取得とインスタンス化になります。最近はPCにWebカムが内蔵されている場合もありますが、外付けでWebカムを取り付けた場合には、ここでSelectorを入れて選択させる必要があります。

③ Videoを取得するか、Audioを取得するかの処理になります。Audioの場合にはAudioCaptureDeviceというメソッドを使います。

④ そのVideoやAudioの情報がいったん取得されるところが、CaptureSource になります。VideoとAudio両方取得したい場合には、これをもう一つ生成して利用します。

⑤ これにより、ダイレクトに(メモリ上での)Video(またはAudio)の取得が開始できます。

⑥ メモリ上のVideoを描画するためのVideoBrushを生成しています。WPFもSiverlightも共通の特徴として、描画する対象は、Brushを生成してそれを塗るというイメージの処理になります(ImageBrush、VideoBrush、ObjectBrush等)。それを最終的にRectangleに描画するという処理が可能となります。

⑦ TO_FILLというのが、最終的にVideoが描画されるRectangleのオブジェクトです。

以上が基本的な流れです。いかがでしょうか?

このWebカムからのビデオキャプチャの詳細なサンプルコードについては、Silverlight 4 Training Kitが役に立ちます。Visual Studio 2010 から、「プロジェクトを開く」で、Silverlight Training KitにあるWebcam in Silverlight LabSourceフォルダ(例:C:\Silverlight4\Labs\WebCam\Source)でStarter SolutionEndフォルダを選択して、当該処理を確認してみてください。MagicMirrorというソリューションです。

image

また、ビデオにエフェクトをかけることができます。WPFやSilverlight 4にはこのようなエフェクトがもともと用意されています。これについても、同じフォルダの中にあるソリューション Ex01-PixelShadersEndフォルダを参照して内容を確認してみてください。ここでは、Silverlight 4のPixelShaderを準備しておいて、そのエフェクトを各ボタンに割り当てるといった処理がなされています。

 private void Button_Click(object sender, RoutedEventArgs e)
{
  switch ((sender as Button).Content.ToString())
  {
    case "Pixelate":
      sbPixelate.Begin();
      TO_FILL.Effect = effectPixelate;
      break;
    case "Swirl":
      sbSwirl.Begin();
      TO_FILL.Effect = effectSwirl;
      break;
    case "Invert":          
      TO_FILL.Effect = effectInvert;
      break;
    case "Ripple":
      sbRipple.Begin();
      TO_FILL.Effect = effectRipple;
      break;
    default:
      TO_FILL.Effect = null;
      break;
  }
}

PixelShaderそれ自体の実装は結構複雑ですので、ここにあるソースを参考にして戴ければと思いますが、ここでは**PixelShader**さえ準備しておけば、それらを自由に割り当てられるということだけ、覚えておいて戴ければと思います。

参考: Webカムからのキャプチャーの詳細については、下記を参照してください。

https://msdn.microsoft.com/ja-jp/library/ff602282(VS.95).aspx

鈴木 章太郎