So wird's gemacht: Spiegeln des Videos (HTML)

Artikel
02/16/2016

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Das Spiegeln des Vorschaubilds ist vor allem für Videokonferenzen und Videochatanwendungen hilfreich. Im Allgemeinen möchten Benutzer ein gespiegeltes Bild von sich sehen. Die "richtige" (nicht gespiegelte) Ansicht kann merkwürdig wirken, da wir es gewohnt sind, uns in einem Spiel anzuschauen.

Hinweis Sie können SetPreviewMirroring und GetPreviewMirroring wie im Folgenden beschrieben verwenden, um das Vorschaubild horizontal zu spiegeln. Bei Windows-Runtime-Apps mit JavaScript ist es aber am effizientesten und daher empfehlenswert, das Vorschauvideo zu spiegeln, anstatt die msHorizontalMirror-Eigenschaft des video-Objekts zu verwenden.

Anweisungen

Schritt 1: Erstellen des MediaCapture-Objekts

Das MediaCapture-Objekt enthält die Methoden, Eigenschaften und asynchronen Vorgänge (Initialisieren asynchroner Vorgänge, Starten, Stoppen usw.), die Sie zum Spiegel des Vorschaubilds benötigen.

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

Schritt 2: Festlegen der Spiegelung der Vorschau

Die MediaCapture-Klasse stellt Methoden zum Verwalten der horizontalen Ausrichtung des Vorschaubilds bereit. GetPreviewMirroring legt fest, ob das Vorschaubild gespielt wird oder nicht. SetPreviewMirroring aktiviert oder deaktiviert die horizontale Spiegelung des Videovorschau-Datenstroms.

In diesem Beispiel wird abgefragt, ob die horizontale Spiegelung aktiviert ist. Die horizontale Spiegelung wird aktiviert, wenn sie deaktiviert ist.

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

Schritt 3: Starten der Vorschau

Um die Videovorschau zu starten, rufen Sie die startPreviewAsync-Methode auf.

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

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

Schritt 4: Beenden der Vorschau

Um die Videovorschau zu beenden, rufen Sie die StopPreviewAsync-Methode auf.

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

Schritt 5: Vollständiges Beispiel

Dieses Beispiel zeigt, wie Sie eine Vorschau eines Videos mithilfe der horizontalen Spiegelung anzeigen. Der Einstiegspunkt in diesem Beispiel ist die StartPreview-Funktion. Diese Funktion ruft eine Funktion auf, um die horizontale Spiegelung zu aktivieren, und erstellt den Handler für startPreviewOperation, um die Vorschau zu starten.

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