Schnellstart: Aufzeichnen von Video mit der MediaCapture-API

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 ]

In diesem Thema wird erläutert, wie Sie Video mithilfe der Windows.Media.Capture-API in einer Datei aufzeichnen. Sie können die Windows.Media.Capture-API zum Steuern des asynchronen Aufzeichnungsvorgangs, zum Auswählen eines Codierungsprofils und zum Senden des erstellten Videos an eine Datei verwenden.

Ein weiteres Beispiel zum Aufzeichnen von Medien in einer Windows-Runtime-App mit JavaScript finden Sie im Beispiel für Medienaufzeichnungen.

Ziel: In diesem Lernprogramm wird dargestellt, wie Sie mithilfe der Windows.Media.Capture-API Video aufzeichnen.

Voraussetzungen

In diesem Thema wird davon ausgegangen, dass Sie eine einfache Windows-Runtime-App mit JavaScript erstellen können. Informationen zum Erstellen der ersten App finden Sie unter Erstellen Ihrer ersten Windows Store-App mit JavaScript.

Anweisungen

Deklarieren der Webcamfunktion

Verwenden Sie den Designer der App-Manifestdatei, um die Webcamfunktion hinzuzufügen. Wählen Sie die Registerkarte Funktionen und dann Webcam aus der Liste aus.

Initialisieren der MediaCaptureSettings

Die MediaCaptureSettings-Eigenschaft stellt die Konfigurationseinstellungen für das MediaCapture-Objekt bereit. Verwenden Sie wie im folgenden Beispiel gezeigt die MediaCaptureInitializationSettings-Klasse, um diese Eigenschaften zu initialisieren.

// Initialize the MediaCaptureInitialzationSettings.
function initCaptureSettings() {
    captureInitSettings = null;
    captureInitSettings = new Windows.Media.Capture.MediaCaptureInitializationSettings();
    captureInitSettings.audioDeviceId = "";
    captureInitSettings.videoDeviceId = "";
    captureInitSettings.streamingCaptureMode = Windows.Media.Capture.StreamingCaptureMode.audioAndVideo;
    captureInitSettings.photoCaptureSource = Windows.Media.Capture.PhotoCaptureSource.videoPreview;
    if (deviceList.length > 0)
        captureInitSettings.videoDeviceId = deviceList[0].id;
}

Erstellen des MediaCapture-Objekts

Das MediaCapture-Objekt enthält die Methoden und asynchronen Vorgänge, die Sie zum Aufzeichnen eines Videos benötigen.

    oMediaCapture = new Windows.Media.Capture.MediaCapture();

Initialisieren des MediaCapture-Objekts

Verwenden Sie die MediaCapture.InitializeAsync-Methode, um das MediaCapture-Objekt zu initialisieren. InitializeAsync verwendet das standardmäßige Videoaufzeichnungsgerät und zeichnet entweder Audio- oder Videodaten auf. Alternativ können Sie ein eigenes MediaCaptureInitializationSettings-Objekt erstellen und initialisieren und an die InitializeAsync-Methode übergeben.

// Create and initialze the MediaCapture object.
function initMediaCapture() {
    oMediaCapture = null;
    oMediaCapture = new Windows.Media.Capture.MediaCapture();
    oMediaCapture.initializeAsync(captureInitSettings).then (function (result) {
       createProfile();
    }, errorHandler);    
}

Erstellen eines Codierungsprofils

Das Codierungsprofil enthält alle Einstellungen für die Codierung der Zieldatei. Die MediaProperties-API stellt verschiedene Optionen zum Erstellen eines MediaEncodingProfile-Objekts bereit.

Der Windows.Media.MediaProperties-Namespace stellt einen Satz vordefinierter Codierungsprofile bereit:

AAC-Audio (M4A)
MP3-Audio
Windows Media Audio (WMA)
MP4-Video (H.264-Video und AAC-Audio)
Windows Media Video (WMV)

Die ersten drei Profile in der Liste enthalten nur Audio. Die anderen zwei Profile enthalten Video und Audio.

Der folgende Code erstellt ein Profil für MP4-Video.

// Create a profile.
function createProfile() {
    profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
        Windows.Media.MediaProperties.VideoEncodingQuality.hd720p);
}

Die statische CreateMp4-Methode erstellt ein MP4-Codierungsprofil. Der Parameter dieser Methode bestimmt die Zielauflösung für das Video. In diesem Fall bedeutet VideoEncodingQuality.HD720p 1280 x 720 Pixel mit 30 Frames pro Sekunde. ("720p" steht für 720 progressive Scanlinien pro Frame.) Die anderen Methoden für das Erstellen vordefinierter Profile folgen diesem Muster.

Alternativ können Sie mit der MediaProperties.MediaEncodingProfile.CreateFromFileAsync-Methode ein Profil erstellen, das einer vorhandenen Mediendatei entspricht. Falls Sie die genauen Codierungseinstellungen kennen, können Sie auch ein neues MediaProperties.MediaEncodingProfile-Objekt erstellen und sämtliche Profildetails eingeben.

Starten der Aufzeichnung

Um die Aufzeichnung eines Videos in einer Datei zu starten, erstellen Sie eine Datei für das aufgezeichnete Video. Rufen Sie anschließend die StartRecordToStorageFileAsync-Methode auf, und übergeben Sie MediaEncodingProfile sowie die Zielspeicherdatei.

// Start the video capture.
function startMediaCaptureSession() {
   Windows.Storage.KnownFolders.videosLibrary.createFileAsync("cameraCapture.mp4", Windows.Storage.CreationCollisionOption.generateUniqueName).then(function (newFile) {
        storageFile = newFile;
        oMediaCapture.startRecordToStorageFileAsync(profile, storageFile).then(function (result) {           
           
        }, errorHandler);
    }  );   
}

Beenden der Aufzeichnung

Um die Videoaufzeichnung zu beenden, rufen Sie die StopRecordAsync-Methode auf.

// Stop the video capture.
function stopMediaCaptureSession() {
    oMediaCapture.stopRecordAsync().then(function (result) {
        
    }, errorHandler);         
}

Vollständiges Beispiel

Im folgenden Beispiel sind die Schritte zum Aufzeichnen des Videos in einer Datei zusammengefasst.


var oMediaCapture;
var profile;
var captureInitSettings;
var deviceList = new Array();
var recordState = false;
var storageFile;



function errorHandler(e) {
    sdkSample.displayStatus(e.message + ", Error Code: " + e.code.toString(16));
}



// Begin initialization.
function initialization() {
    document.getElementById("message").innerHTML = "Initialization started.";
    enumerateCameras();   
}


// Identify available cameras.
function enumerateCameras() {
    var deviceInfo = Windows.Devices.Enumeration.DeviceInformation;
    deviceInfo.findAllAsync(Windows.Devices.Enumeration.DeviceClass.videoCapture).then(function (devices) {
        // Add the devices to deviceList
        if (devices.length > 0) {
           
            for (var i = 0; i < devices.length; i++) {
                deviceList.push(devices[i]);              
            }
     
            initCaptureSettings();
            initMediaCapture();
            document.getElementById("message").innerHTML = "Initialization complete.";

        } else {
            sdkSample.displayError("No camera device is found ");            
        }
    }, errorHandler);
}


// Initialize the MediaCaptureInitialzationSettings.
function initCaptureSettings() {
    captureInitSettings = null;
    captureInitSettings = new Windows.Media.Capture.MediaCaptureInitializationSettings();
    captureInitSettings.audioDeviceId = "";
    captureInitSettings.videoDeviceId = "";
    captureInitSettings.streamingCaptureMode = Windows.Media.Capture.StreamingCaptureMode.audioAndVideo;
    captureInitSettings.photoCaptureSource = Windows.Media.Capture.PhotoCaptureSource.videoPreview;
    if (deviceList.length > 0)
        captureInitSettings.videoDeviceId = deviceList[0].id;
}


// Create a profile.
function createProfile() {
    profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
        Windows.Media.MediaProperties.VideoEncodingQuality.hd720p);
}

// Create and initialze the MediaCapture object.
function initMediaCapture() {
    oMediaCapture = null;
    oMediaCapture = new Windows.Media.Capture.MediaCapture();
    oMediaCapture.initializeAsync(captureInitSettings).then (function (result) {
       createProfile();
    }, errorHandler);    
}


// Start the video capture.
function startMediaCaptureSession() {
   Windows.Storage.KnownFolders.videosLibrary.createFileAsync("cameraCapture.mp4", Windows.Storage.CreationCollisionOption.generateUniqueName).then(function (newFile) {
        storageFile = newFile;
        oMediaCapture.startRecordToStorageFileAsync(profile, storageFile).then(function (result) {           
           
        }, errorHandler);
    }  );   
}

// Stop the video capture.
function stopMediaCaptureSession() {
    oMediaCapture.stopRecordAsync().then(function (result) {
        
    }, errorHandler);         
}

Korrekte Bereinigung von MediaCapture-Ressourcen

Warnung

Es ist äußerst wichtig, dass Sie das MediaCapture-Objekt und verwandte Objekte beim Anhalten Ihrer App korrekt beenden und löschen. Andernfalls können andere Apps, die auf die Kamera des Geräts zugreifen, gestört werden, und bei Benutzern entsteht der Eindruck, dass Ihre App nicht benutzerfreundlich ist.

Unter Windows Phone können Sie Ihre MediaCapture-Ressourcen im Handler für das App-Lebensdauerereignis oncheckpoint bereinigen. Unter Windows verwenden Sie die SoundLevelChanged-Ereignisse und überprüfen, ob der Ton ausgeschaltet wurde. Wenn dies der Fall ist, bereinigen Sie die MediaCapture-Ressourcen. Signalisiert das Ereignis eine andere Lautstärke, verwenden Sie das Ereignis, um die Ressourcen neu zu erstellen. Dieses Ereignis löst Ihren Code selbst dann nicht aus, wenn Sie den Ton aus-/einschalten, während die App ausgeführt wird. Das Ereignis dient quasi demselben Zweck wie "Anhalten" und "Fortsetzen" auf einem Smartphone. Dies ist notwendig, da der Benutzer unter Windows u. U. zwischen Apps wechseln kann, ohne dass die aktuelle App dadurch angehalten wird.

Sie sollten Medienaufzeichnungsressourcen wie im obigen Hinweis beschrieben im oncheckpoint-Ereignis (Windows Phone) oder im SoundLevelChanged-Ereignis (Windows) bereinigen. Am besten deklarieren Sie zu diesem Zweck einige Variablen zum Speichern des MediaCapture-Objekts und der booleschen Werte, die angeben, ob die App gerade Video aufzeichnet oder als Vorschau anzeigt. Erstellen Sie anschließend eine Funktion, die die Aufzeichnung oder Vorschau beendet (sofern sie ausgeführt wird), die close-Methode des MediaCapture-Objekts aufruft und auf Null festlegt. Der folgende Code zeigt eine Beispielimplementierung dieser Methode.

function cleanupCaptureResources()
{
    var promises = [];

    if (mediaCapture) {
        if (isRecording) {
            promises.push(mediaCapture.stopRecordAsync().then(function () {
                isRecording = false;
            }));
        }

        promises.push(new WinJS.Promise(function (complete) {
            mediaCapture.close();
            mediaCapture = null;
            complete();
        }));
    }

    return WinJS.Promise.join(promises).done(null, errorHandler);
}

Fügen Sie zum Schluss Ihrem oncheckpoint-Ereignishandler den folgenden Code hinzu. Es ist sehr wichtig, dass Sie zum Aufrufen der Bereinigungsmethode eine Zusage verwenden. Dadurch wird sichergestellt, dass das System vor dem Anhalten Ihrer App den Abschluss der Methode abwartet.

app.oncheckpoint = function (args) {
    args.setPromise(
        cleanupCaptureResources()
    );
};

Zusammenfassung

In diesem Thema wird beschrieben, wie Sie mithilfe der MediaCapture-Klasse Video aufzeichnen.

Freigeben über