Langage: HTML | XAML

Démarrage rapide : capture de vidéos à l’aide de l’API MediaCapture

Applies to Windows and Windows Phone

Cette rubrique vous montre comment capturer de la vidéo dans un fichier à l’aide de l’API Windows.Media.Capture. Vous pouvez utiliser l’API Windows.Media.Capture pour contrôler l’opération de capture asynchrone, sélectionner un profil d’encodage et envoyer la vidéo qui en résulte dans un fichier.

Pour obtenir un autre exemple de capture d’élément multimédia dans une application Windows Runtime en JavaScript, voir Exemple de capture multimédia.

Objectif: Ce didacticiel montre comment capturer de la vidéo à l’aide de l’API Windows.Media.Capture.

Prérequis

Cette rubrique part du principe que vous savez créer une application Windows Runtime de base en JavaScript. Pour obtenir de l’aide lors de la création de votre première application, voir Créer votre première application du Windows Store en JavaScript.

Instructions

Déclarer la fonctionnalité de webcam

Utilisez le concepteur du fichier manifeste de l’application pour ajouter la fonctionnalité de webcam. Sélectionnez l’onglet Capacités, puis sélectionnez Webcam dans la liste.

Initialiser la classe MediaCaptureSettings

La propriété MediaCaptureSettings fournit les paramètres de configuration pour l’objet MediaCapture. Utilisez la classe MediaCaptureInitializationSettings pour initialiser ces propriétés, comme dans l’exemple suivant.


// 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;
    captureInitSettings.realTimeModeEnabled = true;
    if (deviceList.length > 0)
        captureInitSettings.videoDeviceId = deviceList[0].id;
}



Créer l’objet MediaCapture

L’objet MediaCapture contient les méthodes et opérations asynchrones dont vous avez besoin pour capturer une vidéo.


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


Initialiser l’objet MediaCapture

Utilisez la méthode MediaCapture.InitializeAsync pour initialiser l’objet MediaCapture. Par défaut, InitializeAsync utilise le périphérique de capture vidéo par défaut et capture soit de l’audio soit de la vidéo. Sinon, vous pouvez créer et initialiser votre propre objet MediaCaptureInitializationSettings et le passer à la méthode InitializeAsync.


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


Créer un profil d’encodage

Le profil d’encodage contient tous les paramètres d’encodage du fichier de destination. L’API MediaProperties offre plusieurs options pour créer un objet MediaEncodingProfile.

L’espace de noms Windows.Media.MediaProperties fournit un ensemble de profils d’encodage prédéfinis :

  • Audio AAC (M4A)
  • Audio MP3
  • Audio Windows Media (WMA)
  • Vidéo MP4 (vidéo H.264 plus audio AAC)
  • Vidéo Windows Media (WMV)

Les trois premiers profils de cette liste contiennent uniquement de l’audio. Les deux autres contiennent de la vidéo et de l’audio.

Le code suivant crée un profil pour la vidéo MP4.


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


La méthode CreateMp4 statique crée un profil d’encodage MP4. Le paramètre pour cette méthode indique la résolution cible de la vidéo. Dans ce cas, VideoEncodingQuality.HD720p signifie 1280 x 720 pixels à 30 images par seconde. ("720p" correspond à un balayage progressif de 720 lignes par image.) Les autres méthodes de création de profils prédéfinis suivent toutes ce modèle.

Sinon, vous pouvez créer un profil qui correspond à un fichier multimédia existant à l’aide de la méthode MediaProperties.MediaEncodingProfile.CreateFromFileAsync. Ou encore, si vous savez exactement quels paramètres d’encodage vous voulez, vous pouvez créer un objet MediaProperties.MediaEncodingProfile et remplir tous les détails de profil.

Démarrer l’enregistrement

Pour commencer à capturer une vidéo dans un fichier, créez un fichier pour la vidéo capturée. Ensuite, appelez la méthode StartRecordToStorageFileAsync, et passez-lui le profil MediaEncodingProfile et le fichier de stockage de destination.


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


Arrêter l’enregistrement

Pour arrêter la capture de la vidéo, appelez la méthode StopRecordAsync.


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


Exemple complet

L’exemple suivant montre comment les étapes de capture de vidéo dans un fichier s’enchaînent.



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;
    captureInitSettings.realTimeModeEnabled = true;
    if (deviceList.length > 0)
        captureInitSettings.videoDeviceId = deviceList[0].id;
}


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

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


Nettoyage correct de ressources MediaCapture

Avertissement  

Il est extrêmement important d’arrêter et de supprimer correctement l’objet MediaCapture et les objets qui lui sont associés quand votre application est interrompue. Sinon, d’autres applications accédant à l’appareil photo de l’appareil peuvent être perturbées, ce qui génère une expérience négative pour l’utilisateur avec votre application.

Sur Windows Phone, nettoyez vos ressources MediaCapture dans le gestionnaire de l’événement de durée de vie d’application oncheckpoint. Sur Windows, utilisez les événements SoundLevelChanged et vérifiez si le son a été désactivé. Si c’est le cas, nettoyez les ressources MediaCapture. Si l’événement indique un niveau sonore autre que Muet, utilisez-le pour les recréer. Notez que cet événement ne déclenchera pas votre code, même si vous activez/désactivez manuellement le son pendant que l’application est en cours d’exécution. Cet événement joue en fait le même rôle que Suspend et Resume sur un téléphone. Cela est nécessaire car, sur Windows, l’utilisateur peut passer d’une application à l’autre sans que l’application active soit suspendue.

Vous devez nettoyer les ressources de capture multimédia dans l’événement oncheckpoint sur Windows Phone ou dans l’événement SoundLevelChanged sur Windows, comme indiqué dans les instructions de la remarque ci-dessus. Un moyen efficace de procéder consiste à déclarer certaines variables pour stocker l’objet MediaCapture et des valeurs booléennes qui indiquent si l’application est en train d’enregistrer ou de prévisualiser une vidéo. Créez ensuite une fonction qui arrête l’enregistrement ou la prévisualisation s’ils sont en cours, qui appelle la méthode close de l’objet MediaCapture, puis qui lui affecte la valeur null. Le code suivant présente un exemple d’implémentation de cette méthode.


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


Enfin, ajoutez le code suivant à votre gestionnaire d’événements oncheckpoint. Il est très important que vous utilisiez une promesse pour appeler votre méthode de nettoyage. Cela permet de s’assurer que le système laisse la méthode se terminer avant d’interrompre votre application.


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


Récapitulatif

Cette rubrique a décrit comment capturer de la vidéo à l’aide de la classe MediaCapture.

Rubriques associées

Feuilles de route
Feuille de route pour les applications du Windows Store en JavaScript
Conception de l’expérience utilisateur des applications
Ajout d’éléments multimédias
Exemples
Exemple de capture multimédia
Exemple CameraCaptureUI
Exemple CameraOptionsUI
Exemple d’énumération de périphérique
Exemple de communication en temps réel
Exemple d’extension multimédia
Tâches
Démarrage rapide : capture d’une photo ou d’une vidéo à l’aide du dialogue de la caméra
Référence
Windows.Media
Windows.Media.Capture
Windows.Media.Devices
Windows.Media.MediaProperties
Éléments audio et vidéo HTML5
Autres ressources
Formats audio et vidéo pris en charge
Performances audio et vidéo

 

 

Afficher:
© 2014 Microsoft