Краткое руководство: получение изображения с камеры с помощью автозапуска (HTML)
[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]
Это руководство покажет, как получить доступ к подключенному съемному носителю с помощью событий автозапуска.
Цель: Вы узнаете, как получить доступ к съемному носителю с помощью событий активации автозапуска в вашем приложении.
Необходимые условия
Вы должны уметь работать с JavaScript и HTML.
Вам понадобится камера или устройство памяти камеры, которое можно подключить к компьютеру, чтобы сработало событие автозапуска. На устройстве должно быть несколько файлов изображений, так как это приложение находит первое изображение на устройстве и отображает его.
Время для завершения: 20 мин.
Инструкции
1. Открытие Microsoft Visual Studio
Запустите экземпляр программы Visual Studio.
2. Создание нового проекта
В диалоговом окне Создать проект выберите среди типов проектов JavaScript пустое приложение.
3. Объявление возможности "Съемные носители"
Дважды щелкните package.appxmanifest в обозревателе решений. Перейдите на вкладку Возможности. Выберите Съемные носители в списке Возможности.
4. Объявление типов файлов
- На вкладке "Объявления" выберите Сопоставление типов файлов в списке Доступные объявления и нажмите кнопку Добавить.
- В разделе Свойства установите для свойства имени значение image.
- В окне "Поддерживаемые типы файлов" добавьте GIF к поддерживаемым типам файлов, введя .gif в поле типа файла.
- Добавьте еще два поддерживаемых типа файлов (JPG и PNG), щелкнув Добавить и заполнив поле типа файла.
5. Объявление контракта автозапуска содержимого
- На вкладке "Declarations" (Объявления) выберите AutoPlay Content (Автозапуск содержимого) из списка Available Declarations (Доступные объявления) и щелкните Add (Добавить).
- В разделе Свойства установите для свойства 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 в обозревателе решений и проверьте состояние возможности Съемные носители на вкладке Возможности.
Сводка
Вы только что зарегистрировали обработчик автозапуска, который запустится при подключении камеры с памятью или памяти камеры.