Webカメラの動画を保存して再生するアプリを作る

2013年6月7日(金)
薬師寺 国安

次に、ソリューションエクスプローラー内のMainWindow.xamlを展開して表示される、MainWindow.xaml.vbをダブルクリックしてリスト2のコードを記述します。

ロジックコードを記述する

リスト2 (MainWindow.xaml.vb)

1Option Strict On

写真、オーディオ録音、ビデオなどのメディアを作成したり、連携させたりするためのクラスの含まれる、Windows.Media.Capture名前空間をインポートします。

1Imports Windows.Media.Capture

ファイル、フォルダおよびアプリケーションの設定を管理するクラスの含まれる、Windows.Storage名前空間をインポートします。

1Imports Windows.Storage

ファイルの閲覧、開くファイルの選択、名前、拡張子、ファイル格納場所の選択等の機能を提供するクラスの含まれる、Windows.Storage.Pickers名前空間をインポートします。

1Imports Windows.Storage.Pickers
2 
3Public NotInheritable Class MainPage
4  Inherits Page

ページがアクティブになった時の処理

動画を表示して保存するVideoSaveShowプロシージャを実行します。

1Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
2  VideoSaveShow()
3End Sub

動画を表示して保存する処理

ビデオライブラリにアクセスします。CreateFolderAsyncメソッドでビデオライブラリ内にVideoSampleというサブフォルダを作成します。CreationCollisionOption.OpenIfExistsと指定すると、同名フォルダがある場合は、そのフォルダ名を返し、ない場合は新規に作成します。

接続されたカメラから単一のフォトかビデオをキャプチャするクラスである、CameraCaptureUIクラスの新しいインスタンスmyCameraオブジェクトを作成します。
キャプチャされたビデオを格納する形式を指定する、VideoSettings.FormatプロパティにMp4形式を指定します。

ビデオトリミングのユーザーインターフェースが有効になるかどうかを決定する、VideoSettings.AllowTrimmingプロパティにFalseを指定します。
ユーザーが選択できる最高解像度を指定する、VideoSettings.MaxResolutionプロパティにCameraCaptureUIMaxVideoResolution.StandardDefinition(標準解像度)を指定します。

CaptureFileAsyncメソッドで、写真またはビデオをキャプチャするダイアログを表示するための操作オブジェクトを作成します。CameraCaptureUIMode.Videoと指定して、ビデオのキャプチャだけを可能にします。

ファイルの名前、拡張子、および格納場所をユーザーが選択できるファイルピッカーを表す、FileSavePickerクラスの新しいインスタンス、myPickerオブジェクトを作成します。
SuggestedStartLocationプロパティにファイルの格納場所として、ビデオライブラリを指定します。

FileTypeChoices.Addで、ファイルの種類のコレクションをmp4として追加します。ファイル保存ピッカーがユーザーに提示するファイル名を指定する、SuggestedFileNameプロパティに、現在の年月日時分秒を指定します。

変数mySaveFileで、PickSaveFileAsyncメソッドを使って、ユーザーがファイルを保存したり、ファイル名、拡張子、およびファイルの保存場所を指定したりできるようにファイルピッカーを表示します。
MoveAndReplaceAsyncメソッドで、現在のファイル(mySaveFile)を指定されたファイルの場所に移動し、その場所の指定されたファイルを置き換えます。

01Private Async Sub VideoSaveShow()
02  Dim myStorageFolder As StorageFolder = Windows.Storage.KnownFolders.VideosLibrary
03  Dim mySubFolder = Await myStorageFolder.CreateFolderAsync("VideoSample", CreationCollisionOption.OpenIfExists)
04  Dim myCamera As New CameraCaptureUI
05  myCamera.VideoSettings.Format = CameraCaptureUIVideoFormat.Mp4
06  myCamera.VideoSettings.AllowTrimming = False
07  myCamera.VideoSettings.MaxResolution = CameraCaptureUIMaxVideoResolution.StandardDefinition
08  Dim myFile As StorageFile = Await myCamera.CaptureFileAsync(CameraCaptureUIMode.Video)
09 
10  If myFile Is Nothing = False Then
11    Dim myPicker As New FileSavePicker
12    myPicker.SuggestedStartLocation = PickerLocationId.VideosLibrary
13    myPicker.FileTypeChoices.Add("mp4", New List(Of String)() From {".mp4"})
14    myPicker.SuggestedFileName = DateTime.Now.ToString("yyyy年MM月dd日HH時mm分ss秒")
15    Dim mySaveFile As StorageFile = Await myPicker.PickSaveFileAsync
16    If mySaveFile Is Nothing = False Then
17      Await myFile.MoveAndReplaceAsync(mySaveFile)
18    End If
19  End If
20End Sub

[Play]アイコンがタップされた時の処理

ユーザーがファイルを開いて選択できるようにするUI要素を表す、新しいFileOpenPickerクラスのインスタンスOpenPickerオブジェクトを作成します。
ファイルを検索する際の初期位置を設定する、SuggestedStartLocationプロパティにビデオライブラリを指定します。

FileTypeFilter.Addメソッドで、ファイルオープンピッカーが表示するファイルの種類を追加します。この場合は.mp4を指定しています。
PickSingleFileAsyncメソッドで、ユーザーが1つのファイルを選択できるようにファイルピッカーを表示し、変数myFileで参照します。
OpenFileAsyncメソッドで、指定したファイルを読み込み専用で開き、myStreamで参照します。
MediaElementのSetSourceメソッドで、指定されたストリームを使用してSourceプロパティを設定します。
SetSourceメソッドの書式は下記の通りです。

MediaElement.SetSource(stream As Windows.Storage.Streams.IRandomAccessStream,mimeType As String)

指定されたストリームにmyStreamオブジェクトを指定し、myFile.ContentTypeでコンテンツのMIME型を取得します。Playメソッドで再生を開始します。

01Private Async Sub playButton_Click(sender As Object, e As RoutedEventArgs) Handles playButton.Click
02  Try
03    Dim OpenPicker As New FileOpenPicker
04    OpenPicker.SuggestedStartLocation = PickerLocationId.VideosLibrary
05    OpenPicker.FileTypeFilter.Add(".mp4")
06    Dim myFile = Await OpenPicker.PickSingleFileAsync
07    Dim myStream = Await myFile.OpenAsync(FileAccessMode.Read)
08    MediaElement1.SetSource(myStream, myFile.ContentType)
09    MediaElement1.Play()
10  Catch
11    Exit Sub
12  End Try
13End Sub

戻る(←)アイコンがタップされた時の処理

動画を表示して保存する処理である、VideoSaveShowプロシージャを実行します。

1  Private Sub backButton_Click(sender As Object, e As RoutedEventArgs) Handles backButton.Click
2    VideoSaveShow()
3  End Sub
4End Class

今回はここまでです。ありがとうございました。

筆者からのお知らせ

筆者はWindowsストアでアプリを公開しています。チャームの検索からWindowsストアを選択して、検索欄に、kuniyasuまたはYakushijiKuniyasuと入力すると、公開されているアプリの一覧が表示されます。上記はどちらも私のアカウントですので、興味のある方は是非ダウンロードして使ってみてください。

  • Webカメラの動画を保存して再生するアプリ

薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています