Démarrage rapide : inscrire une application pour un périphérique de lecture automatique (HTML)

[ Cet article est destiné aux développeurs de 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 inscrire des applications en tant qu’options pour les événements de périphériques de lecture automatique. Les événements de périphériques de lecture automatique sont déclenchés lorsqu’un périphérique est connecté à un PC.

Voici comment identifier votre application en tant qu’option de lecture automatique lorsqu’un appareil photo est connecté à un PC. L’application s’inscrit en tant que gestionnaire de l’événement de lecture automatiqueWPD\ImageSource. Il s’agit d’un événement courant que le système WPD (Windows Portable Device) déclenche lorsque des appareils photo et d’autres périphériques d’acquisition d’images l’avertissent qu’ils sont une source d’image (ImageSource) utilisant MTP. Pour plus d’informations, voir Appareils mobiles Windows.

Si vous êtes fabricant de périphériques et si vous voulez associer votre application du Windows Store pour périphérique en tant que gestionnaire de lecture automatique de votre périphérique, vous pouvez identifier l’application dans les métadonnées du périphérique. Si vous associez votre application en tant qu’application à installation automatique pour l’ID d’expérience de votre périphérique, le système d’exploitation détecte cette association quand votre périphérique est connecté à un PC. Si votre application n’est pas installée sur votre PC, le système d’exploitation la télécharge et l’installe automatiquement. La lecture automatique présente votre application comme première option que l’utilisateur peut choisir comme gestionnaire de votre périphérique. Pour plus d’informations, voir Lecture automatique pour les applications du Windows Store pour périphérique.

Objectif: Créez une application pour gérer un événement de périphérique de lecture automatique.

Prérequis

Microsoft Visual Studio

Instructions

1. Créer un projet et ajouter les déclarations de lecture automatique

1. Ouvrez Visual Studio et sélectionnez Nouveau projet dans le menu Fichier. Dans la section JavaScript, sélectionnez Windows Store. Attribuez à l’application le nom AutoPlayDevice_Camera, puis cliquez sur OK.

2. Ouvrez le fichier Package.appxmanifest, puis sélectionnez l’onglet Capacités. Sélectionnez la fonctionnalité Stockage amovible. Cela permet à l’application d’accéder aux données situées sur l’appareil photo en tant que périphérique de volume de stockage amovible.

3. Dans le fichier manifeste, sélectionnez l’onglet Déclarations. Dans la liste déroulante Déclarations disponibles, sélectionnez Périphérique de lecture automatique, puis cliquez sur Ajouter. Sélectionnez le nouvel élément Périphérique de lecture automatique ajouté à la liste Déclarations prises en charge.

4. Une déclaration Périphérique de lecture automatique identifie votre application en tant qu’option lorsque la lecture automatique déclenche un événement de périphérique pour des événements connus.

   Dans la section Actions de lancement, entrez les valeurs suivantes pour la première action de lancement.

   Paramètre	Valeur
   Verbe	show
   Nom complet de l’action	Show Pictures
   Événement de contenu	WPD\ImageSource

    

   Le paramètre Nom complet de l’action identifie la chaîne que la lecture automatique affiche pour votre application. Le paramètre Verbe identifie une valeur qui est transmise à votre application pour l’option sélectionnée. Vous pouvez spécifier plusieurs options de lancement pour un événement de lecture automatique et utiliser le paramètre Verbe pour déterminer quelle option l’utilisateur a sélectionnée pour votre application. Vous pouvez vérifier quelle option a été sélectionnée par l’utilisateur par le biais de la propriété verb des arguments d’événement de démarrage transmis à votre application. Vous pouvez attribuer n’importe quelle valeur au paramètre Verbe, sauf la valeur open qui est réservée. Pour obtenir un exemple d’utilisateur de plusieurs verbes dans une même application, voir Démarrage rapide : inscrire une application pour du contenu de lecture automatique.

5. Dans la liste déroulante Déclarations disponibles, sélectionnez Associations de types de fichiers, puis cliquez sur Ajouter. Dans les propriétés de la nouvelle déclaration Associations de types de fichiers, attribuez au champ Nom complet la valeur Show Images from Camera et au champ Nom la valeur camera_association1. Dans la section Types de fichiers pris en charge, cliquez sur Ajouter nouveau. Attribuez au champ Type de fichier la valeur .jpg. Dans la section Types de fichiers pris en charge, cliquez à nouveau sur Ajouter nouveau. Attribuez au champ Type de fichier de la nouvelle association de fichier la valeur .png. Pour les événements de contenu, la lecture automatique filtre les types de fichiers qui ne sont pas explicitement associés à votre application.

6. Enregistrez et fermez le fichier manifeste.

2. Ajouter une interface utilisateur HTML

• Ouvrez le fichier Default.html et placez le code HTML suivant dans la section <body>.

  <table>
      <tr>
          <td colspan="2">Device Information</td>
      </tr>
      <tr>
          <td style="vertical-align:top"><div id="deviceInfoDiv" style="width:400px;" /></td>
          <td style="vertical-align:top"><div id="picturesDiv" style="overflow:scroll;width:400px;height:400px" /></td>
      </tr>
  </table>
  
  

  .

3. Ajouter du code d’activation

Le code de cette étape fait référence à l’appareil photo en tant que StorageDevice en passant l’ID des informations de périphérique de l’appareil photo à la méthode fromId. L’ID des informations de périphérique de l’appareil photo est obtenu de la propriété detail.deviceInformationId des arguments transmis au gestionnaire d’événements onactivated.

• Ouvrez le dossier js. Ouvrez le fichier Default.js et remplacez la fonction onactivated par défaut par le code suivant.

  app.onactivated = function (args) {
      if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.device) {
          args.setPromise(WinJS.UI.processAll());
  
          showImages(Windows.Devices.Portable.StorageDevice.fromId(args.detail.deviceInformationId));
      }
  };
  

4. Ajouter du code pour afficher des informations de périphérique

Vous pouvez obtenir des informations sur l’appareil photo à partir des propriétés de la classe StorageDevice. Le code de cette étape affiche le nom du périphérique et d’autres informations à l’utilisateur au moment de l’exécution de l’application. Le code appelle alors la méthode getImages, que vous ajouterez à l’étape suivante, pour afficher des miniatures des images stockées dans l’appareil photo.

• Dans le fichier Default.js, ajoutez le code suivant après la fonction onactivated.

  var imagesDiv;
  
  function showImages(folder) {
      var infoDiv = document.getElementById("deviceInfoDiv");
      imagesDiv = document.getElementById("picturesDiv");
  
      infoDiv.innerHTML = "Display Name = " + folder.displayName + "<br />" +
                          "Display Type =  " + folder.displayType + "<br />" +
                          "FolderRelativeId = " + folder.folderRelativeId + "<br />";
  
      getImages(folder);
  }
  

5. Ajouter du code pour afficher des images

Le code de cette étape affiche des miniatures des images stockées dans l’appareil photo. Le code effectue des appels asynchrones à l’appareil photo pour obtenir l’image miniature. Toutefois, l’appel asynchrone suivant ne se produit qu’une fois l’appel asynchrone précédent terminé. Cela garantit qu’une seule demande est effectuée à l’appareil photo à la fois.

• Dans le fichier Default.js, ajoutez le code suivant après la fonction showImages.

  function getImages(folder) {
      // Find images in the specified folder
      folder.getFilesAsync().done(
          function (files) {
              files.forEach(function (file) {
                  file.getThumbnailAsync(
                      Windows.Storage.FileProperties.ThumbnailMode.singleItem,
                      100,
                      Windows.Storage.FileProperties.ThumbnailOptions.useCurrentScale).done(
  
                      function (thumbnail) {
                          // Create an img element to display on the page
                          var element = document.createElement("img");
                          element.src =
                              window.URL.createObjectURL(thumbnail, { oneTimeOnly: true });
                          element.style.height = thumbnail.originalHeight;
                          element.style.width = thumbnail.originalWidth;
                          element.alt = file.name;
                          imagesDiv.appendChild(element);
                      }
                  );
              })
  
              // Find images in subfolders
              folder.getFoldersAsync().done(
                  function (folders) {
                      folders.forEach(function (f) {
                          getImages(f);
                      })
                  });
          });
  }
  

6. Créer et exécuter l’application

1. Appuyez sur F5 pour créer et déployer l’application (en mode débogage).
2. Pour exécuter votre application, connectez un appareil photo à votre PC. Sélectionnez ensuite l’application dans la liste d’options de la lecture automatique. Remarque  Tous les appareils photo n’effectuent pas de publication pour l’événement de périphérique de lecture automatique WPD\ImageSource.  

Récapitulatif

Dans ce didacticiel, vous avez créé une application qui affiche des fichiers image à partir d’un appareil photo. Vous avez inscrit l’application pour l’événement de périphérique WPD\ImageSource de lecture automatique.

Rubriques associées

Démarrage automatique avec lecture automatique