Usando la cámara en una aplicación Windows 8

La manera más sencilla de capturar fotos o video desde la cámara es usar la API de CameraCaptureUI. Esta API nos muestra el diálogo de pantalla completa de captura, y nos permite capturar fotos y video con un simple llamado a un método.

Si lo que quisiéramos es implementar nuestra propia interfaz, deberíamos usar MediaCapture.

Para este ejemplo vamos a usar HTML y JavaScript para capturar una foto desde nuestra aplicación. Para poder seguirlo deben tener instalado Windows 8 y Visual Studio Express 2012 for Windows 8 (o superior).

Una vez abierto Visual Studio, creamos un nuevo proyecto, eligiendo como lenguaje JavaScript y como template una aplicación en blanco.

image

Una vez dentro de nuestro proyecto, abrimos default.html y reemplazamos dentro del body el:

<p>Content goes here</p>

por:

<input type="button" onclick="tomarFoto()" value="Tomar una foto" /><br />
<span id="mensaje"></span>

Lo que hicimos fue agregar un input de tipo botón que será el encargado de abrir el diálogo de manejo de la cámara, y un span que mostrará un mensaje indicando si se tomó o no la foto.

Luego vamos a default.js (ubicado dentro de la carpeta js) y agregamos al final la siguiente función, que será la encargada de llamar al diálogo y actualizar nuestro mensaje de acuerdo a lo sucedido:

function tomarFoto() {
    var captureUI = new Windows.Media.Capture.CameraCaptureUI();
    captureUI.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).then(function (capturedItem) {
        if (capturedItem) {
            document.getElementById("mensaje").innerHTML = "Se tomó una foto :)";
        } else {
            document.getElementById("mensaje").innerHTML = "No se tomó una foto :(";
        }
    });
}

Lo único que nos falta es declarar que nuestra aplicación utiliza la cámara para poder utilizarla. Para ello vamos al manifiesto de nuestra aplicación (package.appxmanifest), y tildamos webcam dentro de la solapa Capabilities.

image

Con esto ya tendremos nuestra primera aplicación que hace uso de la cámara para capturar una imagen.

Al correrla vemos nuestro botón (si, necesita de un buen diseñador antes de subirla al store Winking smile):

screenshot_11262012_215851

Al tocar el botón por primera vez nos solicita permiso para usar la cámara:

screenshot_11262012_220008

Y si le damos permiso, veremos nuestra propia cámara para tomar una foto!

screenshot_11262012_220114

Tocando en la pantalla sacaremos nuestra foto, la cual podremos recortar o rehacer, si quisiéramos:

screenshot_11262012_220150

Y luego de darle OK, volvemos a nuestra aplicación, con el mensaje indicando que la foto fue tomada:

screenshot_11262012_220155

Espero que el ejemplo les sea útil.

Happy coding!

@gjbellmann

Anuncio publicitario

10 comentarios en “Usando la cámara en una aplicación Windows 8

  1. carlos

    cometi el error de darle bloquear, como le doy de nuevo permisos, no he podido utilizar mi cam, devere desinstalar la api?, gracias por tu aporte 🙂

    Responder
    1. gbellmann Autor

      Carlos, no necesitas desinstalar nada. Hay 2 opciones:
      1) Con la app abierta, ir a los settings -> permissions y habilitarle la cámara.
      2) Desinstalar la app, y volver a correrla, normalmente vuelve a solicitar el permiso.
      Saludos!

      Responder
  2. felipe

    me paso los mismo se me bloqueo la camara , bueno yo lo bloquie y ahora nose como desbloquear nose donde queda settings :C

    Responder

Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.