如何使用 UWP 裝置應用程式自訂相機選項

在 Windows 8.1 中，UWP 裝置應用程式可讓裝置製造商自定義飛出視窗，以在某些相機應用程式中顯示更多相機選項。 本主題介紹 相機 CaptureUI API 所顯示的更多選項飛出視窗，並示範相機範例 UWP 裝置應用程式的 C# 版本如何以自定義飛出視窗取代預設飛出視窗。 若要深入瞭解一般 UWP 裝置應用程式，請參閱 滿足 UWP 裝置應用程式。

注意

在 Windows 8.1 中，內建相機應用程式不會顯示 [ 更多選項 ] 按鈕，因此無法顯示 UWP 裝置應用程式以顯示更多相機選項。 不過，可供所有 UWP app 使用的 相機 CaptureUI 類別確實有 [更多選項] 按鈕，而且可以從中顯示 UWP 裝置應用程式。

適用於相機的 UWP 裝置應用程式的 C# 版本範例會使用 DeviceAppPage.xaml 頁面來示範自定義飛出視窗的 UI，以取得更多相機選項。 此範例也會使用相機驅動程式 MFT 來套用相機效果（媒體基礎轉換）。 如需詳細資訊，請參閱 建立相機驅動程式 MFT。

注意

本主題中顯示的程式代碼範例是以相機範例 UWP 裝置應用程式的 C# 版本為基礎。 此範例也適用於 JavaScript 和 C++。 下載範例以查看最新版本的程序代碼。

相機的更多選項

更多相機選項體驗是UWP裝置應用程式在使用 相機 CaptureUI API 從相機擷取或預覽視訊時所提供的功能。 它可透過 [相機 選項] 視窗中的 [更多選項] 連結來存取。 它不是全螢幕，而是顯示在飛出視窗內，這是顯示輕量型、內容相關的使用者介面的控件，當使用者按兩下或點選其外部時會關閉。

此體驗可用來醒目提示相機的區分功能，例如套用自定義視訊效果的能力。

當相機未安裝 UWP 裝置應用程式時，Windows 會提供預設更多的相機選項體驗。 如果 Windows 偵測到相機已安裝 UWP 裝置應用程式，且應用程式已選擇加入 windows.cameraSettings 擴充功能，您的應用程式會取代 Windows 所提供的預設體驗。

若要叫用飛出視窗以取得更多相機選項：

1. 開啟使用 相機 CaptureUI API 的 UWP 應用程式（例如，相機 CaptureUI 範例）

2. 點選 UI 中的 [ 選項] 按鈕

3. 這會開啟 相機 選項飛出視窗，顯示設定解析度和視訊防震的基本選項

4. 在 [相機 選項] 飛出視窗上，點選 [更多選項]

5. [ 更多選項 ] 飛出視窗隨即開啟

   • 未安裝相機的 UWP 裝置應用程式時，會顯示預設飛出視窗

   • 安裝相機的 UWP 裝置應用程式時，會出現自定義飛出視窗

此影像顯示自定義飛出視窗範例旁更多相機選項的預設飛出視窗。

必要條件

開始之前：

1. 設定您的開發電腦。 如需下載工具及建立開發人員帳戶的相關信息，請參閱 開始使用 。

2. 將您的應用程式與市集產生關聯。 如需相關信息，請參閱 建立UWP裝置應用程式 。

3. 為您的印表機建立裝置元數據，使其與您的應用程式產生關聯。 如需詳細資訊，請參閱 建立裝置元數據 。

4. 建置應用程式主頁面的UI。 所有UWP裝置應用程式都可以從 [開始] 啟動，其中會顯示全螢幕。 使用 \[開始\] 體驗，以符合您裝置的特定品牌和功能的方式反白顯示您的產品或服務。 它可以使用的UI控制件類型沒有任何特殊限制。 若要開始使用全螢幕體驗的設計，請參閱 Microsoft Store 設計原則。

步驟 1：註冊擴充功能

為了讓 Windows 能夠辨識應用程式可以提供自定義飛出視窗以取得更多相機選項，它必須註冊相機設定延伸模組。 此延伸模組會在專案中宣告 Extension ，並將 Category 屬性設定為的值 windows.cameraSettings。 在 C# 和 C++ 範例中， Executable 屬性會設定為 DeviceAppForWebcam.exe ，而 EntryPoint 屬性會設定為 DeviceAppForWebcam.App。

您可以在 Microsoft Visual Studio 中指令清單設計工具的 [宣告] 索引標籤上新增相機設定延伸模組。 您也可以使用 XML （Text） 編輯器手動編輯應用程式套件指令清單 XML。 以滑鼠右鍵按兩下 方案總管中的 Package.appxmanifest 檔案以進行編輯選項。

這個範例會顯示 元素中的 Extension 相機設定延伸模組，因為它出現在應用程式套件指令清單檔 Package.appxmanifest 中。

<?xml version="1.0" encoding="utf-8"?>
<Package xmlns="http://schemas.microsoft.com/appx/2010/manifest">
  <Identity Name="Microsoft.SDKSamples.DeviceAppForWebcam.CPP" Publisher="CN=Microsoft Corporation, O=Microsoft Corporation, L=Redmond, S=Washington, C=US" Version="1.0.0.0" />
  <Properties>
    <DisplayName>DeviceAppForWebcam CPP sample</DisplayName>
    <PublisherDisplayName>Microsoft Corporation</PublisherDisplayName>
    <Logo>Assets\storeLogo-sdk.png</Logo>
  </Properties>
  <Prerequisites>
    <OSMinVersion>6.3.0</OSMinVersion>
    <OSMaxVersionTested>6.3.0</OSMaxVersionTested>
  </Prerequisites>
  <Resources>
    <Resource Language="x-generate" />
  </Resources>
  <Applications>
    <Application Id="DeviceAppForWebcam.App" Executable="$targetnametoken$.exe" EntryPoint="DeviceAppForWebcam.App">
      <VisualElements DisplayName="DeviceAppForWebcam CPP sample" Logo="Assets\squareTile-sdk.png" SmallLogo="Assets\smallTile-sdk.png" Description="DeviceAppForWebcam CPP sample" ForegroundText="light" BackgroundColor="#00b2f0">
        <DefaultTile ShortName="DeviceApp CPP" ShowName="allLogos" />
        <SplashScreen Image="Assets\splash-sdk.png" BackgroundColor="#00b2f0" />
      </VisualElements>
      <Extensions>
        <Extension Category="windows.cameraSettings" Executable="DeviceAppForWebcam.exe" EntryPoint="DeviceAppForWebcam.App" />
      </Extensions>
    </Application>
  </Applications>
</Package>

步驟 2：建置 UI

在建置您的應用程式之前，您應該與設計師和行銷小組合作，以設計用戶體驗。 用戶體驗應該投影貴公司的品牌層面，並協助您建立與用戶的連線。

設計指導方針

在設計自定義飛出視窗之前， 請務必先檢閱 UWP 應用程式飛出視窗指導方針 。 指導方針可協助確保您的飛出視窗提供與其他UWP app一致的直覺式體驗。

針對您應用程式的主頁面，請記住，Windows 8.1 可以在單一監視器上以各種大小顯示多個應用程式。 請參閱下列指導方針，以深入瞭解您的應用程式如何在螢幕大小、視窗大小和方向之間正常重排。

• 視窗大小和縮放至畫面的指導方針

• 調整視窗大小為高和窄版面配置的指導方針

飛出視窗維度

顯示更多相機選項的飛出視窗高度為 625 像素，寬 340 像素。 包含 上方 [更多選項 ] 文字的區域是由 Windows 提供，高度約為 65 像素，而自定義飛出視窗的可檢視區域則保留 560 圖元。 自定義飛出視窗的寬度不應超過340圖元。

注意

如果您的自定義飛出視窗高度超過 560 像素，使用者可以滑動或捲動，以檢視位於可檢視區域上方或下方的飛出視窗部分。

建議的效果

• 色彩效果。 例如，灰階、敗血症音調，或將整個圖片太陽能化。

• 臉部追蹤效果。 在圖片中識別臉部和重疊，例如帽子或一對眼鏡，會新增到上面。

• 場景模式。 這些是不同光源條件的預設曝光和焦點模式。

建議的設定

• UWP 裝置應用程式的自定義飛出視窗可以提供切換，以啟用硬體實作的設定，例如製造商提供的色彩修正配置。

• 實作基本屬性，以補充UWP裝置應用程式所公開的其他設定。 例如，許多裝置可能會公開控件來調整亮度、對比、閃爍、焦點和曝光，但實作 TrueColor 的裝置可能不需要提供這些設定。

限制

• 當應用程式未串流或擷取時，請勿從主要應用程式開啟 UWP 裝置應用程式的自定義飛出視窗（藉由呼叫 CameraOptionsUI.Show 方法）。

• 請勿提供預覽，或從UWP裝置應用程式的自定義飛出視窗內取得視訊串流的擁有權。 自定義飛出視窗是用來作為另一個擷取視訊之應用程式的隨附專案。 擷取應用程式擁有影片串流的擁有權。 您不應該嘗試使用低階 API 來存取視訊串流。 這可能會導致非預期的行為，其中擷取應用程式會失去數據流的存取權。

• 請勿在自定義飛出視窗中調整解析度。

• 請勿嘗試在適用於自定義飛出視窗的區域之外顯示快顯、通知或對話框。 不允許這些類型的對話框。

• 請勿在自定義飛出視窗內起始音訊或視訊擷取。 自定義飛出視窗旨在擴充另一個正在擷取視訊的應用程式，而不是起始擷取本身。 此外，擷取音訊或視訊可能會觸發系統對話框，而且自定義飛出視窗內不允許快顯對話方塊。

步驟 3：處理啟用

如果您的 app 已宣告相機設定延伸模組，則必須實 OnActivated 作方法來處理應用程式 Activation 事件。 當UWP應用程式使用 相機 CaptureUI 類別呼叫 相機 OptionsUI.Show 方法時，就會觸發此事件。 應用程式啟用是當應用程式啟動時，您的應用程式可以選擇要啟動哪個頁面。 對於已宣告相機設定延伸模組的應用程式，Windows 會在 Activated 事件自變數中傳遞視訊裝置：Windows.ApplicationModel.Activation.IActivatedEventArgs。

當事件自變數的 屬性等於 Windows.ApplicationModel.Activation.ActivationKind.相機 時，UWP 裝置應用程式可以判斷啟用適用於相機設定（有人剛剛點選 [相機 選項] 對話框上的 kind [更多選項]設定。

這個範例會顯示 方法中的OnActivated啟用事件處理程式，因為它出現在App.xaml.cs檔案中。 然後，事件自變數會轉換成 Windows.ApplicationModel.Activation。相機設定 ActivatedEventArgs，並傳送至Initialize自定義飛出視窗的方法（DeviceAppPage.xaml.cs）。

protected override void OnActivated(IActivatedEventArgs args)
{
    if (args.Kind == ActivationKind.CameraSettings)
    {
        base.OnActivated(args);
        DeviceAppPage page = new DeviceAppPage();
        Window.Current.Content = page;
        page.Initialize((CameraSettingsActivatedEventArgs)args);

        Window.Current.Activate();
    }
}

步驟 4：控制設定和效果

Initialize呼叫自定義飛出視窗的方法時 DeviceAppPage.xaml.cs，影片裝置會透過事件自變數傳遞至飛出視窗。 這些自變數會公開控制相機的屬性：

• 自變數。VideoDeviceController 屬性提供類型為 Windows.Media.Devices.VideoDeviceController 的物件。 這個物件提供調整標準設定的方法。

• 自變數。VideoDeviceExtension 屬性是相機驅動程式 MFT 的指標。 如果未公開驅動程式 MFT 介面，則此屬性會是 Null。 如需數位相機驅動程式 MFT 的詳細資訊，請參閱 建立相機驅動程式 MFT。

這個範例會顯示 方法的Initialize一部分，因為它出現在DeviceAppPage.xaml.cs檔案中。 在這裡，會建立視訊設備控制器（videoDevController 物件）和相機驅動程式 MFT （lcWrapper 物件），並填入目前的相機設定飛出視窗。

public void Initialize(CameraSettingsActivatedEventArgs args)
{
    videoDevController = (VideoDeviceController)args.VideoDeviceController;

    if (args.VideoDeviceExtension != null)
    {
        lcWrapper = new WinRTComponent();
        lcWrapper.Initialize(args.VideoDeviceExtension);
    }

    bool bAuto = false;
    double value = 0.0;

    if (videoDevController.Brightness.Capabilities.Step != 0)
    {
        slBrt.Minimum = videoDevController.Brightness.Capabilities.Min;
        slBrt.Maximum = videoDevController.Brightness.Capabilities.Max;
        slBrt.StepFrequency = videoDevController.Brightness.Capabilities.Step;
        videoDevController.Brightness.TryGetValue(out value);
        slBrt.Value = value;
    }
    else
    {
        slBrt.IsEnabled = false;
    }
    if (videoDevController.Brightness.Capabilities.AutoModeSupported)
    {
        videoDevController.Brightness.TryGetAuto(out bAuto);
        tsBrtAuto.IsOn = bAuto;
    }
    else
    {
        tsBrtAuto.IsOn = false;
        tsBrtAuto.IsEnabled = false;
    }

    if (videoDevController.Contrast.Capabilities.Step != 0)
    {
        slCrt.Minimum = videoDevController.Contrast.Capabilities.Min;
        slCrt.Maximum = videoDevController.Contrast.Capabilities.Max;
        slCrt.StepFrequency = videoDevController.Contrast.Capabilities.Step;
        videoDevController.Contrast.TryGetValue(out value);
        slCrt.Value = value;
    }
    else
    {
        slCrt.IsEnabled = false;
    }
    // . . .
    // . . .
    // . . .

數位相機驅動程式 MFT 會在驅動程式 MFT 範例中示範。 如需數位相機驅動程式 MFT 的詳細資訊，請參閱 建立相機驅動程式 MFT。

步驟 5：套用變更

對飛出視窗上的控件進行變更時，對應控件的 Changed 事件會用來將變更套用至視訊設備控制器（videoDevController 物件）和相機驅動程式 MFT （lcWrapper 物件）。

此範例顯示將變更套用至視訊設備控制器和相機驅動程式 MFT 的 Changed 方法，如同它們出現在DeviceAppPage.xaml.cs檔案中。

protected void OnBrtAutoToggleChanged(object sender, RoutedEventArgs e)
{
    videoDevController.Brightness.TrySetAuto(tsBrtAuto.IsOn);
    slBrt.IsEnabled = !tsBrtAuto.IsOn;
}

protected void OnBrtSliderValueChanged(object sender, RoutedEventArgs e)
{
    videoDevController.Brightness.TrySetValue(slBrt.Value);
}

protected void OnCrtAutoToggleChanged(object sender, RoutedEventArgs e)
{
    videoDevController.Contrast.TrySetAuto(tsCrtAuto.IsOn);
    slCrt.IsEnabled = !tsCrtAuto.IsOn;
}

protected void OnCrtSliderValueChanged(object sender, RoutedEventArgs e)
{
    videoDevController.Contrast.TrySetValue(slCrt.Value);
}

protected void OnFocusAutoToggleChanged(object sender, RoutedEventArgs e)
{
    videoDevController.Focus.TrySetAuto(tsFocusAuto.IsOn);
    slFocus.IsEnabled = !tsFocusAuto.IsOn;
}

protected void OnFocusSliderValueChanged(object sender, RoutedEventArgs e)
{
    videoDevController.Focus.TrySetValue(slFocus.Value);
}

protected void OnExpAutoToggleChanged(object sender, RoutedEventArgs e)
{
    videoDevController.Exposure.TrySetAuto(tsExpAuto.IsOn);
    slExp.IsEnabled = !tsExpAuto.IsOn;
}

protected void OnExpSliderValueChanged(object sender, RoutedEventArgs e)
{
    videoDevController.Exposure.TrySetValue(slExp.Value);
}

protected void OnEffectEnabledToggleChanged(object sender, RoutedEventArgs e)
{
    if (tsEffectEnabled.IsOn)
    {
        lcWrapper.Enable();
    }
    else
    {
        lcWrapper.Disable();
    }
    slEffect.IsEnabled = tsEffectEnabled.IsOn;
}

protected void OnEffectSliderValueChanged(object sender, RoutedEventArgs e)
{
    lcWrapper.UpdateDsp(Convert.ToInt32(slEffect.Value));
}

測試您的應用程式

本節說明如何安裝 UWP 裝置應用程式，以提供相機更多選項的自定義飛出視窗，如適用於相機的 UWP 裝置應用程式範例所示。

您必須先使用裝置元數據將其連結至相機，才能測試您的 UWP 裝置應用程式。

• 您需要印表機的裝置元數據套件複本，才能將裝置應用程式資訊新增至該套件。 如果您沒有裝置元數據，您可以使用裝置元數據撰寫精靈來建置它，如為 UWP 裝置應用程式建立裝置元數據主題中所述。

注意

若要使用 裝置元數據撰寫精靈，您必須先安裝 Microsoft Visual Studio Professional、Microsoft Visual Studio Ultimate 或 適用於 Windows 8.1 的獨立 SDK，才能完成本主題中的步驟。 安裝 Microsoft Visual Studio Express for Windows 會安裝不包含精靈的 SDK 版本。

下列步驟會建置您的應用程式並安裝裝置元數據。

1. 啟用測試簽署。

   1. 按兩下 DeviceMetadataWizard.exe，從 %ProgramFiles（x86）%\Windows Kits\8.1\bin\x86 啟動裝置元數據撰寫精靈

   2. 從 [ 工具] 功能表中，選取 [ 啟用測試簽署]。

2. 重新啟動電腦

3. 開啟方案 （.sln） 檔案來建置方案。 按 F7，或從範例載入後，從頂端功能表移至 [建>置方案 ]。

4. 中斷連線並卸載印表機。 需要此步驟，Windows 會在下次偵測到裝置時讀取更新的裝置元數據。

5. 編輯並儲存裝置元數據。 若要將裝置應用程式連結至您的裝置，您必須將裝置應用程式與裝置產生關聯。

   注意

   如果您尚未建立裝置元數據，請參閱 建立 UWP 裝置應用程式的裝置元數據。

   1. 如果裝置元數據撰寫精靈尚未開啟，請按兩下DeviceMetadataWizard.exe，從 %ProgramFiles（x86）%\Windows Kits\8.1\bin\x86 加以啟動。

   2. 按兩下 [ 編輯裝置元數據]。 這可讓您編輯現有的裝置元數據套件。

   3. 在 [ 開啟 ] 對話框中，找出與您的 UWP 裝置應用程式相關聯的裝置元數據套件。 （它有 devicemetadata-ms 擴展名。）

   4. 在 [ 指定 UWP 裝置應用程式資訊 ] 頁面上，於 [UWP 裝置應用程式] 方塊中 輸入 Microsoft Store 應用程式 資訊。 按兩下 [匯入 UWP 應用程式指令清單檔案]，自動輸入套件名稱、發行者名稱和 UWP 應用程式識別碼。

   5. 完成時，請按 [下一步] ，直到到達 [完成 ] 頁面為止。

   6. 在 [ 檢閱裝置元數據套件 ] 頁面上，確定所有設定都正確，然後選取 [ 將裝置元數據套件複製到本機計算機上的 元數據存放區] 複選框。 然後按一下 [儲存] 。

6. 重新連線您的裝置，讓 Windows 在裝置連線時讀取更新的裝置元數據。

   • 如果您有外部相機，只要連接相機即可。

   • 如果您有內部相機，請在 [裝置和印表機] 資料夾中重新整理電腦。 使用 裝置管理員 掃描硬體變更。 偵測到裝置時，Windows 應該讀取更新的元數據。

注意

如需安裝數位相機驅動程式 MFT 的相關信息，請參閱建立數位相機驅動程式 MFT 中的一節。

測試範例

若要測試相機選項體驗，請先下載下列範例：

• 相機範例的 UWP 裝置應用程式

• 相機 擷取 UI 範例

• 驅動程式 MFT 範例

然後，遵循驅動程式 MFT 範例頁面上提供的範例測試指示。