CaptureElement と MediaCapture

  • Article

まずはXAML。わかりやすいように、周りに隙間を開けてます。そして周りにボーダーを表示してます。

<Border BorderThickness="5" BorderBrush="Black" HorizontalAlignment="Center" VerticalAlignment="Center">
     <CaptureElement x:Name="captureElement" Margin="50" />
< /Border>

そして、MediaCapture を組み込む。これで、表示するとこうなる。

captureElement.Source = capture;

screenshot_07172013_192112

さて、それではキャプチャをスタート。

await capture.StartPreviewAsync();

screenshot_07172013_192159

そしてコード側では MediaCapture を270度回転させてみるとこうなる。もう一つ、CaptureElement の大きさを300x300に制限してみる。

capture.SetPreviewRotation(VideoRotation.Clockwise270Degrees);

image image

さらに、CaptureElement をFillやUniformaToFill に変えてみた。

imageimage

じつは、MediaCaptureを回転させたときはこういうことが起きている。

  1. MediaCapture が横長の画像を用意
  2. CaptureElementが縮小して表示する
  3. MediaCapture で縮小された枠内で回転する

つまり MediaCapture で回転すると、CaptureElementによるサイズ制限と、MediaElement 内での回転による Uniform 縮小の2つの縮小が入る。

結果として、90度や270度の回転はCapture 画像の縮小になってしまう。 で、

  • 3の回転による縮小はどうにもならないので、基本的回転はここではやらない。
  • 回転はCaptureElement側でやる
  • 回転しても縮小しないようにあらかじめ最大サイズの正方形をコンテナにする

というアプローチになります。

CaptureElement というよりも、MediaCapture がちょっと融通が利かない。と言ってもカメラ画像をリアルタイムに表示するためにいろいろ制約が出てしまうのは否めない。