Schnellstart: Registrieren einer App für Inhalt für die automatische 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 Inhaltsereignisse vom Typ Automatische Wiedergabe registrieren. Inhaltsereignisse für die automatische Wiedergabe werden ausgelöst, wenn ein Volumegerät wie etwa die Speicherkarte einer Kamera, ein USB-Speicherstick oder eine DVD in den PC eingelegt bzw. an den PC angeschlossen wird.

Dieses Beispiel zeigt, wie Sie eine App als Option für die automatische Wiedergabe identifizieren, wenn ein Volumegerät einer Kamera angeschlossen wird.

Ziel: Erstellen Sie eine App zum Behandeln eines Inhaltsereignisses für die automatische 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 AutoPlayDisplayOrCopyImages, und klicken Sie anschließend auf OK.
Öffnen Sie die Datei Package.appxmanifest, und klicken Sie auf die Registerkarte Funktionen. Wählen Sie die Funktionen Wechselmedien und Bildbibliothek aus. Dadurch erhält die App Zugriff auf Wechselmedien für Kameraspeicher und lokale Bilder.
Klicken Sie in der Manifestdatei auf die Registerkarte Deklarationen. Wählen Sie in der Dropdownliste Verfügbare Deklarationen die Option Inhalt automatisch wiedergeben aus, und klicken Sie anschließend auf Hinzufügen. Wählen Sie das neue Element vom Typ Inhalt automatisch wiedergeben aus, das der Liste Unterstützte Deklarationen hinzugefügt wurde.
Eine Deklaration vom Typ Inhalt automatisch wiedergeben identifiziert Ihre App als Option, wenn die automatische Wiedergabe ein Inhaltsereignis auslöst. Das Ereignis basiert auf dem Inhalt eines Volumegeräts (beispielsweise eine DVD oder ein Speicherstick). Für die automatische Wiedergabe wird der Inhalt des Volumegeräts ermittelt und festgelegt, welches Inhaltsereignis ausgelöst wird. Das ShowPicturesOnArrival-Ereignis wird von der automatischen Wiedergabe ausgelöst, wenn das Stammverzeichnis des Volumes den Ordner "/DCIM", "/AVCHD" oder "/PRIVATE\ACHD" enthält oder wenn die Option Gewünschte Aktion für jeden Medientyp auswählen vom Benutzer in der Systemsteuerungsoption "Automatische Wiedergabe" aktiviert wurde und Bilder im Stammverzeichnis des Volumes gefunden werden.

Geben Sie im Abschnitt Startaktionen die folgenden Werte für die Aktion beim ersten Start an:

Einstellung Wert

Verb show

Aktionsanzeigename Bilder anzeigen

Inhaltsereignis ShowPicturesOnArrival

Die Einstellung Anzeigename der Aktion dient zum Angeben der Zeichenfolge, die die automatische Wiedergabe für Ihre App anzeigt. 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.
Klicken Sie im Abschnitt Startaktionen für das Element vom Typ Inhalt automatisch wiedergeben auf Neu hinzufügen, um eine zweite Startaktion hinzuzufügen. Geben Sie die folgenden Werte für die Aktion beim zweiten Start an:

Einstellung Wert

Verb copy

Aktionsanzeigename Bilder in die Bibliothek kopieren

Inhaltsereignis ShowPicturesOnArrival
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 AutoPlay Copy or Show Images und das Feld Name auf image_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
Aktionsanzeigename	Bilder anzeigen
Inhaltsereignis	ShowPicturesOnArrival

Einstellung	Wert
Verb	copy
Aktionsanzeigename	Bilder in die Bibliothek kopieren
Inhaltsereignis	ShowPicturesOnArrival

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.

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

3. Hinzufügen von Initialisierungscode

Der Code in diesem Schritt prüft den Verb-Wert der verb-Eigenschaft in den Startargumenten, die an die App übergeben wurden. Der Code ruft dann die Funktion für die vom Benutzer ausgewählte Option auf. Für das Kameraspeicherereignis übergibt AutoPlay den Stammordner des Kameraspeichers in den Startargumenten, die ihrerseits an die App übergeben wurden. Sie können diesen Ordner aus dem ersten Element der detail.files-Eigenschaft abrufen.

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

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

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

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

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

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

Drücken Sie F5, um die App zu erstellen und bereitzustellen (im Debugmodus).
Legen Sie eine Kameraspeicherkarte oder ein anderes Speichergerät einer Kamera in Ihren PC ein, um die App auszuführen. Wählen Sie dann in der Liste mit den Optionen für die automatische Wiedergabe eine der Inhaltsereignisoptionen aus, die Sie in der Datei package.appxmanifest angegeben haben. Dieser Beispielcode blendet Bilder im DCIM-Ordner auf der Speicherkarte einer Kamera nur ein oder kopiert diese. Wenn die Speicherkarte Ihrer Kamera Bilder in "AVCHD" oder "PRIVATE\ACHD" speichert, müssen Sie den Code entsprechend ändern.Hinweis Falls Sie nicht über eine Kameraspeicherkarte verfügen, können Sie einen Speicherstick verwenden, sofern dieser im Stammverzeichnis einen Ordner mit dem Namen DCIM und der Ordner "DCIM" wiederum einen Unterordner mit Bildern enthält.

Zusammenfassung und nächste Schritte

In diesem Lernprogramm haben Sie eine App erstellt, die Bilddateien anzeigt oder in "Bilder" kopiert. Sie haben die App für das ShowPicturesOnArrival-Inhaltsereignis von AutoPlay registriert.

Die automatische Wiedergabe löst Inhaltsereignisse für Inhalte aus, die mittels Näherung (Koppeln) zwischen PCs ausgetauscht werden. Sie können die Schritte und den Code aus dieser Schnellstartanleitung auch für Dateien verwenden, die mittels Näherung zwischen PCs geteilt werden. Die folgende Tabelle enthält die Inhaltsereignisse für die automatische Wiedergabe, die Sie verwenden können, um Inhalte mithilfe der Näherungsfunktion zu teilen.

Aktion	Inhaltsereignis für die automatische Wiedergabe
Teilen von Musik	PlayMusicFilesOnArrival
Teilen von Videos	PlayVideoFilesOnArrival

Falls Dateien mithilfe der Näherungsfunktion geteilt werden, enthält die Files-Eigenschaft des FileActivatedEventArgs-Objekts einen Verweis auf einen Stammordner mit allen geteilten Dateien.

Freigeben über