빠른 시작: 자동 실행 장치를 위해 앱 등록(HTML)

아티클
12/11/2015

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

앱을 자동 실행 장치 이벤트에 대한 옵션으로 등록할 수 있습니다. 자동 실행 장치 이벤트는 장치가 PC에 연결될 때 발생합니다.

여기에서는 카메라가 PC에 연결될 때 앱을 자동 실행 옵션으로 식별하는 방법을 보여 줍니다. 앱은 WPD\ImageSource자동 실행 이벤트에 대한 처리기로 등록됩니다. 이는 카메라 및 기타 이미징 장치가 MTP를 사용하는 ImageSource임을 알릴 경우 WPD(Windows 휴대용 장치)에서 발생하는 일반적인 이벤트입니다. 자세한 내용은 Windows 휴대용 장치를 참조하세요.

장치 제조업체이며 해당 Windows 스토어 장치 앱을 장치의 자동 실행 처리기로 연결하려는 경우 장치 메타데이터에서 앱을 식별할 수 있습니다. 장치의 환경 ID에 대해 자동 설치된 앱으로 앱을 연결하면 장치가 PC에 연결될 때 운영 체제에서 해당 연결을 검색합니다. PC에 앱이 설치되어 있지 않으면 운영 체제에서 앱을 자동으로 다운로드하여 설치합니다. 자동 실행에서는 사용자가 장치의 처리기로 선택할 수 있는 첫 번째 옵션으로 앱을 제공합니다. 자세한 내용은 Windows 스토어 장치 앱의 자동 실행을 참조하세요.

목표: 앱을 만들어 자동 실행 장치 이벤트를 처리합니다.

사전 요구 사항

Microsoft Visual Studio

지침

1. 새 프로젝트를 만들고 AutoPlay 선언을 추가합니다.

Visual Studio를 열고 파일 메뉴에서 새 프로젝트를 선택합니다. JavaScript 섹션에서 Windows 스토어를 선택합니다. 앱의 이름을 AutoPlayDevice_Camera로 지정하고 확인을 클릭합니다.
Package.appxmanifest 파일을 열고 기능 탭을 선택합니다. 이동식 저장소 기능을 선택합니다. 이렇게 하면 앱이 이동식 저장 볼륨 장치로 카메라의 데이터에 액세스할 수 있습니다.
매니페스트 파일에서 선언 탭을 선택합니다. 사용 가능한 선언 드롭다운 목록에서 장치 자동 실행을 선택하고 추가를 클릭합니다. 지원되는 선언 목록에 추가된 새 장치 자동 실행 항목을 선택합니다.
장치 자동 실행 선언은 자동 실행에서 알려진 이벤트에 대해 장치 이벤트를 발생시킬 때 옵션으로 앱을 식별합니다.

시작 작업 섹션에서 첫 번째 시작 작업에 대해 다음 값을 입력합니다.

설정 값

동사 show

작업 표시 이름 사진 표시

콘텐츠 이벤트 WPD\ImageSource

작업 표시 이름 설정은 자동 실행이 앱에 대해 표시하는 문자열을 식별합니다. 동사 설정은 선택한 옵션에 대해 앱에 전달된 값을 식별합니다. 자동 실행 이벤트에 대해 여러 개의 시작 작업을 지정하고 동사 설정을 사용하여 사용자가 앱에 대해 선택한 옵션을 확인할 수 있습니다. 앱에 전달된 시작 이벤트 인수의 verb 속성을 확인하여 사용자가 선택한 옵션을 알 수 있습니다. 동사 설정에는 예약된 open을 제외한 모든 값을 사용할 수 있습니다. 단일 앱에서 여러 동사를 사용하는 예제는 빠른 시작: 콘텐츠 자동 실행을 위해 앱 등록을 참조하세요.
사용 가능한 선언 드롭다운 목록에서 파일 형식 연결을 선택하고 추가를 클릭합니다. 새 파일 형식 연결 선언에서 표시 이름 필드를 Show Images from Camera로 설정하고 이름 필드를 camera_association1로 설정합니다. 지원되는 파일 형식 섹션에서 새로 추가를 클릭합니다. 파일 형식 필드를 .jpg로 설정합니다. 지원되는 파일 형식 섹션에서 새로 추가를 다시 클릭합니다. 새 파일 연결의 파일 형식 필드를 .png로 설정합니다. 콘텐츠 이벤트의 경우 자동 실행이 앱에 명시적으로 연결되지 않은 파일 형식을 필터링합니다.
매니페스트 파일을 저장하고 닫습니다.

설정	값
동사	show
작업 표시 이름	사진 표시
콘텐츠 이벤트	WPD\ImageSource

2. HTML UI 추가

Default.html 파일을 열고 다음 HTML을 <body> 섹션에 넣습니다.

<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. 활성화 코드 추가

이 단계의 코드는 카메라의 장치 정보 ID를 fromId 메서드에 전달하여 카메라를 StorageDevice로 참조합니다. 카메라의 장치 정보 ID는 onactivated 이벤트 처리기에 전달된 인수의 detail.deviceInformationId 속성에서 가져옵니다.

js 폴더를 엽니다. Default.js 파일을 열고 기본 onactivated 함수를 다음 코드로 바꿉니다.

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. 장치 정보 표시 코드 추가

StorageDevice 클래스의 속성에서 카메라에 대한 정보를 가져올 수 있습니다. 이 단계의 코드는 앱이 실행될 때 장치 이름 및 기타 정보를 사용자에게 표시합니다. 그런 후 다음 단계에서 추가할 getImages 메서드를 호출하여 카메라에 저장된 이미지의 미리 보기를 표시합니다.

Default.js 파일에서 onactivated 함수 뒤에 다음 코드를 추가합니다.

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. 이미지 표시 코드 추가

이 단계의 코드는 카메라에 저장된 이미지의 미리 보기를 표시합니다. 이 코드는 카메라를 비동기 호출하여 미리 보기 이미지를 가져옵니다. 그러나 다음 비동기 호출은 이전 비동기 호출이 완료된 다음에야 실행됩니다. 따라서 카메라에 대해 한 번에 하나만 요청해야 합니다.

Default.js 파일에서 showImages 함수 뒤에 다음 코드를 추가합니다.

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. 앱 빌드 및 실행

F5를 눌러 앱을 빌드하고 배포합니다(디버그 모드).
앱을 실행하려면 PC에 카메라를 연결합니다. 그런 다음 자동 실행 옵션 목록에서 앱을 선택합니다. 참고 일부 카메라에서는 WPD\ImageSource 자동 실행 장치 이벤트에 대해 알리지 않습니다.

요약

이 자습서에서는 카메라 장치에서 이미지 파일을 표시하는 앱을 만들었습니다. 그리고 자동 실행 WPD\ImageSource 장치 이벤트에 대해 앱을 등록했습니다.

Share via