SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Silverlight 4で作る新しいRIAアプリケーション

カメラとマイクを使った新しいユーザー体験

Silverlight 4で作る新しいRIAアプリケーション(2)

  • X ポスト
  • このエントリーをはてなブックマークに追加

ダウンロード sample.zip (1.8 MB)

1.デバイスへのアクセス許可を調査する

 カメラやマイクなどのデバイスは、Silverlightを動作させるコンピュータに存在するデバイスです。このため、Silverlightからカメラやマイクのデバイスを操作する場合は、必ずユーザーの許可を得る必要があります。

 RequestDeviceAccessメソッドを呼び出すと、図3のようなダイアログが表示され、そのサイトからデバイスに対してアクセスを試みようとしていることを、ユーザーに通知します。

図3 デバイスへのアクセス許可ダイアログ
デバイスへのアクセス許可ダイアログ

 注意点として、このメソッドは、ユーザーがイベントの主導となるボタンクリックのイベントなどから呼び出す必要があります。ページの初期化イベントなど、ユーザーが意図しないイベントから呼び出された場合は、必ずfalseが返されます。また、後述するCaptureSourceのインスタンスが既に作成されている場合も、同様にfalseが返されます。

 この状態でキャプチャーを開始すると、InvalidOperationExceptionが発生します。

 図3のダイアログでは、そのサイトに対して今後ユーザーの許可が必要ない場合は、[回答を保存する]チェックボックスをONにすることで、そのサイトへのデバイスの許可を保存できます。

 ユーザーが既にそのサイトでデバイスに対するアクセスを許可しているかどうかは、AllowedDeviceAccessプロパティを調べれば分かります。また、今までに許可したサイトの一覧は、Silverlightのプロパティ画面にある[アクセス許可]から確認と編集ができます(図4を参照)。

図4 アクセス許可の設定ダイアログ
アクセス許可の設定ダイアログ

2.デバイスを操作するためのCaptureSourceを作成する

 利用可能なデバイスの一覧を取得したり、デフォルトのデバイスを取得する場合にも、CaptureDeviceConfigurationクラスを利用できます。2ではデフォルトのビデオデバイスとオーディオデバイスを取得し、実際にデバイスを操作するためにCaptureSourceクラスのプロパティに割り当てています(デバイスの一覧を取得したい場合は、GetAvailableAudioCaptureDevicesメソッドから現在有効なデバイスの一覧を取得することが可能です)。

 どのデバイスをデフォルトのデバイスとして設定するかは、図5のSilverlightのプロパティ画面で操作できます。利用できるデバイスが存在しない場合は、そのデバイスはnullになるので、デバイスからデータを取得する場合はデバイスのインスタンスが取得できたかを調べる必要があります。また、ここで設定したデバイスがキャプチャーを開始する(Startメソッドの呼び出し時)までにプログラムで利用可能になっていない場合は、StartメソッドでArgumentExceptionが発生します。

図5 既定のキャプチャーデバイス
既定のキャプチャーデバイス

3.ビデオブラシを作成し、動画を表示する

 デバイスで取得した動画をSilverlightのページ上に表示するには、VideoBrushクラス経由でSilverlightのエレメントに表示するのが最も簡単な方法です。3では、リスト1で定義したwebCamDisplayという名前の四角形にキャプチャーした動画を表示しています。

 もちろんBrushを設定するだけなので、ボタンやテキストボックスなどのSilverlightのほかのエレメントにキャプチャー動画を表示することも可能です。

4.ビデオの開始と停止

 この説明は必要ないと思いますが、CaptureSourceのインスタンスに関連付けしたデバイスは、Startで開始してStopで停止できます。開始したビデオは忘れずに停止しましょう。

 ここまでで、カメラから取得した動画をSilverlight上で表示できるようになりました。早速、Visual Studioからデバッグを行って動作を確認してみてください。許可を促すダイアログが表示された後に、キャプチャーが開始されたことを確認できたでしょうか。

キャプチャー画像の表示

 再生中のビデオデバイスからキャプチャーを取得するには、CaptureImageAsyncメソッドを利用します。キャプチャーが取得できた場合にはCaptureImageCompletedイベントが呼び出されるので、Resultプロパティからイメージデータを取得します(リスト3を参照)。

リスト3 チャプター取得用のコード
private void btnStart_Click(object sender, RoutedEventArgs e)
{
   ... 略 ...

    // 画像キャプチャーの設定
    captureImages.Items.Clear();
    _captureSource.CaptureImageCompleted += (_s, _e) =>
        {
            captureImages.Items.Add(new Image()
            {
                Source = _e.Result,
            });
        };

   ... 略 ...
   _captureSource.Start();
}

// チャプターボタンクリック時のイベントハンドラー
private void btnCapture_Click(object sender, RoutedEventArgs e)
{
    if (_captureSource == null ||
        _captureSource.State != CaptureState.Started)
    {
        return;
    }

    _captureSource.CaptureImageAsync();
}

 ここで注意する点は、キャプチャーが停止しているとチャプターを取ることはできないので、チャプター取得時にはキャプチャーが開始されているかを調べる必要があることです。キャプチャーの現在の状況を調べるには、CaptureSourceクラスのStateプロパティを調査します。キャプチャーが開始されていない状態でCaptureImageAsyncメソッドを呼び出すと、InvalidOperationExceptionが発生します。

 キャプチャーを開始中にチャプターボタンをクリックすると、ボタンの下にチャプターした画像が追加されていくのが確認できるはずです。チャプターした画像は、連載「Silverlight 3で強化されたグラフィックとメディア機能」のWritableBitmapの項で紹介している方法でファイルとして保存できます。

次のページ
メディアファイルの保存

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Silverlight 4で作る新しいRIAアプリケーション連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト かるあ (杉山 洋一)(カルア(スギヤマ ヨウイチ))

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5392 2010/09/01 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング