Comment enregistrer de l’audio ou de la vidéo (HTML)

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Vous pouvez enregistrer de la vidéo depuis la caméra et/ou du son depuis le microphone.

Instructions

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;
    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 Windows.Media.MediaProperties fournit 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.hd720p);
}

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 Windows.Media.MediaProperties.MediaEncodingProfile.CreateFromFileAsync. Ou encore, si vous savez exactement quels paramètres d’encodage vous voulez, vous pouvez créer un objet Windows.Media.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 d’enregistrement de la 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;
    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);         
}

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

Rubriques associées

Exemple de capture multimédia