Windows 市集應用程式實作手冊 - 使用 JavaScript : Lab 04

實驗 4 ：應用程式列和媒體擷取

概述

Windows 執行階段（ Windows Runtime ）的 Windows.Media.Capture 命名空間包含一組很方便好用的類別，可用來擷取媒體和吸納它到您的應用程式裡。特別是， CameraCaptureUI 類別更讓使用網路攝影機來抓取照片或視訊變得輕而易舉； CameraCaptureUI 甚至認得包含兩個攝影鏡頭（一個面向前方，另一個面向後方）的裝置，並且提供一個簡單而直覺的使用者介面可在兩者之間做切換。

在本實驗裡，您將強化 Contoso 食譜，讓它能允許使用者擷取自己最喜愛的食譜配方之照片和視訊，並將它們與其他應用程式分享。您也將新增應用程式列來提供快速存取這些功能的方法，並學習如何將彈出選單納入應用程式列命令中。

目標

本實驗將引導您如何：

在某一 Windows 8 應用程式中執行應用程式列。
新增命令和選單到應用程式列。
使用 Windows 執行階段（ Windows Runtime ）來抓取照片。
使用 Windows 執行階段（ Windows Runtime ）來擷取視訊。
使用「分享」協定來分享照片和視訊。

系統需求

要完成本實驗，您必須擁有下列東西：

Windows 8
Microsoft Visual Studio 2012

設定

為了讓您的電腦能進行本實驗，您必須先執行下列步驟：

安裝 Windows 8。
安裝 Microsoft Visual Studio 2012 。

練習

本動手做實驗室包含下列練習：

新增應用程式列
新增照片擷取
新增視訊擷取

完成本實驗，估計需要費時： 30 到 40 分鐘。

練習 1 ：新增應用程式列

在新增功能使 Contoso 食譜使用者能擷取和分享照片和視訊之前，我們需要先修改使用者介面，使它能存取這些功能。應用程式列正是做這件工作的完美工具。

任務 1 - 新增應用程式列到項目明細頁

首先，我們將新增應用程式列到項目明細頁。我們將包括吹牛（ Brag ）命令，用以擷取照片和視訊。我們也將使用彈出選單，讓使用者能在兩者之間做選擇。

在 Visual Studio 中，打開您在實驗 3 所完成的 ContosoCookbook 專案。如果您還沒完成實驗 3 ，或想啟動另外一份參考複本，您可以在本實驗的起始材料中找到一份完整的版本。
通常情況下，您會新增應用程式列到 default.html 頁面，讓所有載入的頁面分享此應用程式。然而，在我們這個食譜案例裡，只有 itemDetails 頁需要一個應用程式列，所以，我們將只新增它到該頁面。打開 itemDetail.html ，在結尾的 BODY 標籤前面新增下列陳述式。這些陳述式宣告了一個應用程式列和隨附的彈出選單。

HTML
<div id="appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'brag', label:'Brag', icon:'emoji2', section:'selection', type:'flyout', flyout:'bragFlyout'}"></button>
</div>
<div id="bragFlyout" data-win-control="WinJS.UI.Menu">
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'photo', label:'Photo'}"></button>
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'video', label:'Video' }"></button>
</div>

備註： AppBarCommand 的標籤（ label ）屬性指定了出現在命令底部的文字，而圖示（ icon ）屬性則識別了出現在其表面上的圖標。像 "emoji2" 之類的名稱都定義在適用於 JavaScript 的 Windows Library 之 ui.js 檔案中，並對應到 Segoe UI Symbol 字元集裡的字元碼。想查看這些字元，請啟動 Windows 8 字元對應表，從字型下拉選單中選擇 Segoe UI Symbol ，捲動到底部。立即圖解！
打開 itemDetail.js 並新增下列陳述式到 ready 函式尾部，以便處理 Flyout 裡選單項目的點擊。

JavaScript
// Handle click events from the Photo command
document.getElementById("photo").addEventListener("click", function (e) {
dtm.showShareUI();
});

// Handle click events from the Video command
document.getElementById("video").addEventListener("click", function (e) {
dtm.showShareUI();
});

備註： showShareUI 方法所顯示的「分享」使用者介面就是您選擇常用工具列裡的「分享」快速鍵所出現的相同使用者介面。您正在模擬（ stubbing out ）照片和視訊命令的處理程序，以便展現「分享」使用者介面。

任務 2 – 測試結果

現在，讓我們看看運作中的應用程式列。

請按壓 F5 來執行此應用程式。
點擊任一食譜，進到項目明細頁。
從螢幕底部向上刷、用鼠標右鍵單擊、或按壓視窗鍵 + Z 等方式來顯示應用程式列。
驗證一下：此應用程式列包含了一個吹牛（ Brag ）命令，點擊它就會顯示彈出選單，如圖 1 所示。

圖 1
項目明細頁的應用程式列
點擊選單裡的照片命令並驗證分享窗格的確出現。
返回 Visual Studio 並停止偵錯。

練習 2 ：新增照片擷取

相片快照（ snapping ）的使用者介面現在已經就定位。現在，讓我們修改程式碼，讓使用者可以拍照並與其他應用程式分享照片。Windows執行階段（ Windows Runtime ）的 Windows.Media.Capture 命名空間包含了一個命名為 CameraCaptureUI 的類別（ class ），它提供照相機硬體設備高階介面，讓我們與照相機的互動變得相當簡單。

任務 1 – 使用 CameraCaptureUI 來擷取照片

CameraCaptureUI 有一個 captureFileAsync 方法讓相片快照變得很簡便，所以，讓我們將它應用在 Contoso 食譜裡。趁著您還在 CameraCaptureUI 裡，讓我們修改項目明細頁裡的「分享」程式碼，以便讓它能夠分享擷取下來的照片和食譜配方的圖像。

返回 itemDetail.js 。在「文件」頂部、定義 dtm 這個變數的陳述式後面，新增下列陳述式。

JavaScript
var capture = Windows.Media.Capture;
var _photo;
var _video;
找到您在練習 1 所新增的照片命令之點擊處理程序，修改它，使它看起來像這樣子。

JavaScript
// Handle click events from the Photo command
document.getElementById("photo").addEventListener("click", function (e) {
var camera = new capture.CameraCaptureUI();

// Capture a photo and display the share UI
camera.captureFileAsync(capture.CameraCaptureUIMode.photo).then(function (file) {
if (file != null) {
_photo = file;
dtm.showShareUI();
}
});
});
找到您在前一個實驗所新增的 onDataRequested 事件處理程序。我們需要修改它，以便分享一份食譜配方，如果 _photo 是空的，或分享相片如果它不是空的。改寫此函式如下所示。

JavaScript
onDataRequested: function (e) {
var request = e.request;
request.data.properties.title = item.title;

if (_photo != null) {
request.data.properties.description = "Recipe photo";
var reference = storage.Streams.RandomAccessStreamReference.createFromFile(_photo);
request.data.properties.Thumbnail = reference;
request.data.setBitmap(reference);
_photo = null;
}
else {
request.data.properties.description = "Recipe ingredients and directions";

// Share recipe text
var recipe = "\r\nINGREDIENTS\r\n" + item.ingredients.join("\r\n");
recipe += ("\r\n\r\nDIRECTIONS\r\n" + item.directions);
request.data.setText(recipe);

// Share recipe image
var uri = item.backgroundImage;
if (item.backgroundImage.indexOf("http://") != 0)
uri = "ms-appx:///" + uri;

uri = new Windows.Foundation.Uri(uri);
var reference = storage.Streams.RandomAccessStreamReference.createFromUri(uri);
request.data.properties.thumbnail = reference;
request.data.setBitmap(reference);
}
},
請按壓 F5 來執行此應用程式，並點擊任一食譜配方進到項目明細頁。
顯示此應用程式列，點擊照片按鈕。發生什麼情況？
返回 Visual Studio 並停止偵錯。

任務 2 –啟用網路攝影機存取

Windows 8 應用程式必須取得網路攝影鏡頭的存取權限。此許可權限來自包含該應用程式中繼資料（ metadata ）的應用程式清單（ manifest ）。所以，下一個步驟就是編輯 Contoso 食譜應用程式清單來表明它需要存取運用網路攝影鏡頭。

在方案總管裡，雙擊 package.appxmanifest ，打開它，以便編輯。
到功能標籤並勾選網路攝影機方框，如圖 2 所示。

圖 2
啟動應用程式清單裡的網路攝影機存取

任務 3 – 測試結果

現在，網路攝影機存取已被啟動，讓我們來擷取相片吧。

請按壓 F5 來執行此應用程式並點擊任一食譜配方，進到項目明細頁。
顯示應用程式列，點擊照片按鈕。如果您被詢問：此應用程式是否可以使用您的網路攝影機，請點擊允許。
在照相機-擷取使用者介面出現時，點擊畫面來相片快照。
點擊畫面右下角的 OK 來接受此照片。
當分享使用者介面出現時，選擇一分享目標物，例如分享目標物樣本應用程式。
確認您剛剛擷取的照片已被分享目標物所接受。
返回 Visual Studio 並停止偵錯。

練習 3 ：新增視訊擷取

Contoso 食譜使用者現在可以抓取照片，並將它們與其他應用程式分享。在這個練習裡，您還要新增視訊擷取，其作法是，變更傳遞到 captureFileAsync 的參數來表明您要擷取「視訊」而不是照片，並使用 CameraCaptureUI 的視訊設定（ VideoSettings ）屬性來表明您要用什麼格式來擷取。

任務 1 – 使用 CameraCaptureUI 來擷取視訊

擷取視訊與擷取相片使用相同的 captureFileAsync 方法。讓我們修改您先前所摸擬製作的點擊處理程序。

找到您在練習 1 為視訊命令所新增的點擊處理程序，並修改它，使看起來像這個樣子。

JavaScript
// Handle click events from the Video command
document.getElementById("video").addEventListener("click", function (e) {
var camera = new capture.CameraCaptureUI();
camera.videoSettings.format = capture.CameraCaptureUIVideoFormat.wmv;

// Capture a video and display the share UI
camera.captureFileAsync(capture.CameraCaptureUIMode.video).then(function (file) {
if (file != null) {
_video = file;
dtm.showShareUI();
}
});
});
新增 else-if 文句到 onDataRequested 函式，以便讓應用程式除了分享照片之外，還可以分享視訊。

JavaScript
onDataRequested: function (e) {
var request = e.request;
request.data.properties.title = item.title;

if (_photo != null) {
request.data.properties.description = "Recipe photo";
var reference = storage.Streams.RandomAccessStreamReference.createFromFile(_photo);
request.data.properties.Thumbnail = reference;
request.data.setBitmap(reference);
_photo = null;
}
else if (_video != null)
{
request.data.properties.description = "Recipe video";
request.data.setStorageItems([_video]);
_video = null;
}
else {
request.data.properties.description = "Recipe ingredients and directions";

// Share recipe text
var recipe = "\r\nINGREDIENTS\r\n" + item.ingredients.join("\r\n");
recipe += ("\r\n\r\nDIRECTIONS\r\n" + item.directions);
request.data.setText(recipe);

// Share recipe image
var uri = item.backgroundImage;
if (item.backgroundImage.indexOf("http://") != 0)
uri = "ms-appx:///" + uri;

uri = new Windows.Foundation.Uri(uri);
var reference = storage.Streams.RandomAccessStreamReference.createFromUri(uri);
request.data.properties.thumbnail = reference;
request.data.setBitmap(reference);
}
},
進到應用程式清單的功能標籤，勾選麥克風方框。這是必需的，因為當您擷取視訊時， CameraCaptureUI 需要同時使用麥克風和照相機。

任務 2 – 測試結果

現在，讓我們來測試您剛剛新增的程式碼。

請按壓 F5 來執行此應用程式，點擊任一食譜配方，進到項目明細頁。
顯示應用程式列並點擊視訊按鈕。
如果被詢問：此應用程式是否可以使用您的照相機和麥克風，請點擊「允許」。
當照相機 - 擷取使用者介面出現時，點擊畫面來開始擷取視訊。
幾秒鐘之後，再度點擊畫面來停止擷取視訊。
點擊畫面右下角的 OK 來接受此視訊。
當分享使用者介面出現時，選擇一分享目標物，例如，分享目標物樣本應用程式。
確認您剛剛擷取的視訊已被分享目標物所接受。
返回 Visual Studio 並停止偵錯。

摘要

在某些平台上，要同時包括圖片和視訊擷取功能於一個應用程式裡是相當困難的事，因為這需要在照相機的設備裝置層級上進行介面整合。但是，藉由提供核心使用者介面和邏輯於 CameraCaptureU I 類別（ class ）內， Windows 執行階段（ Windows Runtime ）讓媒體擷取變得非常簡單。在 Contoso 食譜裡，我們只拿被擷取的影像和視訊檔案來做分享，而不是什麼功能都要做。然而，您可以輕鬆使用 Windows.Storage 命名空間裡的類型來儲存這些檔案到檔案系統裡，並允許使用者創建食譜配方照片和視訊的函式庫。

您或許沒有注意到，但是，當您在清單裡勾選網路攝影機和麥克風方框時，操作系統就會為您做一些很酷的事。如果您執行本應用程式，然後，選擇設定（Settings）快速鍵並選擇權限（ Permissions ），您將看見權限頁面現在包含了切換按鈕，可以開啟和關閉照相機和麥克風的存取。另外，使用者也可以停用（ disable ）使用照相機和麥克風的應用程式。最棒的是，您不用寫任何一行程式碼，就可以讓這些功能發生。

繼續下一個實驗

Last updated on 2014-06-12