So wird’s gemacht: Aufzeichnen von Audio oder Video (HTML)
[ 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 ]
Sie können Videodaten der Kamera und/oder Audiodaten des Mikrofons aufzeichnen.
Anweisungen
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 Windows.Media.MediaProperties-API bietet verschiedene Optionen zum Erstellen eines MediaEncodingProfile-Objekts.
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 Windows.Media.MediaProperties.MediaEncodingProfile.CreateFromFileAsync-Methode ein Profil erstellen, das einer vorhandenen Mediendatei entspricht. Falls Sie die genauen Codierungseinstellungen kennen, können Sie auch ein neues Windows.Media.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
Das folgende Beispiel zeigt sämtliche Schritte zum Aufzeichnen eines Videos.
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()
);
};