Démarrage rapide : capture d’une photo ou d’une vidéo à partir de l’interface utilisateur de capture de la caméra (HTML)

Article
02/12/2016

[ 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 ]

Cette rubrique vous montre le moyen le plus simple de capturer une photo ou une vidéo depuis votre caméra incorporée ou attachée, à l’aide de l’API CameraCaptureUI. Cette API lance un dialogue plein écran qui présente une IU de caméra, et vous permet de capturer une photo ou une vidéo avec un simple appel de méthode.

Comme alternative, si vous souhaitez créer votre propre interface utilisateur plutôt que d’utiliser celle fournie par la classe CameraCaptureUI, utilisez MediaCapture. Pour plus d’informations, voir Démarrage rapide : capture de vidéos à l’aide de l’API MediaCapture.

Objectif: Capturez une photo ou une vidéo à partir d’une webcam.

Prérequis

Vous devez être familiarisé avec JavaScript, et avoir installé Microsoft Visual Studio sur Windows 8.

Durée de réalisation: 20 minutes.

Instructions

1. Ouvrir Visual Studio

Ouvrez une instance de Visual Studio.

2. Créer un projet

Dans la boîte de dialogue Nouveau projet, choisissez une application vide dans les types de projets JavaScript.

3. Insérer les codes JavaScript et HTML de l’application

Ouvrez votre fichier Default.html, puis copiez-y le code HTML suivant (en remplaçant le contenu d’origine du fichier).

<!DOCTYPE html>
<html>
<head>   
   <title>WinWebApp1</title>
   <!-- WinJS references -->
   <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
   <script src="/winjs/js/base.js"></script>
   <script src="/winjs/js/wwaapp.js"></script>
   <!-- WinWebApp1 references -->
   <link rel="stylesheet" href="/css/default.css" />
    
   <script type = "text/javascript" >

   // Takes a photo using the default JPEG format.
   function takepicture() {
      var captureUI = new Windows.Media.Capture.CameraCaptureUI();
      captureUI.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).then(function (capturedItem) {
         if (capturedItem) {
             document.getElementById("message").innerHTML = "User captured a photo."
         }
         else {
             document.getElementById("message").innerHTML = "User didn't capture a photo."
         }
      });
   }
   </script>
</head>
<body>
   <input type="button" onclick="takepicture()" value="Take a Picture" /><br />
   <span id="message"></span>
</body>
</html>

4. 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.

5. Générer l’application

Sélectionnez Générer > Générer la solution pour générer le projet.

6. Tester l’application

Choisissez Déboguer > Démarrer le débogage pour tester la solution.
Cliquez sur Prendre une photo pour prendre une photographie.

Récapitulatif

Vous venez de prendre une photo à l’aide des paramètres par défaut. Vous pouvez aussi spécifier un autre format ou une proportion différente, ou enregistrer une vidéo.

Pour capturer une photo avec une proportion de 4:3 dans le format PNG, insérez ce code au-dessus de l’appel pour capturer FileAsync dans le code que vous avez collé dans votre application.
```
captureUI.photoCaptureSettings.format = Windows.Media.Capture.CameraCaptureUIPhotoFormat.png;
captureUI.photoCaptureSettings.croppedAspectRatio = {width:4, height:3};
```

Rubriques associées

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

Exemple de capture multimédia

Partager via