Schnellstart: Registrieren einer App für ein Gerät 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]

Sie können Apps als Optionen für Geräteereignisse zur automatischen Wiedergabe registrieren. Geräteereignisse zur automatischen Wiedergabe werden ausgelöst, wenn ein Gerät an einen PC angeschlossen wird.

Hier wird gezeigt, wie Sie eine App als Option für die automatische Wiedergabe identifizieren, wenn eine Kamera an einen PC angeschlossen wird. Die App wird als Handler für das WPD\ImageSource-Ereignis zur automatischen Wiedergabe registriert. Dabei handelt es sich um ein häufiges Ereignis, das vom Windows Portable Device (WPD)-System ausgelöst wird, wenn es von Kameras und anderen Bildverarbeitungsgeräten benachrichtigt wird, dass es sich bei ihnen um eine ImageSource mit MTP handelt. Weitere Informationen finden Sie in Tragbare Windows-Geräte.

Wenn Sie ein Gerätehersteller sind und Ihrem Gerät eine bestimmte Windows Store-Geräte-App als AutoPlay-Handler zuweisen möchten, können Sie die App in den Gerätemetadaten identifizieren. Wenn Sie Ihre App der Experience-ID Ihres Geräts als automatisch installierte App zuordnen, findet das Betriebssystem diese Zuordnung, wenn Ihr Gerät an einen PC angeschlossen wird. Ist Ihre App nicht auf dem PC installiert, wird sie vom Betriebssystem automatisch heruntergeladen und installiert. Die automatische Wiedergabe bietet Ihre App als erste Option an, wenn der Benutzer den Handler für das Gerät auswählt. Weitere Informationen finden Sie im Thema zu AutoPlay für Windows Store-Geräte-Apps.

Ziel: Erstellen Sie eine App zur Handhabung eines Geräteereignisses zur automatischen Wiedergabe.

Voraussetzungen

Microsoft Visual Studio

Anweisungen

1. Erstellen eines neuen Projekts und Hinzufügen von Deklarationen für die automatische Wiedergabe

Öffnen Sie Visual Studio, und wählen Sie im Menü Datei die Option Neues Projekt aus. Wählen Sie im Abschnitt JavaScript die Option Windows Store aus. Versehen Sie die App mit dem Namen AutoPlayDevice_Camera, und klicken Sie anschließend auf OK.
Öffnen Sie die Datei Package.appxmanifest, und klicken Sie auf die Registerkarte Funktionen. Wählen Sie die Funktion Wechselmedien. Damit geben Sie der App Zugriff auf die Daten auf der Kamera als Wechselmedien-Volumegerät.
Klicken Sie in der Manifestdatei auf die Registerkarte Deklarationen. Wählen Sie in der Dropdownliste Verfügbare Deklarationen die Option Gerät automatisch wiedergeben aus, und klicken Sie anschließend auf Hinzufügen. Wählen Sie das neue Element vom Typ Gerät automatisch wiedergeben aus, das der Liste Unterstützte Deklarationen hinzugefügt wurde.
Die Deklaration Gerät automatisch wiedergeben kennzeichnet Ihre App als Option, wenn von der automatischen Wiedergabe ein Geräteereignis ausgelöst wird.

Geben Sie im Abschnitt Startaktionen folgende Werte für die Aktion beim ersten Start ein:

Einstellung Wert

Verb show

Anzeigename der Aktion Bilder anzeigen

Inhaltsereignis WPD\ImageSource

Die Einstellung Aktionsanzeigename dient zum Angeben der Zeichenfolge, mit der die automatische Wiedergabe für Ihre App angezeigt wird. Die Einstellung Verb dient zum Angeben eines Werts, der für die ausgewählte Option an Ihre App übergeben wird. Sie können mehrere Startaktionen für Ereignisse der automatischen Wiedergabe angeben und mit der Einstellung Verb ermitteln, welche Option ein Benutzer für Ihre App ausgewählt hat. Für welche Option sich der Benutzer entschieden hat, erfahren Sie durch Überprüfen der verb-Eigenschaft der an die App übergebenen Startereignisargumente. Für die Einstellung Verb können Sie einen beliebigen Wert verwenden. Einzige Ausnahme ist open: Dieser Wert ist reserviert. Ein Beispiel zur Verwendung mehrerer Verben in einer einzelnen App erhalten Sie in Schnellstart: Registrieren einer App für Inhalt für die automatische Wiedergabe.
Wählen Sie in der Dropdownliste Verfügbare Deklarationen die Option Dateitypzuordnungen aus, und klicken Sie anschließend auf Hinzufügen. Legen Sie in den Eigenschaften der neuen Deklaration vom Typ Dateitypzuordnungen das Feld Anzeigename auf Show Images from Camera und das Feld Name auf camera_association1 fest. Klicken Sie im Abschnitt Unterstützte Dateitypen auf Neu hinzufügen. Legen Sie im Feld Dateityp die Option .jpg fest. Klicken Sie im Abschnitt Unterstützte Dateitypen erneut auf Neu hinzufügen. Legen Sie das Feld Dateityp der neuen Dateizuordnung auf .png fest. Für Inhaltsereignisse filtert AutoPlay Dateitypen heraus, die nicht explizit Ihrer App zugeordnet sind.
Speichern und schließen Sie die Manifestdatei.

Einstellung	Wert
Verb	show
Anzeigename der Aktion	Bilder anzeigen
Inhaltsereignis	WPD\ImageSource

2. Hinzufügen einer HTML-Benutzeroberfläche

Öffnen Sie die Datei Default.html, und fügen Sie im Abschnitt <body> den folgenden HTML-Code hinzu.

<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. Hinzufügen von Aktivierungscode

Der Code bei diesem Schritt referenziert die Kamera als StorageDevice, indem er die Geräteinformations-ID der Kamera an die fromId-Methode übergibt. Die Geräteinformations-ID der Kamera wird über die detail.deviceInformationId-Eigenschaft der Argumente ermittelt, die dem onactivated-Ereignishandler übergeben werden.

Öffnen Sie den Ordner js. Öffnen Sie die Datei Default.js, und ersetzen Sie die standardmäßige onactivated-Funktion durch den folgenden Code.

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. Hinzufügen von Code zum Anzeigen von Geräteinformationen

Informationen zur Kamera erhalten Sie über die Eigenschaften der StorageDevice-Klasse. Der Code bei diesem Schritt zeigt dem Benutzer den Gerätenamen und andere Informationen an, wenn die App läuft. Der Code ruft anschließend die getImages-Methode auf, die Sie im nächsten Schritt hinzufügen, um Miniaturansichten der Bilder einzublenden, die auf der Kamera gespeichert sind.

Fügen Sie in der Datei Default.js den folgenden Code nach der onactivated-Funktion hinzu.

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. Hinzufügen von Code zum Anzeigen von Bildern

Der Code in diesem Schritt blendet Miniaturansichten der Bilder ein, die auf der Kamera gespeichert sind. Der Code ruft die Miniaturansicht mit asynchronen Aufrufen an die Kamera ab. Der nächste asynchrone Aufruf erfolgt aber nicht, bis der vorherige asynchrone Aufruf abgeschlossen ist. Dadurch wird sichergestellt, dass jeweils nur ein Aufruf an die Kamera ausgeführt wird.

Fügen Sie in der Datei Default.js den folgenden Code nach der showImages-Funktion ein.

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. Erstellen und Ausführen der App

Drücken Sie F5, um die App zu erstellen und bereitzustellen (im Debugmodus).
Schließen Sie eine Kamera an Ihren PC an, um die App auszuführen. Wählen Sie anschließend die App in der Optionsliste der automatischen Wiedergabe aus. Hinweis Nicht alle Kameras zeigen das WPD\ImageSource-Geräteereignis zur automatischen Wiedergabe an.

Zusammenfassung

In diesem Lernprogramm haben Sie eine App erstellt, die Bilddateien von einem Kameragerät anzeigt. Sie haben die App für das WPD\ImageSource-Geräteereignis zur automatischen Wiedergabe registriert.