Bagikan melalui


Cara menyesuaikan opsi kamera dengan aplikasi perangkat UWP

Di Windows 8.1, aplikasi perangkat UWP memungkinkan produsen perangkat menyesuaikan flyout yang menampilkan lebih banyak opsi kamera di beberapa aplikasi kamera. Topik ini memperkenalkan flyout Opsi lainnya yang ditampilkan oleh Kamera CaptureUI API, dan menunjukkan bagaimana versi C# dari aplikasi perangkat UWP untuk sampel kamera menggantikan flyout default dengan flyout kustom. Untuk mempelajari selengkapnya tentang aplikasi perangkat UWP secara umum, lihat Memenuhi aplikasi perangkat UWP.

Catatan

Di Windows 8.1, aplikasi kamera bawaan tidak menampilkan tombol Opsi lainnya dan oleh karena itu tidak dapat menampilkan aplikasi perangkat UWP untuk menampilkan lebih banyak opsi kamera. Namun, kelas Kamera CaptureUI, yang tersedia untuk semua aplikasi UWP, memang memiliki tombol Opsi lainnya dan dapat menampilkan aplikasi perangkat UWP darinya.

Versi C# dari aplikasi perangkat UWP untuk sampel kamera menggunakan halaman DeviceAppPage.xaml untuk menunjukkan UI flyout kustom untuk opsi kamera lainnya. Sampel ini juga menerapkan efek kamera menggunakan MFT driver kamera (transformasi media foundation). Untuk informasi selengkapnya tentang itu, lihat Membuat MFT driver kamera.

Catatan

Contoh kode yang ditampilkan dalam topik ini didasarkan pada versi C# dari aplikasi perangkat UWP untuk sampel kamera . Sampel ini juga tersedia di JavaScript dan C++. Unduh sampel untuk melihat versi terbaru kode.

Opsi lainnya untuk kamera

Semakin banyak pengalaman opsi kamera adalah fungsionalitas yang disediakan aplikasi perangkat UWP saat aplikasi lain, aplikasi UWP, mengambil atau mempratinjau video dari kamera dengan menggunakan api Kamera CaptureUI. Ini dapat diakses melalui tautan Opsi lainnya di jendela opsi Kamera. Ini bukan layar penuh, tetapi ditampilkan dalam flyout, yang merupakan kontrol untuk menampilkan antarmuka pengguna kontekstual ringan yang dimatikan saat pengguna mengklik atau mengetuk di luarnya.

Pengalaman ini dapat digunakan untuk menyoroti fitur yang berbeda untuk kamera Anda, seperti kemampuan untuk menerapkan efek video kustom.

Saat aplikasi perangkat UWP tidak diinstal untuk kamera, Windows memberikan pengalaman opsi kamera lainnya secara default. Jika Windows mendeteksi bahwa aplikasi perangkat UWP diinstal untuk kamera Anda, dan bahwa aplikasi telah ikut serta dalam windows.cameraSettings ekstensi, aplikasi Anda menggantikan pengalaman default yang disediakan oleh Windows.

Untuk memanggil flyout untuk opsi kamera lainnya:

  1. Buka aplikasi UWP yang menggunakan api Kamera CaptureUI (sampel Kamera CaptureUI, misalnya)

  2. Ketuk tombol Opsi di UI

  3. Ini membuka flyout opsi Kamera yang menunjukkan opsi dasar untuk mengatur resolusi dan stabilisasi video

  4. Pada flyout opsi Kamera, ketuk Opsi lainnya

  5. Flyout Opsi lainnya terbuka

    • Flyout default muncul ketika tidak ada aplikasi perangkat UWP untuk kamera yang diinstal

    • Flyout kustom muncul saat aplikasi perangkat UWP untuk kamera diinstal

Side-by-side images of the default flyout for more camera options and a custom flyout.

Gambar ini menunjukkan flyout default untuk lebih banyak opsi kamera di samping contoh flyout kustom.

Prasyarat

Sebelum Anda memulai:

  1. Siapkan PC pengembangan Anda. Lihat Memulai untuk informasi tentang mengunduh alat dan membuat akun pengembang.

  2. Kaitkan aplikasi Anda dengan toko. Lihat Membuat aplikasi perangkat UWP untuk informasi tentang hal tersebut.

  3. Buat metadata perangkat untuk printer Anda yang mengaitkannya dengan aplikasi Anda. Lihat Membuat metadata perangkat untuk informasi selengkapnya tentang hal tersebut.

  4. Buat UI untuk halaman utama aplikasi Anda. Semua aplikasi perangkat UWP dapat diluncurkan dari Mulai, tempat aplikasi tersebut akan ditampilkan layar penuh. Gunakan pengalaman Mulai untuk menyoroti produk atau layanan Anda dengan cara yang cocok dengan merek dan fitur tertentu dari perangkat Anda. Tidak ada batasan khusus pada jenis kontrol UI yang dapat digunakannya. Untuk mulai menggunakan desain pengalaman layar penuh, lihat prinsip desain Microsoft Store.

Langkah 1: Daftarkan ekstensi

Agar Windows dapat mengenali bahwa aplikasi dapat menyediakan flyout kustom untuk lebih banyak opsi kamera, aplikasi harus mendaftarkan ekstensi pengaturan kamera. Ekstensi ini dideklarasikan dalam Extension elemen, dengan atribut yang Category diatur ke nilai windows.cameraSettings. Dalam sampel C# dan C++, Executable atribut diatur ke DeviceAppForWebcam.exe dan EntryPoint atribut diatur ke DeviceAppForWebcam.App.

Anda dapat menambahkan ekstensi pengaturan kamera pada tab Deklarasi dari Perancang Manifes di Microsoft Visual Studio. Anda juga dapat mengedit XML manifes paket aplikasi secara manual, menggunakan Editor XML (Teks). Klik kanan file Package.appxmanifest di Penjelajah Solusi untuk opsi pengeditan.

Contoh ini menunjukkan ekstensi pengaturan kamera dalam Extension elemen , seperti yang muncul dalam file manifes paket aplikasi, 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>

Langkah 2: Bangun UI

Sebelum membangun aplikasi, Anda harus bekerja sama dengan perancang dan tim pemasaran Anda untuk merancang pengalaman pengguna. Pengalaman pengguna harus memproyeksikan aspek branding perusahaan Anda dan membantu Anda membangun koneksi dengan pengguna Anda.

Pedoman desain

Penting untuk meninjau panduan flyout aplikasi UWP sebelum merancang flyout kustom Anda. Panduan ini membantu memastikan bahwa flyout Anda memberikan pengalaman intuitif yang konsisten dengan aplikasi UWP lainnya.

Untuk halaman utama aplikasi Anda, perlu diingat bahwa Windows 8.1 dapat menampilkan beberapa aplikasi dalam berbagai ukuran pada satu monitor. Lihat panduan berikut untuk mempelajari selengkapnya tentang bagaimana aplikasi Anda dapat me-reflow dengan anggun antara ukuran layar, ukuran jendela, dan orientasi.

Dimensi flyout

Flyout yang menampilkan lebih banyak opsi kamera memiliki tinggi 625 piksel dan lebar 340 piksel. Area yang berisi teks Opsi lainnya di bagian atas disediakan oleh Windows dan tingginya sekitar 65 piksel, meninggalkan 560 piksel untuk area flyout kustom yang dapat dilihat. Flyout kustom tidak boleh melebihi lebar 340 piksel.

flyout dimensions for more camera options.

Catatan

Jika flyout kustom Anda memiliki tinggi lebih dari 560 piksel, pengguna dapat menggeser atau menggulir untuk melihat bagian flyout yang berada di atas atau di bawah area yang dapat dilihat.

Efek yang disarankan

  • Efek warna. Misalnya, skala abu-abu, nada sepia, atau menenangkan seluruh gambar.

  • Efek pelacakan wajah. Di mana wajah diidentifikasi dalam gambar dan overlay, seperti topi atau sepasang kacamata, ditambahkan di atasnya.

  • Mode adegan. Ini adalah mode pencahayaan dan fokus prasetel untuk kondisi pencahayaan yang berbeda.

Pengaturan yang disarankan

  • Flyout kustom aplikasi perangkat UWP Anda dapat menyediakan sakelar untuk mengaktifkan pengaturan yang diterapkan perangkat keras, seperti skema koreksi warna yang disediakan produsen.

  • Terapkan properti dasar yang melengkapi pengaturan lain yang diekspos oleh aplikasi perangkat UWP Anda. Misalnya, banyak perangkat dapat mengekspos kontrol untuk menyesuaikan kecerahan, kontras, berkedip, fokus, dan paparan, tetapi perangkat yang mengimplementasikan TrueColor untuk secara otomatis menyesuaikan kecerahan dan kontras mungkin tidak perlu menyediakan pengaturan ini.

Batasan

  • Jangan buka flyout kustom aplikasi perangkat UWP Anda dari aplikasi utama Anda (dengan memanggil CameraOptionsUI.Show metode ) saat aplikasi tidak streaming atau menangkap.

  • Jangan berikan pratinjau atau ambil kepemilikan aliran video dari dalam flyout kustom aplikasi perangkat UWP Anda. Flyout kustom dimaksudkan untuk berfungsi sebagai pendamping aplikasi lain yang mengambil video. Aplikasi pengambilan memiliki kepemilikan aliran video. Anda tidak boleh mencoba mengakses aliran video menggunakan API tingkat rendah. Ini dapat menyebabkan perilaku tak terduga, di mana aplikasi pengambilan kehilangan akses ke aliran.

  • Jangan sesuaikan resolusi dalam flyout kustom.

  • Jangan mencoba menampilkan pop-up, pemberitahuan, atau dialog di luar area yang ditujukan untuk flyout kustom. Jenis dialog ini tidak diizinkan.

  • Jangan memulai pengambilan audio atau video di dalam flyout kustom. Flyout kustom dimaksudkan untuk memperluas aplikasi lain yang menangkap video, daripada memulai pengambilan itu sendiri. Selain itu, menangkap audio atau video dapat memicu dialog sistem, dan dialog pop-up tidak diizinkan di dalam flyout kustom.

Langkah 3: Menangani aktivasi

Jika aplikasi Anda telah mendeklarasikan ekstensi pengaturan kamera, aplikasi harus menerapkan OnActivated metode untuk menangani peristiwa Aktivasi aplikasi. Kejadian ini dipicu saat aplikasi UWP, menggunakan kelas Kamera CaptureUI, memanggil metode Kamera OptionsUI.Show. Aktivasi aplikasi adalah ketika aplikasi Anda dapat memilih halaman mana yang akan diluncurkan saat aplikasi dimulai. Untuk aplikasi yang telah mendeklarasikan ekstensi pengaturan kamera, Windows meneruskan perangkat video dalam argumen Peristiwa yang diaktifkan: Windows.ApplicationModel.Activation.IActivatedEventArgs.

Aplikasi perangkat UWP dapat menentukan bahwa aktivasi ditujukan untuk pengaturan kamera (bahwa seseorang baru saja mengetuk Opsi lainnya pada dialog opsi Kamera) ketika properti argumen kind peristiwa sama dengan Windows.ApplicationModel.Activation.ActivationKind.KameraPengaturan.

Contoh ini menunjukkan penanganan aktivitas aktivasi dalam OnActivated metode , seperti yang muncul di file App.xaml.cs . Argumen peristiwa kemudian ditransmisikan sebagai Windows.ApplicationModel.Activation. KameraPengaturan ActivatedEventArgs dan dikirim ke Initialize metode flyout kustom (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();
    }
}

Langkah 4: Mengontrol pengaturan dan efek

Initialize Ketika metode flyout kustom (DeviceAppPage.xaml.cs) dipanggil, perangkat video diteruskan ke flyout melalui argumen peristiwa. Argumen ini mengekspos properti untuk mengontrol kamera:

  • Args. Properti VideoDeviceController menyediakan objek jenis Windows.Media.Devices.VideoDeviceController. Objek ini menyediakan metode untuk menyesuaikan pengaturan standar.

  • Args. Properti VideoDeviceExtension adalah penunjuk ke MFT driver kamera. Properti ini akan null jika tidak ada antarmuka MFT Driver yang terekspos. Untuk informasi selengkapnya tentang MFTs driver kamera, lihat Membuat MFT driver kamera.

Contoh ini menunjukkan sebagian Initialize metode, seperti yang muncul dalam file DeviceAppPage.xaml.cs . Di sini, pengontrol perangkat video (objek videoDevController) dan MFT driver kamera (objek lcWrapper) dibuat dan flyout diisi dengan pengaturan kamera saat ini.

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 driver kamera ditunjukkan dalam sampel Driver MFT . Untuk informasi selengkapnya tentang MFTs driver kamera, lihat Membuat MFT driver kamera.

Langkah 5: Terapkan perubahan

Ketika perubahan dilakukan pada kontrol pada flyout, peristiwa Diubah dari kontrol yang sesuai digunakan untuk menerapkan perubahan pada pengontrol perangkat video (objek videoDevController) dan driver kamera MFT (objek lcWrapper).

Contoh ini menunjukkan metode Diubah yang menerapkan perubahan pada pengontrol perangkat video dan MFT driver kamera, seperti yang muncul di file 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));
}

Menguji aplikasi Anda

Bagian ini menjelaskan cara menginstal aplikasi perangkat UWP yang menyediakan flyout kustom untuk Opsi kamera lainnya, seperti yang ditunjukkan di aplikasi perangkat UWP untuk sampel kamera .

Sebelum dapat menguji aplikasi perangkat UWP, aplikasi tersebut harus ditautkan ke kamera Anda menggunakan metadata perangkat.

  • Anda memerlukan salinan paket metadata perangkat untuk printer Anda, untuk menambahkan info aplikasi perangkat ke dalamnya. Jika Anda tidak memiliki metadata perangkat, Anda dapat membuatnya menggunakan Wizard Penulisan Metadata Perangkat seperti yang dijelaskan dalam topik Membuat metadata perangkat untuk aplikasi perangkat UWP Anda.

Catatan

Untuk menggunakan Wizard Penulisan Metadata Perangkat, Anda harus menginstal Microsoft Visual Studio Professional, Microsoft Visual Studio Ultimate, atau SDK mandiri untuk Windows 8.1, sebelum menyelesaikan langkah-langkah dalam topik ini. Menginstal Microsoft Visual Studio Express untuk Windows menginstal versi SDK yang tidak menyertakan wizard.

Langkah-langkah berikut membuat aplikasi Anda dan menginstal metadata perangkat.

  1. Aktifkan penandatanganan pengujian.

    1. Mulai Wizard Penulisan Metadata Perangkat dari %ProgramFiles(x86)%\Windows Kits\8.1\bin\x86, dengan mengklik dua kali DeviceMetadataWizard.exe

    2. Dari menu Alat , pilih Aktifkan Penandatanganan Pengujian.

  2. Reboot komputer

  3. Bangun solusi dengan membuka file solusi (.sln). Tekan F7 atau buka Build-Build> Solution dari menu atas setelah sampel dimuat.

  4. Putuskan sambungan dan copot pemasangan pencetak. Langkah ini diperlukan agar Windows akan membaca metadata perangkat yang diperbarui saat perangkat terdeteksi berikutnya.

  5. Edit dan simpan metadata perangkat. Untuk menautkan aplikasi perangkat ke perangkat, Anda harus mengaitkan aplikasi perangkat dengan perangkat Anda.

    Catatan

    Jika Anda belum membuat metadata perangkat, lihat Membuat metadata perangkat untuk aplikasi perangkat UWP Anda.

    1. Jika Wizard Penulisan Metadata Perangkat belum dibuka, mulai dari %ProgramFiles(x86)%\Windows Kits\8.1\bin\x86, dengan mengklik dua kali DeviceMetadataWizard.exe.

    2. Klik Edit Metadata Perangkat. Ini akan memungkinkan Anda mengedit paket metadata perangkat yang ada.

    3. Dalam kotak dialog Buka , temukan paket metadata perangkat yang terkait dengan aplikasi perangkat UWP Anda. (Ini memiliki ekstensi file devicemetadata-ms .)

    4. Pada halaman Tentukan informasi aplikasi perangkat UWP, masukkan info aplikasi Microsoft Store di kotak aplikasi perangkat UWP. Klik Impor file manifes aplikasi UWP untuk memasukkan nama paket, nama Penerbit, dan ID aplikasi UWP secara otomatis.

    5. Setelah selesai, klik Berikutnya hingga Anda masuk ke halaman Selesai .

    6. Pada halaman Tinjau paket metadata perangkat, pastikan semua pengaturan sudah benar dan pilih kotak centang Salin paket metadata perangkat ke penyimpanan metadata di komputer lokal. Kemudian, klik Simpan.

  6. Sambungkan kembali perangkat Anda sehingga Windows membaca metadata perangkat yang diperbarui saat perangkat tersambung.

    • Jika Anda memiliki kamera eksternal, cukup sambungkan kamera.

    • Jika Anda memiliki kamera internal, refresh PC di folder Perangkat dan Printer. Gunakan Manajer Perangkat untuk memindai perubahan perangkat keras. Windows harus membaca metadata yang diperbarui ketika perangkat terdeteksi.

Catatan

Untuk informasi tentang menginstal MFT driver kamera, lihat bagian Pengujian di Membuat MFT driver kamera.

Menguji sampel

Untuk menguji pengalaman opsi kamera, unduh sampel ini terlebih dahulu:

Kemudian, ikuti instruksi pengujian sampel yang disediakan di halaman sampel Driver MFT.