Windows 应用中的凝视交互和眼动跟踪

根据用户眼睛的位置和移动，为跟踪用户的凝视、注意力和状态提供支持。

重要 API：Windows.Devices.Input.Preview、GazeDevicePreview、GazePointPreview、GazeInputSourcePreview

概述

凝视输入是一种强大的进行交互和使用 Windows 应用程序的方式，这些应用程序对于以下用户是特别有用的辅助技术：患有神经肌肉疾病（如 ALS），以及有其他肌肉或神经功能方面的残障。

此外，凝视输入为游戏（包括目标获取和跟踪）和传统生产力应用程序、展台和其他交互方案提供同样引人注目的机会，其中传统输入设备（键盘、鼠标、触摸）不可用，或者为其他任务（如持有购物袋）释放用户的手可能很有用/有帮助的情况。

隐私

由于眼动跟踪设备可能会收集敏感的个人数据，你需要在应用程序的应用清单中声明 gazeInput 功能（请参阅下面的“设置”部分）。 声明后，Windows 会自动提示用户提供同意对话框（首次运行应用时），用户必须授予应用与眼动跟踪设备通信的权限并访问此数据。

此外，如果你的应用收集、存储或传输眼动跟踪数据，则必须在应用的隐私声明中对此进行描述，并遵循应用开发人员协议和Microsoft应用商店策略中个人信息的其他所有要求。

安装

若要在 Windows 应用中使用凝视输入 API，你需要：

• 在 gazeInput 应用清单中指定功能。

  使用 Visual Studio 清单设计器打开 Package.appxmanifest 文件，或通过选择“查看代码”并将以下内容DeviceCapabilityCapabilities插入节点来手动添加该功能：

  <Capabilities>
     <DeviceCapability Name="gazeInput" />
  </Capabilities>
  

• 连接到系统（内置或外围设备）并打开的与 Windows 兼容的眼动跟踪设备。

  有关受支持的眼动跟踪设备列表，请参阅 Windows 10 中的目视控制入门。

基本眼动跟踪

在此示例中，我们演示了如何在 Windows 应用内跟踪用户的凝视，以及如何使用具有基本点击测试的计时函数指示他们在特定元素上保持凝视焦点的情况。

小型椭圆用于显示凝视点在应用程序视口中的位置，而 Windows 社区工具包中的 RadialProgressBar 则随机放置在画布上。 当在进度栏上检测到凝视焦点时，将启动计时器，当进度栏达到 100% 时，进度栏将随机重新定位在画布上。

使用计时器示例进行凝视跟踪

从凝视输入示例（基本）下载此示例

1. 首先，我们设置 UI (MainPage.xaml)。

   <Page
       x:Class="gazeinput.MainPage"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="using:gazeinput"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"    
       mc:Ignorable="d">
   
       <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
           <Grid x:Name="containerGrid">
               <Grid.RowDefinitions>
                   <RowDefinition Height="Auto"/>
                   <RowDefinition Height="*"/>
               </Grid.RowDefinitions>
               <StackPanel x:Name="HeaderPanel" 
                       Orientation="Horizontal" 
                       Grid.Row="0">
                   <StackPanel.Transitions>
                       <TransitionCollection>
                           <AddDeleteThemeTransition/>
                       </TransitionCollection>
                   </StackPanel.Transitions>
                   <TextBlock x:Name="Header" 
                          Text="Gaze tracking sample" 
                          Style="{ThemeResource HeaderTextBlockStyle}" 
                          Margin="10,0,0,0" />
                   <TextBlock x:Name="TrackerCounterLabel"
                          VerticalAlignment="Center"                 
                          Style="{ThemeResource BodyTextBlockStyle}"
                          Text="Number of trackers: " 
                          Margin="50,0,0,0"/>
                   <TextBlock x:Name="TrackerCounter"
                          VerticalAlignment="Center"                 
                          Style="{ThemeResource BodyTextBlockStyle}"
                          Text="0" 
                          Margin="10,0,0,0"/>
                   <TextBlock x:Name="TrackerStateLabel"
                          VerticalAlignment="Center"                 
                          Style="{ThemeResource BodyTextBlockStyle}"
                          Text="State: " 
                          Margin="50,0,0,0"/>
                   <TextBlock x:Name="TrackerState"
                          VerticalAlignment="Center"                 
                          Style="{ThemeResource BodyTextBlockStyle}"
                          Text="n/a" 
                          Margin="10,0,0,0"/>
               </StackPanel>
               <Canvas x:Name="gazePositionCanvas" Grid.Row="1">
                   <controls:RadialProgressBar
                       x:Name="GazeRadialProgressBar" 
                       Value="0"
                       Foreground="Blue" 
                       Background="White"
                       Thickness="4"
                       Minimum="0"
                       Maximum="100"
                       Width="100"
                       Height="100"
                       Outline="Gray"
                       Visibility="Collapsed"/>
                   <Ellipse 
                       x:Name="eyeGazePositionEllipse"
                       Width="20" Height="20"
                       Fill="Blue" 
                       Opacity="0.5" 
                       Visibility="Collapsed">
                   </Ellipse>
               </Canvas>
           </Grid>
       </Grid>
   </Page>
   

2. 接下来，初始化应用。

   在此代码片段中，我们声明全局对象并重写 OnNavigatedTo 页面事件以启动凝视设备观察程序以及 OnNavigatedFrom 页面事件以停止凝视设备观察程序。

   using System;
   using Windows.Devices.Input.Preview;
   using Windows.UI.Xaml.Controls;
   using Windows.UI.Xaml;
   using Windows.Foundation;
   using System.Collections.Generic;
   using Windows.UI.Xaml.Media;
   using Windows.UI.Xaml.Navigation;
   
   namespace gazeinput
   {
       public sealed partial class MainPage : Page
       {
           /// <summary>
           /// Reference to the user's eyes and head as detected
           /// by the eye-tracking device.
           /// </summary>
           private GazeInputSourcePreview gazeInputSource;
   
           /// <summary>
           /// Dynamic store of eye-tracking devices.
           /// </summary>
           /// <remarks>
           /// Receives event notifications when a device is added, removed, 
           /// or updated after the initial enumeration.
           /// </remarks>
           private GazeDeviceWatcherPreview gazeDeviceWatcher;
   
           /// <summary>
           /// Eye-tracking device counter.
           /// </summary>
           private int deviceCounter = 0;
   
           /// <summary>
           /// Timer for gaze focus on RadialProgressBar.
           /// </summary>
           DispatcherTimer timerGaze = new DispatcherTimer();
   
           /// <summary>
           /// Tracker used to prevent gaze timer restarts.
           /// </summary>
           bool timerStarted = false;
   
           /// <summary>
           /// Initialize the app.
           /// </summary>
           public MainPage()
           {
               InitializeComponent();
           }
   
           /// <summary>
           /// Override of OnNavigatedTo page event starts GazeDeviceWatcher.
           /// </summary>
           /// <param name="e">Event args for the NavigatedTo event</param>
           protected override void OnNavigatedTo(NavigationEventArgs e)
           {
               // Start listening for device events on navigation to eye-tracking page.
               StartGazeDeviceWatcher();
           }
   
           /// <summary>
           /// Override of OnNavigatedFrom page event stops GazeDeviceWatcher.
           /// </summary>
           /// <param name="e">Event args for the NavigatedFrom event</param>
           protected override void OnNavigatedFrom(NavigationEventArgs e)
           {
               // Stop listening for device events on navigation from eye-tracking page.
               StopGazeDeviceWatcher();
           }
       }
   }
   

3. 接下来，添加凝视设备观察程序方法。

   在 StartGazeDeviceWatcher中，我们调用 CreateWatcher 并声明眼动跟踪设备事件侦听器（DeviceAdded、 DeviceUpdated 和 DeviceRemoved）。

   在 DeviceAdded中，我们检查眼动跟踪设备的状态。 如果可行设备，我们会递增设备计数并启用凝视跟踪。 有关详细信息，请参阅下一步。

   在中 DeviceUpdated，我们还启用凝视跟踪，因为如果重新校准设备，则会触发此事件。

   在中 DeviceRemoved，我们递减了设备计数器并删除设备事件处理程序。

   在其中 StopGazeDeviceWatcher，我们关闭凝视设备观察程序。

    /// <summary>
    /// Start gaze watcher and declare watcher event handlers.
    /// </summary>
    private void StartGazeDeviceWatcher()
    {
        if (gazeDeviceWatcher == null)
        {
            gazeDeviceWatcher = GazeInputSourcePreview.CreateWatcher();
            gazeDeviceWatcher.Added += this.DeviceAdded;
            gazeDeviceWatcher.Updated += this.DeviceUpdated;
            gazeDeviceWatcher.Removed += this.DeviceRemoved;
            gazeDeviceWatcher.Start();
        }
    }

    /// <summary>
    /// Shut down gaze watcher and stop listening for events.
    /// </summary>
    private void StopGazeDeviceWatcher()
    {
        if (gazeDeviceWatcher != null)
        {
            gazeDeviceWatcher.Stop();
            gazeDeviceWatcher.Added -= this.DeviceAdded;
            gazeDeviceWatcher.Updated -= this.DeviceUpdated;
            gazeDeviceWatcher.Removed -= this.DeviceRemoved;
            gazeDeviceWatcher = null;
        }
    }

    /// <summary>
    /// Eye-tracking device connected (added, or available when watcher is initialized).
    /// </summary>
    /// <param name="sender">Source of the device added event</param>
    /// <param name="e">Event args for the device added event</param>
    private void DeviceAdded(GazeDeviceWatcherPreview source, 
        GazeDeviceWatcherAddedPreviewEventArgs args)
    {
        if (IsSupportedDevice(args.Device))
        {
            deviceCounter++;
            TrackerCounter.Text = deviceCounter.ToString();
        }
        // Set up gaze tracking.
        TryEnableGazeTrackingAsync(args.Device);
    }

    /// <summary>
    /// Initial device state might be uncalibrated, 
    /// but device was subsequently calibrated.
    /// </summary>
    /// <param name="sender">Source of the device updated event</param>
    /// <param name="e">Event args for the device updated event</param>
    private void DeviceUpdated(GazeDeviceWatcherPreview source,
        GazeDeviceWatcherUpdatedPreviewEventArgs args)
    {
        // Set up gaze tracking.
        TryEnableGazeTrackingAsync(args.Device);
    }

    /// <summary>
    /// Handles disconnection of eye-tracking devices.
    /// </summary>
    /// <param name="sender">Source of the device removed event</param>
    /// <param name="e">Event args for the device removed event</param>
    private void DeviceRemoved(GazeDeviceWatcherPreview source,
        GazeDeviceWatcherRemovedPreviewEventArgs args)
    {
        // Decrement gaze device counter and remove event handlers.
        if (IsSupportedDevice(args.Device))
        {
            deviceCounter--;
            TrackerCounter.Text = deviceCounter.ToString();

            if (deviceCounter == 0)
            {
                gazeInputSource.GazeEntered -= this.GazeEntered;
                gazeInputSource.GazeMoved -= this.GazeMoved;
                gazeInputSource.GazeExited -= this.GazeExited;
            }
        }
    }

4. 在这里，我们检查设备是否可行 IsSupportedDevice ，如果是，则尝试启用 TryEnableGazeTrackingAsync凝视跟踪。

   在 TryEnableGazeTrackingAsync中，我们声明凝视事件处理程序，并调用 GazeInputSourcePreview.GetForCurrentView（） 来获取对输入源的引用（这必须在 UI 线程上调用，请参阅 保持 UI 线程响应）。

   注意

   仅当应用程序连接并需要兼容的眼动跟踪设备时，才应调用 GazeInputSourcePreview.GetForCurrentView 。 否则，不需要同意对话框。

    /// <summary>
    /// Initialize gaze tracking.
    /// </summary>
    /// <param name="gazeDevice"></param>
    private async void TryEnableGazeTrackingAsync(GazeDevicePreview gazeDevice)
    {
        // If eye-tracking device is ready, declare event handlers and start tracking.
        if (IsSupportedDevice(gazeDevice))
        {
            timerGaze.Interval = new TimeSpan(0, 0, 0, 0, 20);
            timerGaze.Tick += TimerGaze_Tick;

            SetGazeTargetLocation();

            // This must be called from the UI thread.
            gazeInputSource = GazeInputSourcePreview.GetForCurrentView();

            gazeInputSource.GazeEntered += GazeEntered;
            gazeInputSource.GazeMoved += GazeMoved;
            gazeInputSource.GazeExited += GazeExited;
        }
        // Notify if device calibration required.
        else if (gazeDevice.ConfigurationState ==
                    GazeDeviceConfigurationStatePreview.UserCalibrationNeeded ||
                    gazeDevice.ConfigurationState ==
                    GazeDeviceConfigurationStatePreview.ScreenSetupNeeded)
        {
            // Device isn't calibrated, so invoke the calibration handler.
            System.Diagnostics.Debug.WriteLine(
                "Your device needs to calibrate. Please wait for it to finish.");
            await gazeDevice.RequestCalibrationAsync();
        }
        // Notify if device calibration underway.
        else if (gazeDevice.ConfigurationState == 
            GazeDeviceConfigurationStatePreview.Configuring)
        {
            // Device is currently undergoing calibration.  
            // A device update is sent when calibration complete.
            System.Diagnostics.Debug.WriteLine(
                "Your device is being configured. Please wait for it to finish"); 
        }
        // Device is not viable.
        else if (gazeDevice.ConfigurationState == GazeDeviceConfigurationStatePreview.Unknown)
        {
            // Notify if device is in unknown state.  
            // Reconfigure/recalbirate the device.  
            System.Diagnostics.Debug.WriteLine(
                "Your device is not ready. Please set up your device or reconfigure it."); 
        }
    }

    /// <summary>
    /// Check if eye-tracking device is viable.
    /// </summary>
    /// <param name="gazeDevice">Reference to eye-tracking device.</param>
    /// <returns>True, if device is viable; otherwise, false.</returns>
    private bool IsSupportedDevice(GazeDevicePreview gazeDevice)
    {
        TrackerState.Text = gazeDevice.ConfigurationState.ToString();
        return (gazeDevice.CanTrackEyes &&
                    gazeDevice.ConfigurationState == 
                    GazeDeviceConfigurationStatePreview.Ready);
    }

5. 接下来，我们设置凝视事件处理程序。

   我们分别显示和隐藏凝视跟踪椭圆 GazeEntered 和 GazeExited隐藏。

   在GazeMoved中，我们基于 GazeEnteredPreviewEventArgs 的 CurrentPoint 提供的 EyeGazePosition 移动凝视跟踪椭圆。 我们还管理 RadialProgressBar 上的凝视焦点计时器，这会触发进度栏的重新定位。 有关详细信息，请参阅下一步。

   /// <summary>
   /// GazeEntered handler.
   /// </summary>
   /// <param name="sender">Source of the gaze entered event</param>
   /// <param name="e">Event args for the gaze entered event</param>
   private void GazeEntered(
       GazeInputSourcePreview sender, 
       GazeEnteredPreviewEventArgs args)
   {
       // Show ellipse representing gaze point.
       eyeGazePositionEllipse.Visibility = Visibility.Visible;
   
       // Mark the event handled.
       args.Handled = true;
   }
   
   /// <summary>
   /// GazeExited handler.
   /// Call DisplayRequest.RequestRelease to conclude the 
   /// RequestActive called in GazeEntered.
   /// </summary>
   /// <param name="sender">Source of the gaze exited event</param>
   /// <param name="e">Event args for the gaze exited event</param>
   private void GazeExited(
       GazeInputSourcePreview sender, 
       GazeExitedPreviewEventArgs args)
   {
       // Hide gaze tracking ellipse.
       eyeGazePositionEllipse.Visibility = Visibility.Collapsed;
   
       // Mark the event handled.
       args.Handled = true;
   }
   
   /// <summary>
   /// GazeMoved handler translates the ellipse on the canvas to reflect gaze point.
   /// </summary>
   /// <param name="sender">Source of the gaze moved event</param>
   /// <param name="e">Event args for the gaze moved event</param>
   private void GazeMoved(GazeInputSourcePreview sender, GazeMovedPreviewEventArgs args)
   {
       // Update the position of the ellipse corresponding to gaze point.
       if (args.CurrentPoint.EyeGazePosition != null)
       {
           double gazePointX = args.CurrentPoint.EyeGazePosition.Value.X;
           double gazePointY = args.CurrentPoint.EyeGazePosition.Value.Y;
   
           double ellipseLeft = 
               gazePointX - 
               (eyeGazePositionEllipse.Width / 2.0f);
           double ellipseTop = 
               gazePointY - 
               (eyeGazePositionEllipse.Height / 2.0f) - 
               (int)Header.ActualHeight;
   
           // Translate transform for moving gaze ellipse.
           TranslateTransform translateEllipse = new TranslateTransform
           {
               X = ellipseLeft,
               Y = ellipseTop
           };
   
           eyeGazePositionEllipse.RenderTransform = translateEllipse;
   
           // The gaze point screen location.
           Point gazePoint = new Point(gazePointX, gazePointY);
   
           // Basic hit test to determine if gaze point is on progress bar.
           bool hitRadialProgressBar = 
               DoesElementContainPoint(
                   gazePoint, 
                   GazeRadialProgressBar.Name, 
                   GazeRadialProgressBar); 
   
           // Use progress bar thickness for visual feedback.
           if (hitRadialProgressBar)
           {
               GazeRadialProgressBar.Thickness = 10;
           }
           else
           {
               GazeRadialProgressBar.Thickness = 4;
           }
   
           // Mark the event handled.
           args.Handled = true;
       }
   }
   

6. 最后，下面是用于管理此应用的凝视焦点计时器的方法。

   DoesElementContainPoint 检查凝视指针是否在进度栏上方。 如果是这样，它将启动凝视计时器，并在每个凝视计时器刻度上递增进度栏。

   SetGazeTargetLocation 设置进度栏的初始位置，如果进度栏结束（具体取决于凝视焦点计时器），则将进度栏移动到随机位置。

   /// <summary>
   /// Return whether the gaze point is over the progress bar.
   /// </summary>
   /// <param name="gazePoint">The gaze point screen location</param>
   /// <param name="elementName">The progress bar name</param>
   /// <param name="uiElement">The progress bar UI element</param>
   /// <returns></returns>
   private bool DoesElementContainPoint(
       Point gazePoint, string elementName, UIElement uiElement)
   {
       // Use entire visual tree of progress bar.
       IEnumerable<UIElement> elementStack = 
           VisualTreeHelper.FindElementsInHostCoordinates(gazePoint, uiElement, true);
       foreach (UIElement item in elementStack)
       {
           //Cast to FrameworkElement and get element name.
           if (item is FrameworkElement feItem)
           {
               if (feItem.Name.Equals(elementName))
               {
                   if (!timerStarted)
                   {
                       // Start gaze timer if gaze over element.
                       timerGaze.Start();
                       timerStarted = true;
                   }
                   return true;
               }
           }
       }
   
       // Stop gaze timer and reset progress bar if gaze leaves element.
       timerGaze.Stop();
       GazeRadialProgressBar.Value = 0;
       timerStarted = false;
       return false;
   }
   
   /// <summary>
   /// Tick handler for gaze focus timer.
   /// </summary>
   /// <param name="sender">Source of the gaze entered event</param>
   /// <param name="e">Event args for the gaze entered event</param>
   private void TimerGaze_Tick(object sender, object e)
   {
       // Increment progress bar.
       GazeRadialProgressBar.Value += 1;
   
       // If progress bar reaches maximum value, reset and relocate.
       if (GazeRadialProgressBar.Value == 100)
       {
           SetGazeTargetLocation();
       }
   }
   
   /// <summary>
   /// Set/reset the screen location of the progress bar.
   /// </summary>
   private void SetGazeTargetLocation()
   {
       // Ensure the gaze timer restarts on new progress bar location.
       timerGaze.Stop();
       timerStarted = false;
   
       // Get the bounding rectangle of the app window.
       Rect appBounds = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().VisibleBounds;
   
       // Translate transform for moving progress bar.
       TranslateTransform translateTarget = new TranslateTransform();
   
       // Calculate random location within gaze canvas.
           Random random = new Random();
           int randomX = 
               random.Next(
                   0, 
                   (int)appBounds.Width - (int)GazeRadialProgressBar.Width);
           int randomY = 
               random.Next(
                   0, 
                   (int)appBounds.Height - (int)GazeRadialProgressBar.Height - (int)Header.ActualHeight);
   
       translateTarget.X = randomX;
       translateTarget.Y = randomY;
   
       GazeRadialProgressBar.RenderTransform = translateTarget;
   
       // Show progress bar.
       GazeRadialProgressBar.Visibility = Visibility.Visible;
       GazeRadialProgressBar.Value = 0;
   }
   

另请参阅

资源

• Windows 社区工具包凝视库

主题示例

• 凝视示例 （基本） （C#）