Capturar fotos y vídeos con la interfaz de usuario de la cámara integrada de WindowsCapture photos and video with the Windows built-in camera UI

En este artículo se describe cómo usar la clase CameraCaptureUI para capturar fotografías o vídeos mediante la interfaz de usuario de la cámara integrada en Windows.This article describes how to use the CameraCaptureUI class to capture photos or videos by using the camera UI built into Windows. Esta característica es fácil de usar.This feature is easy to use. Permite que la aplicación obtenga una foto o un vídeo capturado por el usuario con solo unas pocas líneas de código.It allows your app to get a user-captured photo or video with just a few lines of code.

Si desea proporcionar su propia interfaz de usuario de la cámara, o si su escenario requiere un control más sólido y de bajo nivel de la operación de captura, debe usar la clase MediaCapture e implementar su propia experiencia de captura.If you want to provide your own camera UI, or if your scenario requires more robust, low-level control of the capture operation, then you should use the MediaCapture class, and implement your own capture experience. Para obtener más información, consulta Captura básica de fotos, audio y vídeo con MediaCapture.For more information, see Basic photo, video, and audio capture with MediaCapture.

Nota

No debe especificar las funcionalidades de la cámara web ni del micrófono en el archivo de manifiesto de la aplicación si la aplicación solo usa CameraCaptureUI.You shouldn't specify the webcam nor microphone capabilities in your app manifest file if your app only uses CameraCaptureUI. Si lo hace, la aplicación se mostrará en la configuración de privacidad de la cámara del dispositivo, pero incluso si el usuario deniega el acceso a la cámara a la aplicación, esto no impedirá que el CameraCaptureUI Capture los medios.If you do, your app will be displayed in the device's camera privacy settings, but even if the user denies camera access to your app, this won't prevent the CameraCaptureUI from capturing media.

Esto es porque la aplicación de cámara integrada de Windows es una aplicación de origen de confianza que requiere que el usuario inicie la captura de fotos, audio y vídeo con la presión de un botón.This is because the Windows built-in camera app is a trusted first-party app that requires the user to initiate photo, audio, and video capture with a button press. La aplicación puede producir un error de certificación del kit de certificación de aplicaciones de Windows cuando se envía a Microsoft Store si especifica las funcionalidades de cámara web o micrófono al usar CameraCaptureUI como el único mecanismo de captura de fotos.Your app may fail Windows Application Certification Kit certification when submitted to Microsoft Store if you specify the webcam or microphone capabilities when using CameraCaptureUI as your only photo capture mechanism.

Debe especificar las capacidades de cámara web o micrófono en el archivo de manifiesto de la aplicación si está usando MediaCapture para capturar audio, fotos o vídeo mediante programación.You must specify the webcam or microphone capabilities in your app manifest file if you're using MediaCapture to capture audio, photos, or video programmatically.

Capturar una foto con CameraCaptureUICapture a photo with CameraCaptureUI

Para usar la interfaz de usuario de captura de cámara, incluye el espacio de nombres Windows.Media.Capture en el proyecto.To use the camera capture UI, include the Windows.Media.Capture namespace in your project. Para realizar operaciones de archivo con el archivo de imagen devuelto, incluye Windows.Storage.To do file operations with the returned image file, include Windows.Storage.

using Windows.Media.Capture;
using Windows.Storage;
#include <winrt/Windows.Media.Capture.h>
#include <winrt/Windows.Media.Playback.h>
#include <winrt/Windows.Storage.h>
using namespace winrt;
using namespace Windows::Media::Capture;
using namespace Windows::Storage;

Para capturar una foto, crea un objeto CameraCaptureUI nuevo.To capture a photo, create a new CameraCaptureUI object. Mediante el uso de la propiedad Fotosettings del objeto, puede especificar las propiedades de la foto devuelta, como el formato de imagen de la fotografía.By using the object's PhotoSettings property, you can specify properties for the returned photo, such as the image format of the photo. De forma predeterminada, la interfaz de usuario de captura de cámara permite recortar la foto antes de que se devuelva.By default, the camera capture UI supports cropping the photo before it's returned. Se puede deshabilitar con la propiedad AllowCropping .This can be disabled with the AllowCropping property. Este ejemplo establece CroppedSizeInPixels para solicitar que la imagen devuelta sea de 200 x 200 píxeles.This example sets the CroppedSizeInPixels to request that the returned image be 200 x 200 in pixels.

Nota

El recorte de imagen en CameraCaptureUI no es compatible con dispositivos de la familia de dispositivos móviles.Image cropping in the CameraCaptureUI isn't supported for devices in the Mobile device family. El valor de la propiedad AllowCropping se omite cuando se ejecuta la aplicación en estos dispositivos.The value of the AllowCropping property is ignored when your app is running on these devices.

Realiza una llamada a CaptureFileAsync y especifica CameraCaptureUIMode.Photo para especificar que se debe capturar una foto.Call CaptureFileAsync and specify CameraCaptureUIMode.Photo to specify that a photo should be captured. El método devuelve una instancia StorageFile que contiene la imagen si la captura se realiza correctamente.The method returns a StorageFile instance containing the image if the capture is successful. Si el usuario cancela la captura, el objeto devuelto es null.If the user cancels the capture, the returned object is null.

CameraCaptureUI captureUI = new CameraCaptureUI();
captureUI.PhotoSettings.Format = CameraCaptureUIPhotoFormat.Jpeg;
captureUI.PhotoSettings.CroppedSizeInPixels = new Size(200, 200); 

StorageFile photo = await captureUI.CaptureFileAsync(CameraCaptureUIMode.Photo);

if (photo == null)
{
    // User cancelled photo capture
    return;
}
CameraCaptureUI captureUI;
captureUI.PhotoSettings().Format(CameraCaptureUIPhotoFormat::Jpeg);
captureUI.PhotoSettings().CroppedSizeInPixels({ 200, 200 });

StorageFile photo = co_await captureUI.CaptureFileAsync(CameraCaptureUIMode::Photo);

if (!photo)
{
    // User cancelled photo capture
    co_return;
}

A la clase StorageFile que contiene la foto capturada se le asigna un nombre generado dinámicamente y se guarda en la carpeta local de la aplicación.The StorageFile containing the captured photo is given a dynamically generated name and saved in your app's local folder. Para organizar mejor las fotos capturadas, puede trasladar el archivo a una carpeta diferente.To better organize your captured photos, you can move the file to a different folder.

StorageFolder destinationFolder = 
    await ApplicationData.Current.LocalFolder.CreateFolderAsync("ProfilePhotoFolder", 
        CreationCollisionOption.OpenIfExists);

await photo.CopyAsync(destinationFolder, "ProfilePhoto.jpg", NameCollisionOption.ReplaceExisting);
await photo.DeleteAsync();
StorageFolder destinationFolder =
    co_await ApplicationData::Current().LocalFolder().CreateFolderAsync(L"ProfilePhotoFolder",
        CreationCollisionOption::OpenIfExists);

co_await photo.CopyAsync(destinationFolder, L"ProfilePhoto.jpg", NameCollisionOption::ReplaceExisting);
co_await photo.DeleteAsync();

Para usar la foto en la aplicación, tal vez quieras crear un objeto SoftwareBitmap que se puede usar con varias características diferentes de una aplicación universal de Windows.To use your photo in your app, you may want to create a SoftwareBitmap object that can be used with several different Universal Windows app features.

En primer lugar, incluya el espacio de nombres Windows. Graphics. Imaging en el proyecto.First, include the Windows.Graphics.Imaging namespace in your project.

using Windows.Storage.Streams;
using Windows.Graphics.Imaging;
#include <winrt/Windows.Graphics.Imaging.h>
#include <winrt/Windows.Storage.Streams.h>
using namespace Windows::Graphics::Imaging;
using namespace Windows::Storage::Streams;

Realiza una llamada a OpenAsync para obtener una secuencia del archivo de imagen.Call OpenAsync to get a stream from the image file. Realiza una llamada a BitmapDecoder.CreateAsync para obtener un descodificador de mapa de bits de la secuencia.Call BitmapDecoder.CreateAsync to get a bitmap decoder for the stream. A continuación, llame a GetSoftwareBitmap para obtener una representación de SoftwareBitmap de la imagen.Then, call GetSoftwareBitmap to get a SoftwareBitmap representation of the image.

IRandomAccessStream stream = await photo.OpenAsync(FileAccessMode.Read);
BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream);
SoftwareBitmap softwareBitmap = await decoder.GetSoftwareBitmapAsync();
IRandomAccessStream stream = co_await photo.OpenAsync(FileAccessMode::Read);
BitmapDecoder decoder = co_await BitmapDecoder::CreateAsync(stream);
SoftwareBitmap softwareBitmap = co_await decoder.GetSoftwareBitmapAsync();

Para mostrar la imagen en la interfaz de usuario, declara un control de Image en la página XAML.To display the image in your UI, declare an Image control in your XAML page.

Para usar el mapa de bits de software en tu página XAML, incluye el espacio de nombres Windows.UI.Xaml.Media.Imaging de "using" en el proyecto.To use the software bitmap in your XAML page, include the using Windows.UI.Xaml.Media.Imaging namespace in your project.

using Windows.UI.Xaml.Media.Imaging;
#include <winrt/Windows.UI.Xaml.Media.Imaging.h>
using namespace Windows::UI::Xaml::Media::Imaging;

El control de imagen requiere que el origen de la imagen tenga el formato BGRA8 con alfa premultiplicado o sin alfa.The Image control requires that the image source be in BGRA8 format with premultiplied alpha or no alpha. Llame al método estático SoftwareBitmap. Convert para crear un nuevo mapa de bits de software con el formato deseado.Call the static method SoftwareBitmap.Convert to create a new software bitmap with the desired format. A continuación, cree un nuevo objeto SoftwareBitmapSource y llámelo SetBitmapAsync para asignar el mapa de bits de software al origen.Next, create a new SoftwareBitmapSource object and call it SetBitmapAsync to assign the software bitmap to the source. Por último, establece el control de Image de la propiedad Source del control para mostrar la foto capturada en la interfaz de usuario.Finally, set the Image control's Source property to display the captured photo in the UI.

SoftwareBitmap softwareBitmapBGR8 = SoftwareBitmap.Convert(softwareBitmap,
        BitmapPixelFormat.Bgra8, 
        BitmapAlphaMode.Premultiplied);

SoftwareBitmapSource bitmapSource = new SoftwareBitmapSource();
await bitmapSource.SetBitmapAsync(softwareBitmapBGR8);

imageControl.Source = bitmapSource;
SoftwareBitmap softwareBitmapBGR8 = SoftwareBitmap::Convert(softwareBitmap,
    BitmapPixelFormat::Bgra8,
    BitmapAlphaMode::Premultiplied);

SoftwareBitmapSource bitmapSource;
co_await bitmapSource.SetBitmapAsync(softwareBitmapBGR8);

imageControl().Source(bitmapSource);

Capturar un vídeo con CameraCaptureUICapture a video with CameraCaptureUI

Para capturar un vídeo, crea un objeto CameraCaptureUI nuevo.To capture a video, create a new CameraCaptureUI object. Mediante el uso de la propiedad Videosettings del objeto, puede especificar las propiedades del vídeo devuelto, como el formato del vídeo.By using the object's VideoSettings property, you can specify properties for the returned video, such as the format of the video.

Llame a CaptureFileAsync y especifique el vídeo para capturar un vídeo.Call CaptureFileAsync and specify Video to capture a video. El método devuelve una instancia StorageFile que contiene el vídeo si la captura se realiza correctamente.The method returns a StorageFile instance containing the video if the capture is successful. Si cancela la captura, el objeto devuelto es NULL.If you cancel the capture, the returned object is null.

CameraCaptureUI captureUI = new CameraCaptureUI();
captureUI.VideoSettings.Format = CameraCaptureUIVideoFormat.Mp4;

StorageFile videoFile = await captureUI.CaptureFileAsync(CameraCaptureUIMode.Video);

if (videoFile == null)
{
    // User cancelled photo capture
    return;
}
CameraCaptureUI captureUI;
captureUI.VideoSettings().Format(CameraCaptureUIVideoFormat::Mp4);

StorageFile videoFile = co_await captureUI.CaptureFileAsync(CameraCaptureUIMode::Video);

if (!videoFile)
{
    // User cancelled photo capture
    co_return;
}

Qué hacer con el archivo de vídeo capturado depende del escenario para la aplicación.What you do with the captured video file depends on the scenario for your app. El resto de este artículo muestra cómo crear rápidamente una composición multimedia de uno o más vídeos capturados y mostrarla en la interfaz de usuario.The rest of this article shows you how to quickly create a media composition from one or more captured videos and show it in your UI.

En primer lugar, agregue un control MediaPlayerElement en el que la composición de vídeo se mostrará en la página XAML.First, add a MediaPlayerElement control in which the video composition will display on your XAML page.

<MediaPlayerElement x:Name="mediaPlayerElement" Width="320" Height="240" AreTransportControlsEnabled="True"/>

Cuando el archivo de vídeo vuelva de la interfaz de usuario de captura de cámara, cree un nuevo MediaSource llamando a CreateFromStorageFile.When the video file returns from the camera capture UI, create a new MediaSource by calling CreateFromStorageFile. Llame al método Play del objeto MediaPlayer predeterminado asociado a la clase MediaPlayerElement para reproducir el vídeo.Call the Play method of the default MediaPlayer associated with the MediaPlayerElement to play the video.

mediaPlayerElement.Source = MediaSource.CreateFromStorageFile(videoFile);
mediaPlayerElement.MediaPlayer.Play();
mediaPlayerElement().Source(MediaSource::CreateFromStorageFile(videoFile));
mediaPlayerElement().MediaPlayer().Play();