Quickstart: Get an image from a camera using AutoPlay (HTML)
This tutorial shows you how to access removable storage when the storage device is plugged in, by handling AutoPlay events.
Objective: You'll learn how to access removable storage by handling AutoPlay activation events in your app.
Prerequisites
You should be familiar with JavaScript and HTML.
You need to have a camera or camera memory device that you can plug into the computer to trigger an AutoPlay event. The device should contain some image files since this app finds the first picture on the device and displays it.
Time to complete: 20 minutes.
Instructions
1. Open Microsoft Visual Studio
Open an instance of Microsoft Visual Studio.
2. Create a New Project
In the New Project dialog box, choose a blank application from the JavaScript project types.
3. Declare the Removable Storage capability
Double click on package.appxmanifest in solution explorer. Select the Capabilities tab. Check Removable Storage in the Capabilities list.
4. Declare the file types
- In the Declarations tab, choose File Type Associations from Available Declarations and click Add.
- Under Properties, set the Name property to image.
- In the Supported File Types box, add .gif as a supported file type by entering .gif in the FileType field.
- Add two more supported file types for .jpg and .png by clicking Add New and filling in the FileType.
5. Declare the AutoPlay Content contract
- In the Declarations tab, choose AutoPlay Content from Available Declarations and click Add.
- Under Properties, set the ContentEvent property to CameraMemoryOnArrival, set the Verb property to storageDevice, and set the ActionDisplayName property to the friendly name to display for your app when it's launched on autoplay activation.
6. Declare the AutoPlay Device contract
- In the Declarations tab, choose AutoPlay Device from Available Declarations and click Add.
- Under Properties, set the DeviceEvent property to WPD\ImageSource, set the Verb property to wpdImage, and set the ActionDisplayName property to the friendly name to display for your app when it's launched on autoplay activation.
7. Insert the HTML and JavaScript
Open your Default.html and copy the following code into it, replacing its original contents.
<!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. Test the Application
- On the Build menu, click Build Solution to build the solution.
- On the Build menu, click Deploy Solution to deploy the solution.
- Your app should now be registered as an AutoPlay handler. Plug in a camera or camera memory that contains some image files. Choose to let your application open when the device is detected. The first image on the device should display in your app.
Note If you get an error, check the following:
- Make sure you've enabled access to removable storage by opening package.appxmanifest in Solution Explorer and checking Removable Storage in the Capabilities tab.
Summary
You just registered an AutoPlay handler that will launch when a camera that has storage, or memory for a camera, is plugged in.