如何在Shiny中添加GazeCloudAPI.js实现在线眼动追踪？

API 探路者

2026-8-9

在Shiny应用中用GazeCloudAPI实现眼动追踪的正确方式

你的代码存在几个关键问题导致API未生效，以下是修正方案及说明：

修正后的完整代码

shinyApp(
  ui = basicPage( 
    actionButton("b1", "Travel time"),
    # 正确引入GazeCloudAPI脚本
    tags$script(src = "https://api.gazerecorder.com/GazeCloudAPI.js"),
    # 等待API加载完成后初始化眼动追踪
    tags$script('
      window.addEventListener("load", function() {
        // 可选：配置API参数，比如显示摄像头画面方便调试
        GazeCloudAPI.SetSettings({
          "show_camera": true
        });
        
        // 启动追踪并处理权限授权结果
        GazeCloudAPI.StartEyeTracking(function(success) {
          if (success) {
            console.log("眼动追踪启动成功");
          } else {
            console.log("启动失败，大概率是用户拒绝了摄像头权限");
          }
        });
      });
    ')
  ),
  
  server = function(input, output, session) {
    observeEvent(input$b1, {
      print(paste("This will only be printed once; all",
                  "subsequent button clicks won't do anything"))
    }, once = TRUE) 
  }
)

核心问题修正说明

脚本引入错误：你之前用tags$script嵌套了<script>标签，还误用了中文引号，这会导致浏览器无法正确解析加载API。直接使用tags$script(src = "API地址")才是Shiny中引入外部脚本的正确写法。
API未就绪就调用：直接执行GazeCloudAPI.StartEyeTracking()可能在脚本还未加载完成时触发，导致“GazeCloudAPI未定义”的报错。通过window.addEventListener("load", ...)等待页面和脚本全部加载完成后再初始化，就能避免这个问题。
权限处理缺失：眼动追踪需要摄像头权限，StartEyeTracking支持传入回调函数，可判断用户是否授权，方便排查启动失败的原因。