Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

(Difference between revisions)

Use Camera with XNA

From Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
hamishwillee (Talk | contribs)
m (Hamishwillee -)
Line 1: Line 1:
[[Category:Windows Phone]][[Category:XAML]][[Category:XNA]][[Category:Camera on Windows Phone]]
[[Category:Camera on Windows Phone]][[Category:Code Examples]][[Category:Windows Phone 7.5]][[Category:XAML]][[Category:XNA]]
{{Abstract|This article explains a method to access Camera with XNA.}}  
{{Abstract|This article explains a method to access Camera with XNA.}}  
Line 199: Line 199:
* [ How to: Combine Silverlight and the XNA Framework in a Windows Phone Application]
* [ How to: Combine Silverlight and the XNA Framework in a Windows Phone Application]
* [ Monster Cam] : Application which use this method and deform camera input in real time.
* [ Monster Cam] : Application which use this method and deform camera input in real time.
[[Category:Code Examples]][[Category:Windows Phone 7.5]]

Latest revision as of 05:40, 1 July 2013

This article explains a method to access Camera with XNA.

WP Metro Icon Multimedia.png
SignpostIcon XAML 40.png
WP Metro Icon XNA.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleCompatibility
Platform(s): windows phone 71
Windows Phone 7.5
Created: yan_ (17 Jul 2012)
Last edited: hamishwillee (01 Jul 2013)


[edit] Introduction

Under Windows Phone, Camera can be accessed only by silverlight. Windows Phone 7.5 Tango add possibility to share silverlight and XNA context in a same page. With small tricks, it's possible to use this capability to add a camera support in a XNA application.

[edit] Sharing context

In first you need a project which share context between XNA and silverlight. To do it generate a new project based on "Windows phone silverlight and XNA" template. This template add SharedGraphicsDeviceManager singleton with App.xaml

<!--Application Resources-->
<!--Required object that handles lifetime events for the application-->
Launching="Application_Launching" Closing="Application_Closing"
Activated="Application_Activated" Deactivated="Application_Deactivated"/>
<!--The SharedGraphicsDeviceManager is used to render with the XNA Graphics APIs-->
<xna:SharedGraphicsDeviceManager />

This singleton is used to switch between XNA and silverlight Context and create XNA elements.

This template give two phonepages:

  • MainPage.xaml : silverlight phonepage
  • GamePage.xaml : XNA phonepage.

To use XNA, GamePage use three important steps :

  1. Create a GameTimer to call OnUpdate and Ondraw callback.
  2. Activate XNA context in OnNavigateTo function.
  3. Deactivate XNA context in OnNavigateFrom function.

[edit] Add Camera access

Camera can be initialized only by a VideoBrush instance. In GamePage.xaml add an ui element which can use a VideoBrush. In the example will use a Canvas

<Canvas x:Name="cameraDisplayFake" Width="0" Height="0"></Canvas>

To create a Texture from camera we need :

  1. PhotoCamera : silverlight Camera instance
  2. int [] : camera image buffer
  3. Texture2D : XNA texture.

[edit] start camera

These objects will be created in a startCamera function

void startCamera()
//if camera instance exist, stop camera.
if (Camera != null)
//Create a PhotoCamera instance
if (PhotoCamera.IsCameraTypeSupported(CameraType.Primary))
Camera = new PhotoCamera(CameraType.Primary);
else if (PhotoCamera.IsCameraTypeSupported(CameraType.FrontFacing))
Camera = new PhotoCamera(CameraType.FrontFacing);
MessageBox.Show("Cannot find a camera on this device");
//you must wait camera initialization before create the buffer image and XNA texture
Camera.Initialized += (a, b) =>
//move to UI thread
Dispatcher.BeginInvoke(() =>
//if XNA texture exist dispose it and create a new texture with correct preview size
if (CameraTexture != null)
CameraTexture = CameraTexture = new Texture2D(SharedGraphicsDeviceManager.Current.GraphicsDevice,
//Create image buffer with correct preview size.
CameraBuffer = new int[(int)Camera.PreviewResolution.Width * (int)Camera.PreviewResolution.Height];
//initialize camera with a video use by an UI element to initialize camera.
var brush = new VideoBrush();
cameraDisplayFake.Background = brush;

VideoBrush will start camera initialization and when Camera is Initialized, we can finish objects creation and access preview buffer.

[edit] update texture

Update step use :

  1. PhotoCamera.GetPreviewBufferArgb32 : give current preview buffer.
  2. Texture2D.setData<int>() : set pixels to the texture.

PhotoCamera and Tetxure2D don't have same color representation red and blue are swapped. So to set Texture pixels you must swap red and blue values of photoCamera pixels.

         void updateCameraTexture()
//if CameraBuffer != null, camera is initialized;
if (Camera != null && CameraBuffer != null)
//get preview Image buffer
//swap Red and Blue channel
for (int i = 0; i < CameraBuffer.Length; ++i)
CameraBuffer[i] = (int)((uint)CameraBuffer[i] & 0xFF00FF00)
(CameraBuffer[i] >> 16 & 0xFF)
(CameraBuffer[i] & 0xFF) << 16;
//unset Texture
SharedGraphicsDeviceManager.Current.GraphicsDevice.Textures[0] = null;
//update pixel values

Better position to call this function is in OnDraw() callback.

[edit] stop Camera

To stop camera we add stopCamera() function. This function disposes PhotoCamera instance to stop camera.

void stopCamera()
//dispose PhotoCamera
if (Camera != null)
Camera = null;
//remove Image buffer
CameraBuffer = null;
//remove VideoBrush used
cameraDisplayFake.Background = null;


  • Never try to save a PhotoCamera and VideoBrush instance.
  • Always use PhotoCamera instance with only one VideoBrush.
  • Always use VideoBrush with only one UI element.
If you don't do it, camera preview update will be doesn't work correctly.

[edit] Links

This page was last modified on 1 July 2013, at 05:40.
72 page views in the last 30 days.