Démarrage rapide : obtenir une image d’un appareil photo à l’aide de la 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 ]

Ce didacticiel vous explique comment accéder au stockage amovible au moment où le dispositif de stockage est branché, en gérant les événements de lecture automatique.

Objectif: Vous allez apprendre à accéder au stockage amovible en gérant dans votre application les événements d’activation de la lecture automatique.

Prérequis

Vous devez connaître JavaScript et HTML.

Vous devez posséder un appareil photo ou un dispositif à mémoire pour appareil photo que vous pouvez brancher sur l’ordinateur pour déclencher un événement de lecture automatique. Le périphérique doit contenir des fichiers image puisque l’application recherche puis affiche la première image de l’appareil.

Durée de réalisation: 20 minutes.

Instructions

1. Ouvrir Microsoft 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. Déclarer la fonctionnalité de stockage amovible

Double-cliquez sur package.appxmanifest dans l’Explorateur de solutions. Sélectionnez l’onglet Capacités. Activez Stockage amovible dans la liste Capacités.

4. Déclarer les types de fichiers

Sous l’onglet Déclarations, choisissez Associations de types de fichiers dans Déclarations disponibles, puis cliquez sur Ajouter.
Sous Propriétés, affectez à la propriété Name la valeur image.
Dans la section Types de fichiers pris en charge, indiquez le type .gif dans le champ Type de fichier pour l’ajouter à la liste de ceux pris en charge.
Ajoutez deux autres types de fichiers pris en charge pour .jpg et .png en cliquant sur Ajouter et en renseignant la valeur FileType.

5. Déclarer le contrat de contenu de lecture automatique

Sous l’onglet Déclarations, choisissez Contenu de lecture automatique dans Déclarations disponibles, puis cliquez sur Ajouter.
Sous Propriétés, définissez les propriétés ContentEvent sur CameraMemoryOnArrival, Verb sur storageDevice, puis attribuez à la propriété ActionDisplayName le nom convivial que vous voulez voir s’afficher pour votre application lorsque cette dernière se lance par l’activation de la lecture automatique.

6. Déclarer le contrat de périphérique de lecture automatique

Sous l’onglet Déclarations, choisissez Périphérique de lecture automatique dans Déclarations disponibles, puis cliquez sur Ajouter.
Sous Propriétés, définissez les propriétés DeviceEvent sur WPD\ImageSource, Verb sur wpdImage, puis attribuez à la propriété ActionDisplayName le nom convivial que vous voulez voir s’afficher pour votre application lorsque cette dernière se lance par l’activation de la lecture automatique.

7. Insérer le code HTML et JavaScript

Ouvrez votre fichier Default.html et copiez-y le code suivant en remplaçant son contenu d’origine.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Using Autoplay</title>

    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", initialize, false);

    // Add a handler for the activated event so it can 
    // do something when activated via AutoPlay.
    Windows.UI.WebUI.WebUIApplication.addEventListener(
        "activated", activatedHandler);

function activatedHandler(eventArgs) {
    if (eventArgs.kind === 
            Windows.ApplicationModel.Activation.ActivationKind.file) {
        // clear any device id so we always use
        //  the latest connected device
        g_autoPlayDeviceId = null; 
        g_autoPlayDrive = eventArgs.files[0];
        document.getElementById("btn").click();
        getFirstImageOnAutoPlayStorage();
    } else if (eventArgs.kind === 
            Windows.ApplicationModel.Activation.ActivationKind.device) {
        // clear any saved drive so we always use 
        // the latest connected device
        g_autoPlayDrive = null;
        g_autoPlayDeviceId = eventArgs.deviceInformationId;
        document.getElementById("btn").click();
        getFirstImageOnAutoPlayStorage();
    } else {
        document.getElementById("status").innerHTML =
            "Not activated using Autoplay";
        document.getElementById("btn").disabled = true;
    }
}

    function initialize() {
        document.getElementById("btn").addEventListener(
           "click", getFirstImageOnAutoPlayStorage, false);
    }

function getFirstImageOnAutoPlayStorage() {

    document.getElementById("output").innerHTML = "";
    if (g_autoPlayDrive) {

        document.getElementById("status").innerHTML =
            "Activated using Drive Autoplay";

        // Drive Autoplay returns a Windows.Storage.StorageFolder 
        // representing the storage drive
        // Construct the query for image files on the device
        var queryOptions = new Windows.Storage.Search.QueryOptions(
            Windows.Storage.Search.CommonFileQuery.orderByName,
            [".jpg", ".png", ".gif"]);
        var imageFileQuery =
            g_autoPlayDrive.createFileQueryWithOptions(queryOptions);
         // Run the query for image files
        imageFileQuery.getFilesAsync().
            then(
                function (items) {
                displayFirstImage(items);
            },
                function (e) {
            document.getElementById("output").innerHTML = 
                "Error when looking for images in '" +
                g_autoPlayDrive.name + "': " + e.message;
            });

        } else if (g_autoPlayDeviceId) {

        document.getElementById("output").innerHTML =
            "Activated using Device Autoplay";

        // Device Autoplay returns a device ID. We take an extra step to
        // convert that identifier into a Windows.Storage.StorageFolder.
        var autoplayStorageDevice;
        try {
            autoplayStorageDevice =
            Windows.Devices.Portable.StorageDevice.fromId(g_autoPlayDeviceId);
        } catch (e) {
            document.getElementById("output").innerHTML =
            e.message;
        } 
         // Construct the query for image files on the device
        var queryOptions = new Windows.Storage.Search.QueryOptions(
            Windows.Storage.Search.CommonFileQuery.orderByName,
            [".jpg", ".png", ".gif"]);
        var imageFileQuery =
            autoplayStorageDevice.createFileQueryWithOptions(queryOptions);
        imageFileQuery.getFilesAsync().
            then(
                function (items) {
            displayFirstImage(items);
        },
                function (e) {
            document.getElementById("output").innerHTML = 
                    "Error when looking for images in '" +
                    autoplayStorageDevice.name + "': " + e.message;
        });
    } else {
        document.getElementById("output").innerHTML =
            "Not activated via AutoPlay.";
    }
}

    function displayImage(imageFile) {
        document.getElementById("imageNameHolder").innerHTML =
               "Image file name: " + imageFile.name + "<br/>";

        // Setting 2nd parameter to 'false' cleans up the URL
        // after first use. We set this because we only need 
        // to load the URL into the image tag once.
        document.getElementById("imageHolder").src =
                window.URL.createObjectURL(imageFile, false);
    }

function displayFirstImage(items) {
    var found = false;
    for (var i = 0, l = items.length; i < l && !found; i++) {
        if (items[i].size > 0) { // display the first non-empty file
            displayImage(items[i]);
            found = true;
        }
    }

    if (!found) {
        // No files found matching our criteria
        document.getElementById("output").innerHTML =
            "No image files found on the removable storage";
    }
}
</script>

</head>
<body>
    <div id="imageNameHolder"></div>
    <img id="imageHolder" alt="image holder" src="" width="256"/><br />
    <div id="output"></div>
    <div id="status"></div>
    <button class="action" id="btn">Get Image File</button>
</body>
</html>

8. Tester l’application

Dans le menu Générer, cliquez sur Générer la solution.
Dans le menu Générer, cliquez sur Déployer la solution.
Votre application doit maintenant être inscrite comme gestionnaire de lecture automatique. Branchez un appareil photo, ou insérez la mémoire d’un appareil photo, contenant des fichiers image. Au moment où l’appareil est détecté, indiquez que votre application doit s’ouvrir. La première image sur l’appareil doit s’afficher dans votre application.

Remarque Si vous obtenez une erreur, vérifiez ce qui suit :

Assurez-vous d’avoir autorisé l’accès au support de stockage amovible en ouvrant package.appxmanifest dans l’Explorateur de solutions et en activant l’option Stockage amovible dans l’onglet Capacités.

Récapitulatif

Vous venez d’inscrire un gestionnaire de lecture automatique qui se lance lorsqu’un appareil photo possédant un espace de stockage, ou une mémoire pour appareil photo, est branché.

Rubriques associées

Comment inscrire une application en vue de sa lecture automatique

Accéder à la carte SD dans les applications Windows Phone

Partager via