How to make VideoRecorderBrush scollable?

Question

Hi. My root layout is a Grid and I'm using a Rectangle to display the AudioVideoCaptureDevice's viewfinder. I have a option to set the capture resolution to any resolution that is  available by the API. When the capture resolution is
greater that the rectangle  a lot of the information of the recording (video picture) is unseen. I know I can later see it by playing it back with a fill stretch. Can you teach me how to see it while recording i.a.w make some control scrollable like
the video recorder brush? Thanks in advance:-)  

Answer 1

I followed the "how to capture videos in Windows Phone" tutorial and it used VideoCaptureDevice API from Microsoft.Devices namespace. I edited the code and where able to capture videos using AudioVideoCaptureDevice (It took me a long time to get
it right). Here is the relevant code:
XAML:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot"
Background="Transparent">
<!--Camera viewfinder >-->
<Rectangle x:Name="viewfinderRectangle" Width="auto" Height="auto" Stroke="White" Tap="ToggleZoom_Tap" StrokeThickness="5" HorizontalAlignment="Center" VerticalAlignment="Center">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<MediaElement x:Name="VideoPlayer" AutoPlay="True" Width="800" Height="480" RenderTransformOrigin="0.72,0.479" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="None"/>
Code behind:
// Viewfinder for capturing video.
private VideoBrush videoRecorderBrush;
private AudioVideoCaptureDevice vcDevice;
// File details for storing the recording.
private string isoVideoFileName = "iClips_Video";
private StorageFolder isoStore;
private StorageFile sfVideoFile;
//Reference for vibrate Control
VibrateController testVibrateController = VibrateController.Default;
// For managing button and application state.
private enum ButtonState
Initialized, Stopped, Ready, Recording, Playback, Paused, NoChange, CameraNotSupported
private ButtonState currentAppState;
public MainPage()
InitializeComponent();
//setup recording
// Prepare ApplicationBar and buttons.
PhoneAppBar = (ApplicationBar)ApplicationBar;
PhoneAppBar.IsVisible = true;
StartRecording = ((ApplicationBarIconButton)ApplicationBar.Buttons[0]);
StopPlaybackRecording = ((ApplicationBarIconButton)ApplicationBar.Buttons[1]);
StartPlayback = ((ApplicationBarIconButton)ApplicationBar.Buttons[2]);
PausePlayback = ((ApplicationBarIconButton)ApplicationBar.Buttons[3]);
//Life Cycle
protected async override void OnNavigatedTo(NavigationEventArgs e)
try
// Initialize the video recorder.
CameraSensorLocation location = CameraSensorLocation.Back;
captureResolutions =
AudioVideoCaptureDevice.GetAvailableCaptureResolutions(location);
await InitializeVideoRecorder(location, captureResolutions.FirstOrDefault());
RotateUI();
//prepare shutter hot keys
CameraButtons.ShutterKeyHalfPressed += OnButtonHalfPress;
CameraButtons.ShutterKeyPressed += OnButtonFullPress;
CameraButtons.ShutterKeyReleased += OnButtonRelease;
base.OnNavigatedTo(e);
catch (Exception ex)
MessageBox.Show("On Navigated To In Main Error:\n"+ex.Message.ToString());
protected override void OnNavigatedFrom(NavigationEventArgs e)
try
//enable screen locking
PhoneApplicationService.Current.UserIdleDetectionMode = IdleDetectionMode.Enabled;
// Dispose of camera and media objects.
DisposeVideoPlayer();
DisposeVideoRecorder();
base.OnNavigatedFrom(e);
CameraButtons.ShutterKeyHalfPressed -= OnButtonHalfPress;
CameraButtons.ShutterKeyPressed -= OnButtonFullPress;
CameraButtons.ShutterKeyReleased -= OnButtonRelease;
catch (Exception ex)
MessageBox.Show("On Navigated From In Main Error:\n" + ex.Message.ToString());
protected override void OnOrientationChanged(OrientationChangedEventArgs e)
RotateUI();
private void RotateUI()
try
this.Dispatcher.BeginInvoke(delegate()
if (vcDevice != null)
RotateTransform rt = new RotateTransform();
//Set a perfect orientation to capture with
if (this.Orientation == PageOrientation.LandscapeLeft)
txtDebug.Text = "LandscapeLeft";
if (vcDevice != null)
//rotate video camera
if (vcDevice.SensorLocation == CameraSensorLocation.Back)
vcDevice.SetProperty(KnownCameraGeneralProperties.EncodeWithOrientation, sensor_angle + 90);
else
vcDevice.SetProperty(KnownCameraGeneralProperties.EncodeWithOrientation, sensor_angle - 90);
if (videoRecorderBrush != null)
if (vcDevice.SensorLocation == CameraSensorLocation.Back)
videoRecorderBrush.RelativeTransform =
new CompositeTransform() { CenterX = 0.5, CenterY = 0.5, Rotation = 90 };
else
videoRecorderBrush.RelativeTransform =
new CompositeTransform() { CenterX = 0.5, CenterY = 0.5, Rotation = -90 };
else
txtDebug.Text = "Video Recorder Brush not fully initialized.";
if (videoRecorderBrush != null)
videoRecorderBrush.RelativeTransform =
new CompositeTransform() { CenterX = 0.5, CenterY = 0.5, Rotation = 90 };
//rotate logo
if (logo != null)
rt.Angle = 90;
logo.RenderTransformOrigin = new Point(0.5, 0.5);
logo.RenderTransform = rt;
//rotate record time ellapse
if (txtRecTime != null)
rt.Angle = 90;
txtRecTime.RenderTransformOrigin = new Point(0.2, 0.5);
txtRecTime.RenderTransform = rt;
//rotate sign in link
if (MyGrid != null)
rt.Angle = 90;
MyGrid.RenderTransformOrigin = new Point(0.5, 0.5);
MyGrid.RenderTransform = rt;
//rotate CanvasVideoInfo
rt.Angle = 90;
VideoInfoGrid.RenderTransformOrigin = new Point(0.5, 0.5);
VideoInfoGrid.RenderTransform = rt;
if (this.Orientation == PageOrientation.PortraitUp)
txtDebug.Text = "PortraitUp";
if (videoRecorderBrush != null)
videoRecorderBrush.RelativeTransform =
new CompositeTransform() { CenterX = 0.5, CenterY = 0.5, Rotation = 90 };
//rotate logo
if (logo != null)
rt.Angle = 0;
logo.RenderTransformOrigin = new Point(0.5, 0.5);
logo.RenderTransform = rt;
//rotate record time ellapsed
if (txtRecTime != null)
rt.Angle = 0;
txtRecTime.RenderTransformOrigin = new Point(0.5, 0.5);
txtRecTime.RenderTransform = rt;
//rotate sign in link
if (MyGrid != null)
rt.Angle = 0;
MyGrid.RenderTransformOrigin = new Point(0.5, 0.5);
MyGrid.RenderTransform = rt;
//rotate CanvasVideoInfo
rt.Angle = 0;
VideoInfoGrid.RenderTransformOrigin = new Point(0.5, 0.5);
VideoInfoGrid.RenderTransform = rt;
if (this.Orientation == PageOrientation.LandscapeRight)
this.Dispatcher.BeginInvoke(delegate()
txtDebug.Text = "LandscapeRight";
// Rotate for LandscapeRight orientation.
if (videoRecorderBrush != null)
videoRecorderBrush.RelativeTransform =
new CompositeTransform() { CenterX = 0.5, CenterY = 0.5, Rotation = 90 };
//rotate logo
if (logo != null)
rt.Angle = -90;
logo.RenderTransformOrigin = new Point(0.5, 0.5);
logo.RenderTransform = rt;
//rotate record time ellapsed
if (txtRecTime != null)
rt.Angle = -90;
txtRecTime.RenderTransformOrigin = new Point(0.2, 0.5);
txtRecTime.RenderTransform = rt;
//rotate MyGrid
if (MyGrid != null)
rt.Angle = -90;
MyGrid.RenderTransformOrigin = new Point(0.5, 0.5);
MyGrid.RenderTransform = rt;
//rotate CanvasVideoInfo
rt.Angle = -90;
VideoInfoGrid.RenderTransformOrigin = new Point(0.5, 0.5);
VideoInfoGrid.RenderTransform = rt;
catch (Exception ex)
MessageBox.Show("On Orientation Changed Error:\n" + ex.Message.ToString());
// Update the buttons and text on the UI thread based on app state.
private void UpdateUI(ButtonState currentButtonState, string statusMessage)
try
// Run code on the UI thread.
Dispatcher.BeginInvoke(delegate
switch (currentButtonState)
// When the camera is not supported by the phone.
case ButtonState.CameraNotSupported:
StartRecording.IsEnabled = false;
StopPlaybackRecording.IsEnabled = false;
StartPlayback.IsEnabled = false;
PausePlayback.IsEnabled = false;
break;
// First launch of the application, so no video is available.
case ButtonState.Initialized:
StartRecording.IsEnabled = true;
StopPlaybackRecording.IsEnabled = false;
StartPlayback.IsEnabled = false;
PausePlayback.IsEnabled = false;
break;
// Ready to record, so video is available for viewing.
case ButtonState.Ready:
StartRecording.IsEnabled = true;
StopPlaybackRecording.IsEnabled = false;
StartPlayback.IsEnabled = true;
PausePlayback.IsEnabled = false;
break;
// Video recording is in progress.
case ButtonState.Recording:
StartRecording.IsEnabled = false;
StopPlaybackRecording.IsEnabled = true;
StartPlayback.IsEnabled = false;
PausePlayback.IsEnabled = false;
break;
// Video Recording Stopped.
case ButtonState.Stopped:
StartRecording.IsEnabled = true;
StopPlaybackRecording.IsEnabled = false;
StartPlayback.IsEnabled = true;
PausePlayback.IsEnabled = false;
break;
// Video playback is in progress.
case ButtonState.Playback:
StartRecording.IsEnabled = false;
StopPlaybackRecording.IsEnabled = true;
StartPlayback.IsEnabled = false;
PausePlayback.IsEnabled = true;
break;
// Video playback has been paused.
case ButtonState.Paused:
StartRecording.IsEnabled = false;
StopPlaybackRecording.IsEnabled = true;
StartPlayback.IsEnabled = true;
PausePlayback.IsEnabled = false;
break;
default:
break;
// Display a message.
txtDebug.Text = statusMessage;
// Note the current application state.
currentAppState = currentButtonState;
catch (Exception ex)
MessageBox.Show("UpdateUI Error:\n" + ex.Message.ToString());
private async Task InitializeVideoRecorder(CameraSensorLocation sensorLocation, Windows.Foundation.Size sz)
try
string[] dimensions = sz.ToString().Split(',');
//open video camera device in this resolution
vcDevice = await AudioVideoCaptureDevice.OpenAsync(sensorLocation, sz);
vcDevice.RecordingFailed += OnCaptureFailed;
vcDevice.VideoEncodingFormat = CameraCaptureVideoFormat.H264;
vcDevice.AudioEncodingFormat = CameraCaptureAudioFormat.Aac;
// Initialize the camera if it exists on the phone.
if (vcDevice != null)
//initialize fileSink
await InitializeFileSink();
// Create the VideoBrush for the viewfinder.
videoRecorderBrush = new VideoBrush();
videoRecorderBrush.SetSource(vcDevice);
this.Dispatcher.BeginInvoke(delegate()
// Display the viewfinder image on the rectangle.
viewfinderRectangle.Fill = videoRecorderBrush;
//set the resolution
viewfinderRectangle.Width = Convert.ToDouble(dimensions[1]);
viewfinderRectangle.Height = Convert.ToDouble(dimensions[0]);
VideoPlayer.Width = Convert.ToDouble(dimensions[1]);
VideoPlayer.Height = Convert.ToDouble(dimensions[0]);
resMI.Content = Convert.ToString(dimensions[0]) + "*" + Convert.ToString(dimensions[1]);
resMI_Shadow.Content = Convert.ToString(dimensions[0]) + "*" + Convert.ToString(dimensions[1]);
// Set the button state and the message.
UpdateUI(ButtonState.Initialized, "Tap record to start recording...");
else
// Disable buttons when the camera is not supported by the phone.
UpdateUI(ButtonState.CameraNotSupported, "A camera is not supported on this phone.");
/*Create Picture Perfect
//orient preview picture size from the computed anle.
var tmp = new CompositeTransform() { Rotation = ComputeAngle(this.Orientation) };
var previewSizeW = tmp.TransformBounds(new Rect(new Point(), new Size(vcDevice.PreviewResolution.Width, vcDevice.PreviewResolution.Height))).Width;
var previewSizeH = tmp.TransformBounds(new Rect(new Point(), new Size(vcDevice.PreviewResolution.Width, vcDevice.PreviewResolution.Height))).Height;
var previewSize = tmp.TransformBounds (new Rect(new Point(), new Size(m_captureDevice.PreviewResolution.Width, vcDevice.PreviewResolution.Height))).Size;
double s1 = viewfinderRectangle.Width / (double)previewSizeW;
double s2 = viewfinderRectangle.Height / (double)previewSizeH;
if (sensorLocation == CameraSensorLocation.Back)
videoRecorderBrush.Transform = new CompositeTransform()
Rotation = ComputeAngle(this.Orientation),
CenterX = viewfinderRectangle.Width / 2,
CenterY = viewfinderRectangle.Height / 2,
ScaleX = s1,
ScaleY = s2
else
videoRecorderBrush.Transform = new CompositeTransform()
Rotation = ComputeAngle(this.Orientation),
CenterX = viewfinderRectangle.Width / 2,
CenterY = viewfinderRectangle.Height / 2,
ScaleX = s1,
ScaleY = -1 * s2
};//Y mirror
catch (Exception ex)
MessageBox.Show("InitializeVideoRecorder Error:\n" + ex.Message);
double ComputeAngle(PageOrientation orientation)
if ((orientation & PageOrientation.Portrait) == PageOrientation.Portrait)
return vcDevice.SensorRotationInDegrees;
else if ((orientation & PageOrientation.LandscapeLeft) == PageOrientation.LandscapeLeft)
return vcDevice.SensorRotationInDegrees - 90;
else //PageOrientation.LandscapeRight
return vcDevice.SensorRotationInDegrees + 90;
//setup iClips video file creation
private async Task InitializeFileSink()
try
isoStore = await ApplicationData.Current.LocalFolder.GetFolderAsync("Shared");
sfVideoFile = await isoStore.CreateFileAsync(isoVideoFileName + ".mp4",
CreationCollisionOption.ReplaceExisting);
s = await sfVideoFile.OpenAsync(FileAccessMode.ReadWrite);
catch (Exception ex)
MessageBox.Show("Initialize File Sink Error:\n" + ex.Message.ToString());
// Set the recording state: display the video on the viewfinder.
private void StartVideoPreview()
try
// Display the video on the viewfinder.
if (vcDevice != null)
if (videoRecorderBrush == null)
// Create the VideoBrush for the viewfinder.
videoRecorderBrush = new VideoBrush();
videoRecorderBrush.SetSource(vcDevice);
// Display the viewfinder image on the rectangle.
viewfinderRectangle.Fill = videoRecorderBrush;
// Set the button states and the message.
UpdateUI(ButtonState.Ready, "Ready to record.");
txtRecTime.Visibility = Visibility.Collapsed;
// If preview fails, display an error.
catch (Exception e)
MessageBox.Show("Start Video Preview Exception:\n " + e.Message.ToString());
// Set recording state: start recording.
private async void StartVideoRecording()
try
//disable screen locking
PhoneApplicationService.Current.UserIdleDetectionMode = IdleDetectionMode.Disabled;
if (vcDevice != null)
VideoInfoGrid.Visibility = Visibility.Collapsed;
if (s == null)
s = await sfVideoFile.OpenAsync(FileAccessMode.ReadWrite);
await vcDevice.StartRecordingToStreamAsync(s);
rState = 1;
logo.Opacity = 1.0; //brighten logo to indicate that the recording started
signForm_Shadow.Opacity = 1.0;
resMI_Shadow.Opacity = 1.0;
cOrientation.Opacity = 1.0;
ToggleCameraShadow.Opacity = 1.0;
StartTimer(); //show time ellapsed on UI
// Set the button states and the message.
UpdateUI(ButtonState.Recording, "Recording...");
// If recording fails, display an error.
catch (Exception e)
MessageBox.Show("Start Video Recording Error:\n" + e.Message.ToString());
// Set the recording state: stop recording.
private async void StopVideoRecording()
try
//enable screen locking
PhoneApplicationService.Current.UserIdleDetectionMode = IdleDetectionMode.Enabled;
await vcDevice.StopRecordingAsync();
rState = 0;
logo.Opacity = 0.1;
signForm_Shadow.Opacity = 0.5;
resMI_Shadow.Opacity = 0.5;
ToggleCameraShadow.Opacity = 0.5;
cOrientation.Opacity = 0.5;
StopTimer();
txtRecTime.Visibility = Visibility.Collapsed;
// Set the button states and the message.
UpdateUI(ButtonState.Stopped, "Recording stopped.");
DisplayVideoInformation();
// If stop fails, display an error.
catch (Exception e)
MessageBox.Show("Stop Video Recording:\n " + e.Message.ToString());
private void DisplayVideoInformation()
try
VideoInfoGrid.Visibility = Visibility.Visible;
txtVideoDate.Text = "Date: " + System.DateTime.Now;
txtVideoDuration.Text = "Duration: " + txtRecTime.Text;
txtVideoName.Text = "Name: " + sfVideoFile.Name;
txtVideoSize.Text = "Size: ";
txtVideoType.Text = "Type: " + "MP4";
catch (Exception ex)
MessageBox.Show("Display Video Information Error:\n" + ex.Message.ToString());
// Start the video recording.
private void StartRecording_Click(object sender, EventArgs e)
// Avoid duplicate taps.
StartRecording.IsEnabled = false;
StartVideoRecording();
private void DisposeVideoRecorder()
try
//enable screen locking
PhoneApplicationService.Current.UserIdleDetectionMode = IdleDetectionMode.Enabled;
if (vcDevice != null)
// Remove the event handler for captureSource.
vcDevice.RecordingFailed -= OnCaptureFailed;
if (s != null)
s.Dispose();
if (sfVideoFile != null)
sfVideoFile = null;
if (videoRecorderBrush != null)
videoRecorderBrush = null;
// Remove the video recording objects.
vcDevice.Dispose();
//vcDevice = null;
catch (Exception ex)
MessageBox.Show("Dispose Video Recorder Error:\n" + ex.Message.ToString());
private void OnCaptureFailed(AudioVideoCaptureDevice sender, CaptureFailedEventArgs args)
try
//enable screen locking
PhoneApplicationService.Current.UserIdleDetectionMode = IdleDetectionMode.Enabled;
MessageBox.Show("Recording Failed!");
rState = 0;
logo.Opacity = 0.1;
signForm_Shadow.Opacity = 0.5;
resMI_Shadow.Opacity = 0.5;
ToggleCameraShadow.Opacity = 0.5;
cOrientation.Opacity = 0.5;
catch (Exception ex)
MessageBox.Show("On Capture Failed Error:\n " + ex.Message.ToString());
I added some other methods that are related to the Video Capturing but you can just look in InitializeVideoRecorder to see how I'm binding the AudioVideoCaptureDevice preview to the rectangle...Tell me if you need more info and thanks so long