Cómo reflejar el vídeo (HTML)

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

El reflejo de la imagen de vista previa resulta útil en aplicaciones de videoconferencias o videochats. Generalmente los usuarios desean ver una imagen reflejada de sí mismos. La vista "correcta" (no reflejada) puede resultar extraña, porque estamos acostumbrados a mirarnos en un espejo.

Nota   Puedes usar SetPreviewMirroring y GetPreviewMirroring, tal como se describe en las instrucciones que aparecen a continuación, para voltear la imagen de vista previa horizontalmente. Sin embargo, para las aplicaciones de Windows en tiempo de ejecución con JavaScript, la manera preferida y más eficaz de reflejar el vídeo de vista previa es usar la propiedad msHorizontalMirror del objeto video.

Instrucciones

Paso 1: Crear el objeto MediaCapture

El objeto MediaCapture contiene los métodos, propiedades y operaciones asincrónicas (Initialize Async, Start, Stop, etc.) que se necesitan para reflejar la imagen de vista previa.

    oMediaCapture = new Windows.Media.Capture.MediaCapture();
    oMediaCapture.initializeAsync().then(function (result) {

Paso 2: Establecer la creación de reflejo de vista previa

La clase MediaCapture proporciona métodos para administrar la orientación horizontal de la imagen de vista previa. GetPreviewMirroring indica si la imagen de vista previa se refleja o no. SetPreviewMirroring habilita o deshabilita la creación de reflejo horizontal de la secuencia de vista previa de vídeo.

Este ejemplo consulta si la creación de reflejo horizontal está habilitada. Si la creación de reflejo horizontal está deshabilitada, se habilita.

    if( !oMediaCapture.getPreviewMirroring() )
        oMediaCapture.setPreviewMirroring(true);

Paso 3: Iniciar la vista previa

Para iniciar la vista previa de vídeo, llama al método startPreviewAsync.

// Start Previewing
await _mediaCapture.StartPreviewAsync();
(App.Current as App).IsPreviewing = true;
    // Start Previewing
    var startPreviewOperation = oMediaCapture.startPreviewAsync();

Paso 4: Detener la vista previa

Para detener la vista previa, llama al método StopPreviewAsync.

    // Set the handler for the StopPreviewOperation.    
    var stopPreviewOperation = oMediaCapture.stopPreviewAsync();

Paso 5: Ejemplo completo

En este ejemplo se muestra cómo obtener una vista previa de un vídeo mediante la creación de reflejo horizontal. El punto de entrada de este ejemplo es la función StartPreview. Esta función llama a otra para habilitar la creación de reflejo horizontal y crea el controlador de startPreviewOperation para comenzar la vista previa.

var oMediaCapture;
var profile;

function turnMirroringOn()
{
    if( !oMediaCapture.getPreviewMirroring() )
        oMediaCapture.setPreviewMirroring(true);
}

function OnStartPreviewComplete(startPreviewOperation)
{
    // This method does not return a value.
    //
    startPreviewOperation.GetResults();
    // Set the handler for the StopPreviewOperation.    
    var stopPreviewOperation = oMediaCapture.stopPreviewAsync();

    stopPreviewOperation.Completed = OnStopPreviewComplete;
    stopPreviewOperation.Start();

    startPreviewOperation.Close();
}

function OnStopPreviewComplete(stopPreviewOperation)
{
    // This method does not return a value.
    //
    stopPreviewOperation.GetResults();

    stopPreviewOperation.Close();
}

function startPreview()
{

    oMediaCapture = new Windows.Media.Capture.MediaCapture();
    oMediaCapture.initializeAsync().then(function (result) {
        createProfile();
    }, errorHandler);
    // Enable horizontal mirroring.
    //
    turnMirroringOn();

    // Start Previewing
    var startPreviewOperation = oMediaCapture.startPreviewAsync();
    startPreviewOperation.Completed = OnStartPreviewComplete;
    startPreviewOperation.Start();
}

Temas relacionados

Muestra de captura de multimedia

MediaCapture