Como espelhar o vídeo (HTML)

Artigo
02/16/2016

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

O espelhamento da imagem de visualização é útil para aplicativos de videoconferência e de bate-papo de vídeo. Geralmente, o usuário deseja ver uma imagem refletida de si próprio. A exibição "correta" (não espelhada) pode parecer estranha, porque estamos acostumados a nos ver em um espelho.

Observação Você pode usar SetPreviewMirroring e GetPreviewMirroring, conforme descrito nas instruções abaixo, para girar a imagem de visualização horizontalmente. No entanto, para o aplicativo do Tempo de Execução do Windows em JavaScript, a maneira preferida e mais eficiente de espelhar o vídeo na visualização é usar a propriedade msHorizontalMirror do objeto video.

Instruções

Etapa 1: Criar o objeto MediaCapture

O objeto MediaCapture contém os métodos, propriedades e operações assíncronas (Initialize Async, Start, Stop, etc.) necessárias para espelhar a imagem de visualização.

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

Etapa 2: Definir espelhamento de visualização

A classe MediaCapture fornece métodos para gerenciar a orientação horizontal da imagem de visualização. GetPreviewMirroring indica se a imagem de visualização é ou não espelhada. SetPreviewMirroring ativa ou desativa o espelhamento horizontal do fluxo de visualização de vídeo.

Este exemplo consulta de o espelhamento horizontal está ativado. O espelhamento horizontal é ativado se estiver desativado.

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

Etapa 3: Iniciar a visualização

Para iniciar a visualização do vídeo, chame o método startPreviewAsync.

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

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

Etapa 4: Parar a visualização

Para parar a visualização, chame o método StopPreviewAsync.

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

Etapa 5: Exemplo completo

Este exemplo mostra como visualizar um vídeo usando espelhamento horizontal. O ponto de entrada neste exemplo é a função StartPreview. Esta função chama uma função para habilitar o espelhamento horizontal e cria o manipulador para o startPreviewOperation começar a visualização.

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();
}

Tópicos relacionados

Exemplo de Captura de Mídia

MediaCapture

Compartilhar via