Schnellstart: Abrufen von Bildern von einer Kamera mit automatischer Wiedergabe (HTML)

Artikel
12/12/2015

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

In diesem Lernprogramm wird erläutert, wie Sie auf Wechselmedien zugreifen, wenn das Speichergerät verbunden ist, indem Sie Ereignisse zur automatischen Wiedergabe behandeln.

Ziel: Sie lernen, auf Wechselmedien zuzugreifen, indem Sie Aktivierungsereignisse zur automatischen Wiedergabe in Ihrer App behandeln.

Voraussetzungen

Sie sollten mit JavaScript und HTML vertraut sein.

Sie benötigen eine Kamera oder ein Kameraspeichergerät, das Sie mit dem Computer verbinden können, um ein Ereignis zur automatischen Wiedergabe auszulösen. Auf dem Gerät sollten einige Bilddateien gespeichert sein, da die App das erste Bild auf dem Gerät sucht und dieses anzeigt.

Zeitaufwand: 20 Minuten.

Anweisungen

1. Öffnen von Microsoft Visual Studio

Öffnen Sie eine Instanz von Visual Studio.

2. Erstellen eines neuen Projekts

Wählen Sie im Dialogfeld Neues Projekt in den JavaScript-Projekttypen die Option für eine leere App aus.

3. Deklarieren der Funktion "Wechselspeichergeräte"

Doppelklicken Sie im Projektmappen-Explorer auf die Datei package.appxmanifest. Klicken Sie auf die Registerkarte Capabilities. Aktivieren Sie in der Liste Funktionen die Option Wechselspeichergeräte.

4. Deklarieren der Dateitypen

Wählen Sie auf der Registerkarte "Deklarationen" Dateitypzuordnungen unter Verfügbare Deklarationen aus, und klicken Sie auf Hinzufügen.
Legen Sie unter Eigenschaften die Name-Eigenschaft auf image fest.
Fügen Sie im Feld "Unterstützte Dateitypen" den Dateityp ".gif" als unterstützten Dateityp hinzu, indem Sie .gif in das FileType-Feld eingeben.
Fügen Sie zwei oder mehr unterstützte Dateitypen für JPG und PNG hinzu, indem Sie auf Neue hinzufügen klicken und den Dateityp angeben.

5. Deklarieren des Vertrags für "Inhalt automatisch wiedergeben"

Wählen Sie auf der Registerkarte "Deklarationen" Inhalt automatisch wiedergeben unter Verfügbare Deklarationen aus, und klicken Sie auf Hinzufügen.
Legen Sie unter Eigenschaften die ContentEvent-Eigenschaft auf CameraMemoryOnArrival fest, legen Sie die Verb-Eigenschaft auf storageDevice fest, und legen Sie die ActionDisplayName-Eigenschaft auf den Anzeigenamen der App fest, der bei der Aktivierung der automatischen Wiedergabe angezeigt wird.

6. Deklarieren des Vertrags für "Gerät automatisch wiedergeben"

Wählen Sie auf der Registerkarte "Deklarationen" Gerät automatisch wiedergeben unter Verfügbare Deklarationen aus, und klicken Sie auf Hinzufügen.
Legen Sie unter Eigenschaften die DeviceEvent-Eigenschaft auf WPD\ImageSource fest, legen Sie die Verb-Eigenschaft auf wpdImage fest, und legen Sie die ActionDisplayName-Eigenschaft auf den Anzeigenamen der App fest, der bei der Aktivierung der automatischen Wiedergabe angezeigt wird.

7. Einfügen des HTML- und JavaScript-Codes

Öffnen Sie "Default.html", und ersetzen Sie den ursprünglichen Dateiinhalt durch folgenden Code.

<!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. Testen der App

Klicken Sie im Menü Erstellen auf Projektmappe erstellen, um die Projektmappe zu erstellen.
Klicken Sie im Menü Erstellen auf Projektmappe bereitstellen, um die Projektmappe bereitzustellen.
Ihre App sollte nun als Handler für die automatische Wiedergabe registriert sein. Schließen Sie eine Kamera oder einen Kameraspeicher an, der einige Bilder enthält. Wählen Sie aus, dass Ihre App nach dem Erkennen des Geräts geöffnet wird. Das erste Bild auf dem Gerät sollte in Ihrer App angezeigt werden.

Hinweis Überprüfen Sie bei einem Fehler Folgendes:

Vergewissern Sie sich, dass Sie Zugriff auf Wechselmedien haben, indem Sie im Projektmappen-Explorer die Datei package.appxmanifest öffnen und die Option Wechselmedien auf der Registerkarte Funktionen überprüfen.

Zusammenfassung

Sie haben nun einen Handler für die automatische Wiedergabe registriert, der gestartet wird, wenn eine Kamera mit Speicher oder ein Speichergerät für eine Kamera angeschlossen wird.