快速入門：使用自動播放取得相機的影像 (HTML)

發行項
12/11/2015

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

這個教學課程說明如何在插入存放裝置後，藉由處理自動播放事件來存取卸除式存放裝置。

目標: 您將了解如何藉由處理應用程式的自動播放啟用事件，來存取卸除式存放裝置。

先決條件

您應該熟悉 JavaScript 和 HTML。

您必須具備可以插入電腦的相機或相機記憶體裝置，才能觸發自動播放事件。裝置應包含一些影像檔，因為這個應用程式會尋找裝置上的第一張相片，並加以顯示。

完成所需的時間: 20 分鐘.

指示

1. 開啟 Microsoft Visual Studio

開啟 Visual Studio 的執行個體。

2. 建立新專案

在 [新增專案] 對話方塊中，從 JavaScript 專案類型中選擇 [空白的應用程式]。

3. 宣告卸除式存放裝置功能

按兩下方案總管中的 package.appxmanifest。選取 [功能] 索引標籤。選取 [功能]**** 清單中的 [卸除式存放裝置]。

4. 宣告檔案類型

在 [宣告] 索引標籤中，從 [可用宣告]**** 選擇 [檔案類型關聯]，然後按一下 [加入]****。
在 [屬性] 下，將名稱屬性設定成 image。
在 [支援的檔案類型] 方塊中的 [FileType] 欄位中輸入 .gif，讓 .gif 成為支援的檔案類型。
再新增兩個支援的檔案類型 .jpg 和 .png，按一下 [加入新的]，然後填入 FileType。

5. 宣告自動播放內容協定

在 [宣告] 索引標籤中，從 [可用宣告]**** 選擇 [自動播放內容]，然後按一下 [加入]****。
在 [屬性] 下，將 [ContentEvent]**** 屬性設定為 CameraMemoryOnArrival、將 [Verb] 屬性設定為 storageDevice，然後將 [ActionDisplayName] 屬性設定為易記名稱，以便在自動播放啟用中啟動您的應用程式時顯示該名稱。

6. 宣告自動播放裝置協定

在 [宣告] 索引標籤中，從 [可用宣告]**** 選擇 [自動播放裝置]，然後按一下 [加入]****。
在 [屬性] 下，將 [DeviceEvent]**** 屬性設定為 WPD\ImageSource、將 [Verb] 屬性設定為 wpdImage，然後將 [ActionDisplayName] 屬性設定為易記名稱，以便在自動播放啟用中啟動您的應用程式時顯示該名稱。

7. 插入 HTML 和 JavaScript

開啟 Default.html，然後將以下的程式碼複製到這個檔案中，取代原來的內容。

<!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. 測試應用程式

在 [建置]**** 功能表中按一下 [建置方案]，即可建置方案。
在 [建置]**** 功能表中按一下 [部署方案]，即可部署方案。
您的應用程式現在應該已登錄為自動播放處理常式。插入包含一些影像檔的相機或相機記憶體。偵測到裝置時，選擇讓您的應用程式開啟。您的應用程式應該會顯示裝置的第一個影像。

注意如果您收到錯誤，請檢查下列項目：

藉由在 [方案總管] 中開啟 package.appxmanifest 並檢查 [功能] 索引標籤中的 [卸除式存放裝置]****，來確定已啟用存取卸除式存放裝置。

摘要

您已登錄自動播放處理常式，當您插入含有儲存體或相機記憶體的相機時，將會啟動該處理常式。

共用方式為