Démarrage rapide : inscrire une application pour du contenu de lecture automatique (HTML)

Article
12/11/2015

[ 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 contenu de lecture automatique. Les événements de contenu de lecture automatique se déclenchent lorsqu’un périphérique de volume, tel que la carte mémoire d’un appareil photo, une clé USB ou un DVD, est inséré dans le PC.

Voici comment identifier votre application en tant qu’option de lecture automatique lorsqu’un périphérique de volume d’un appareil photo est inséré.

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

Prérequis

Microsoft Visual Studio

Instructions

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

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 AutoPlayDisplayOrCopyImages, puis cliquez sur OK.
Ouvrez le fichier Package.appxmanifest, puis sélectionnez l’onglet Capacités. Sélectionnez les fonctionnalités Stockage amovible et Bibliothèque d’images. Cela permet à l’application d’accéder à des périphériques de stockage amovibles pour la mémoire de l’appareil photo, et d’accéder aux images locales.
Dans le fichier manifeste, sélectionnez l’onglet Déclarations. Dans la liste déroulante Déclarations disponibles, sélectionnez Contenu de lecture automatique, puis cliquez sur Ajouter. Sélectionnez le nouvel élément Contenu de lecture automatique ajouté à la liste Déclarations prises en charge.
Une déclaration Contenu de lecture automatique identifie votre application en tant qu’option lorsque la lecture automatique déclenche un événement de contenu. L’événement est basé sur le contenu d’un périphérique de volume tel qu’un DVD ou une clé USB. La lecture automatique examine le contenu du périphérique de volume et détermine l’événement de contenu à déclencher. Si la racine du volume contient un dossier DCIM, AVCHD ou PRIVATE\ACHD ou si un utilisateur a activé Choisir l’action pour chaque type de média dans l’applet Lecture automatique du Panneau de configuration et que des images sont présentes à la racine du volume, la lecture automatique déclenche alors l’événement ShowPicturesOnArrival.

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 ShowPicturesOnArrival

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.
Dans la section Actions de lancement pour l’élément Contenu de lecture automatique, cliquez sur Ajouter nouveau pour ajouter une deuxième action de lancement. Entrez les valeurs suivantes pour la deuxième action de lancement.

Paramètre Valeur

Verbe copy

Nom complet de l’action Copy Pictures Into Library

Événement de contenu ShowPicturesOnArrival
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 AutoPlay Copy or Show Images et au champ Nom la valeur image_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.
Enregistrez et fermez le fichier manifeste.

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

Paramètre	Valeur
Verbe	copy
Nom complet de l’action	Copy Pictures Into Library
Événement de contenu	ShowPicturesOnArrival

2. Ajouter une interface utilisateur HTML

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

<label>File List</label>
<div id="files" style="position:fixed;top:30px;height:400px;width:600px" ></div>

3. Ajouter du code d’initialisation

Le code de cette étape vérifie la valeur du verbe dans la propriété verb à partir des arguments de démarrage transmis à l’application. Le code appelle alors la fonction associée à l’option que l’utilisateur a sélectionnée. Pour un événement de mémoire d’appareil photo, la lecture automatique passe le dossier racine du stockage de l’appareil photo dans les arguments de démarrage qui sont transmis à l’application. Vous pouvez récupérer ce dossier à partir du premier élément de la propriété detail.files.

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

var filesDiv;

app.onactivated = function (args) {
    if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.file) {
        filesDiv = document.getElementById("files");

        if (args.detail.verb === "show") {
            // Call displayImages with root folder from camera storage.
            displayImages(args.detail.files[0]);
        }
        else if (args.detail.verb === "copy") {
            // Call copyImagesToLibrary with root folder from camera storage.
            copyImagesToLibrary(args.detail.files[0]);
        }
    }
    args.setPromise(WinJS.UI.processAll());
};

4. Ajouter du code pour afficher des images

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

function displayImages(rootFolder) {
    // Display images from first folder in root\DCIM.
    rootFolder.getFolderAsync("DCIM").then(
    function (dcimFolder) {
        dcimFolder.getFoldersAsync().then(
        function (cameraFolders) {
            cameraFolders[0].getFilesAsync().then(
            function (files) {
                files.forEach(function (file) {
                    filesDiv.innerHTML += file.name + "<br />";
                    displayImage(file);
                });
            });
        });
    });
}

function displayImage(file) {
    try {
        var element = document.createElement("img");
        element.src = window.URL.createObjectURL(file, { oneTimeOnly: true });
        element.height = 100;
        element.width = 100;
        filesDiv.appendChild(element);
        filesDiv.innerHTML += "<br>";
    }
    catch (e) {
        filesDiv.innerHTML += e.message;
    }
}

5. Ajouter du code pour copier des images

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

function copyImagesToLibrary(rootFolder) {
    try {
        var now = new Date();
        var folderName =
            "Images " + now.toDateString() + " " + now.getHours() +
                        now.getMinutes() + now.getSeconds();

        Windows.Storage.KnownFolders.
        picturesLibrary.createFolderAsync(folderName).then(
                function (imageFolder) {
                    // Copy images from first folder in root\DCIM.
                    rootFolder.getFolderAsync("DCIM").then(
                function (dcimFolder) {
                    dcimFolder.getFoldersAsync().then(
                function (cameraFolders) {
                    cameraFolders[0].getFilesAsync().then(
                function (files) {
                    files.forEach(function (file) {
                        copyImage(file, imageFolder);
                    });
                });
                });
                });
                });
    } catch (e) {
        filesDiv.innerHTML = "Failed copy images.<br />" + e.message;
    }
}

function copyImage(file, imageFolder) {
    try {
        file.copyAsync(
            imageFolder, file.fileName,
                Windows.Storage.NameCollisionOption.replaceExisting).then(
                    function (newFile) {
                        filesDiv.innerHTML += file.name + " copied.<br />";
                    });
    } catch (e) {
        filesDiv.innerHTML += "Failed to copy image.<br />" + e.message;
    }
}

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

Appuyez sur F5 pour créer et déployer l’application (en mode débogage).
Pour exécuter votre application, insérez une carte mémoire d’appareil photo ou un autre périphérique de stockage d’un appareil photo dans votre PC. Sélectionnez ensuite l’une des options d’événement de contenu que vous avez spécifiées dans votre fichier package.appxmanifest à partir de la liste d’options de la lecture automatique. Cet exemple de code affiche ou copie uniquement les images du dossier DCIM de la carte mémoire d’un appareil photo. Si la carte mémoire de votre appareil photo stocke des images dans un dossier AVCHD ou PRIVATE\ACHD, vous devez mettre à jour le code en conséquence.Remarque Si vous n’avez pas de carte mémoire d’appareil photo, vous pouvez utiliser un disque mémoire flash à condition qu’il ait un dossier nommé DCIM à la racine, et que le dossier DCIM dispose d’un sous-dossier contenant des images.

Récapitulatif et étapes suivantes

Dans ce didacticiel, vous avez créé une application qui affiche des fichiers image ou les copie dans les images. Vous avez inscrit l’application pour l’événement de contenu de lecture automatique ShowPicturesOnArrival.

La lecture automatique déclenche des événements de contenu pour du contenu partagé entre des PC en utilisant la fonction de proximité (action d’appuyer). Vous pouvez utiliser les étapes et le code de ce guide de démarrage rapide pour gérer des fichiers qui sont partagés entre des PC utilisant la fonction de proximité. Le tableau suivant répertorie les événements de contenu de lecture automatique disponibles pour le partage de contenu via la fonction de proximité.

Action	Événement de contenu de lecture automatique
Partage de musique	PlayMusicFilesOnArrival
Partage de vidéos	PlayVideoFilesOnArrival

Lorsque les fichiers sont partagés à l’aide de la fonction de proximité, la propriété Files de l’objet FileActivatedEventArgs contient une référence à un dossier racine reprenant l’intégralité des fichiers partagés.

Rubriques associées

Démarrage automatique avec lecture automatique

Share via