I added camera to an my App which is all in Portrait mode so would like the to keep it this way.
Here is the relevant code snippets I use in my .XAML
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480"
<Canvas x:Name="viewfinderCanvas" Width="480" Height="800" >
<!--Camera viewfinder -->
<Canvas.Background>
<VideoBrush x:Name="viewfinderBrush">
</VideoBrush>
</Canvas.Background>
</Canvas>
Here is my setup code from the .XAML.CS
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
if (PhotoCamera.IsCameraTypeSupported(CameraType.FrontFacing))
{
cam = new Microsoft.Devices.PhotoCamera(CameraType.FrontFacing);
}
else
{
cam = new Microsoft.Devices.PhotoCamera(CameraType.Primary);
}
cam.Initialized += new EventHandler<Microsoft.Devices.CameraOperationCompletedEventArgs>(cam_Initialized);
cam.CaptureCompleted += new EventHandler<CameraOperationCompletedEventArgs>(cam_CaptureCompleted);
cam.CaptureImageAvailable += new EventHandler<Microsoft.Devices.ContentReadyEventArgs>(cam_CaptureImageAvailable);
cam.CaptureThumbnailAvailable += new EventHandler<ContentReadyEventArgs>(cam_CaptureThumbnailAvailable);
viewfinderBrush.SetSource(cam);
}
The problem is that I hold the phone in Portrait and point the phone at a person. The screen shows the persons head on the right side of the screen and the persons feet at the left of the screen.
While as they stand in front of me there head should be at the top of the screen and there feet at the bottm, cause these people aint superman.
So it seems the image from the camera is getting rotated -90 before it appears on the screen.
Can anybody explain whats going wrong and what sample code I need to implement to fix this problem.
Thanks,
-Code
You need to implement a VideoBrush.RelativeTransform, as detailed in the following article :-
http://msdn.microsoft.com/en-us/magazine/hh708750.aspx
Also covered in the following :-
ViewFinder Orientation With Windows Phone 7 Mango PhotoCamera
just add this line to the C# code of your camera page. It will transform and handle the camera video stream in portrait mode correctly.
viewfinderTransform.Rotation = 90;
Related
I have searched the net but can't find an answer and need some help. I am creating a mobile HR program and need to provide a profile mask to the camera so that the user knows what distance to be at to take a picture of the person and to ensure all photos look the same.
What I would like to do is when the user clicks a button show the camera and have an area blacked out so that only the transparent section shows the focus of the camera in the desired shape.
If anyone knows where sample code is or a good tutorial on this subject is I would appreciate it.
For your requirement, you could use MediaCapture class to display the camera preview. And cover CaptureElement with human shape image just like the following.
MainPage.xaml
<Grid>
<CaptureElement Name="PreviewControl" Stretch="Uniform" Height="400" Width="400" >
</CaptureElement>
<Image Source="head.png" Height="400" Width="400" />
</Grid>
I am trying to set the video brush (viewfinderBrush) for the rectangle(viewfinderRectangle) fill property.
Using the following composite transform, the preview of the video can be viewed but it looks like mirror reflection. (for eg. If I try to move the finger from left to right, it shows right to left). I also added my xaml code, which has only the rectangle.
viewfinderBrush.RelativeTransform =
new CompositeTransform() { CenterX = 0.5, CenterY = 0.5, Rotation = 270, ScaleX = -1 };
viewfinderRectangle.Fill = viewfinderBrush;
Xaml Code
<Rectangle x:Name="viewfinderRectangle" Width="640" Height="480" HorizontalAlignment="Left" />
Please let me know, to overcome this issue.
I have created a flashlight app for Windows Phone. As i already acces the camera to enable the flash, i thought it would be a nice feature to also allow the user to view the previewframes, and be able to zoom in to get a better look at things.
I have a canvas with a composite transform (as i also have to rotate the camera to match potrait mode). I use a slider (started with pinch, but i want one hand control) to increase and decrease the scale of the canvas, effectively zooming in and out. So far so good and on windows Phone 8 (HTC 8x) this works fine, i can go crazy on the slider and nothing bad happens.
On Windows Phone 8.1 (Lumia 930) however, at seemingly randoms moments when moving the slider, the app just closes down and in the debug output the following line is shown:
The program '[3164] TaskHost.exe' has exited with code -1073741819 (0xc0000005) 'Access violation'.
I have no idea how to find the cause of this as the moment of the crash seems to be different, its just Always related to the scaling of the canvas. I am hoping someone can point me in the right direction so i can solve this.
The canvas in XAML:
<Canvas x:Name="viewfinderCanvas">
<Canvas.Background>
<VideoBrush x:Name="viewfinderBrush"/>
</Canvas.Background>
<Canvas.RenderTransform>
<CompositeTransform x:Name="rt" />
</Canvas.RenderTransform>
</Canvas>
And my code for setting the scale:
private void Zoom_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
if (canZoom && !isFocusing)
{
zoomValue = Math.Round(Zoom.Value, 1);
rt.ScaleX = zoomValue * staticValue;
rt.ScaleY = zoomValue * staticValue;
ZoomValue.Text = zoomValue.ToString() + " x";
}
}
Where canzoom is set to true on the loaded event of the mainpage, and isFocusing is set to true upon the autofocus.
I would like to know how to overlay two Image objects in Wpf. I've made two streams which output a video, one for bones and another just a normal video. Now I would like to add them together, so the skeleton would be displayed on the color video.
A part of my XAML code is
<Grid Name="layoutGrid">
<Grid Name="VideoGrid" ClipToBounds="True" Background="AliceBlue">
<Image Name="ColorImage" Width="640" Height="480"/>
<Image Name="SkeletalImage" Width="640" Height="480"/>
<Canvas Background="Transparent"/>
</Grid>
<StatusBar VerticalAlignment="Bottom" HorizontalAlignment="Center">
<Button Name="Button1" Content="Skeleton Only" Width="120"/>
</StatusBar>
</Grid>
When I do this, only the Skeletal image is displayed and if I switch the both Images then the color image is shown. It seems like Canvas background doesn't do the trick (to make the black part of skeletal image transparent)
I thought the problem was in my XAML code but it was actually at drawing the transparent background to set the render size. The background for skeleton image was black
dc.DrawRectangle(Brushes.Black, null,
new Rect(0.0, 0.0, RenderWidth, RenderHeight));
instead of transparent
dc.DrawRectangle(Brushes.Transparent, null,
new Rect(0.0, 0.0, RenderWidth, RenderHeight));
that fixed my problem.
Thanks though
I've tried overlaying Skeletal onto color or depth on a canvas, but it never worked out. Instead, when I looked at the Kinect Explorer sample application in the SDK 1.6.0, they overlay using a grid. Unfortunately, I have not learned that much yet, but they used a grid for the color and depth, and a canvas for the skeletal tracking. I can post a snippet if it helps. Good luck!
You are asking basically two different questions: 1) How to display SkeletonStream on a DepthStream, which is very easy, 2) How to display SkeletonStream on a ColorStream, which is still easy but a little more complicated.
Answer to Question 1) The XYZ Vectors of the joints in the skeletal streams are in the same coordinate system as the Depth Stream. So if you plot the Deapth Stream as a quadratic mesh using the focal length of the depth camera from the Kinect SDK, you can plot the skeleton as a line plot in the same coordinate system. The source code that implements exactly what you want to do in OpenGL is available here that will give you an idea how to implement this in wpf.
Answer to Question 2) The video camera has a different field of view from the depth camera. To display the skeleton stream to the ColorStream you need first to map the XYZ vectors of the joints in the skeletal streams to the coordinate system of the depth stream and then draw first the video frame in the background and the skeleton as a line plot on the front.
You can easily do the mapping using the U-V texture coordinates given by the Kinect SDK. See how you can get the UV here.
I'm creating an application for WP7 where the background of it (a grid) receives the image from the camera. Here is how it works:
XAML:
<Grid x:Name="ContentPanel" Grid.Row="1">
<Grid.Background>
<VideoBrush x:Name="video" />
</Grid.Background>
</Grid>
C#:
Microsoft.Devices.PhotoCamera m_camera;
// Constructor
public MainPage()
{
InitializeComponent();
Loaded += (s, e) =>
{
m_camera = new Microsoft.Devices.PhotoCamera();
video.SetSource(m_camera);
};
}
My question: Is there a way to access the zoom options of the camera with this? Or can I define the source as the camera totally zoomed in or out?
Unfortunately, no. You can manipulate a higher resolution image to fill the background with only the part that you'd like to zoom in on. See resolution example here