计分网页与vMix App间API对接实现方案咨询

现有代码问题排查 #

你现在写的jQuery请求跑不通，核心是几个低级错误：

• 请求路径不对：vMix所有HTTP API都要走/API/路径，你现在写的根路径/是vMix Web控制台的页面地址，根本不会执行控制指令
• $.get参数传法错误：jQuery的GET方法只认URL、参数对象、回调这几个入参，你把Function、Input这些参数拆成独立字符串传，浏览器根本不会把这些内容拼到请求里，vMix收不到任何控制指令
• 参数写死且没做异常处理：你把Value固定写了100，没有绑定实际计算的分数变量，也没加请求失败的提示，出问题没法快速排查
• 大概率会碰到跨域拦截：如果你的计分网页不是和vMix同端口同域名，浏览器默认会拦截跨域请求，直接发请求根本到不了vMix

正确对接步骤 #

前置配置 #

先打开vMix的设置，找到「Web Controller」选项：

• 确认Web控制器已开启，记住对应的端口（默认是8088）和本机局域网IP
• 开启跨域访问允许，赛事现场内网使用可以直接设置允许所有来源，避免CORS拦截
• 先手动拼好SetText的地址复制到浏览器地址栏测试，能直接改对应输入源的文字，再往代码里写，能省很多调试时间

修正后的jQuery实现代码 #

$(document).ready(function() {
  // 统一配置vMix参数，后续改IP、改输入源只需要改这里
  const VMIX_API = "http://192.168.100.147:8088/API/";
  const SCORE_INPUT_GUID = "c9a3e111-6ffd-4e1f-ab9b-10f0bba0b8b5";
  // 注意：SelectedName要写到具体的文本属性，和官方示例的Headline.Text格式一致，不要只写xaml文件名
  const HOME_SCORE_FIELD = "ScoreBoard.HomeScore.Text";
  const AWAY_SCORE_FIELD = "ScoreBoard.AwayScore.Text";

  let homeScore = 0;
  let awayScore = 0;

  // 主队加分按钮逻辑
  $("#B1").click(function() {
    homeScore += 15; // 按你的规则加15分
    $("#result_1").text(homeScore);
    // 发请求同步到vMix
    $.get(VMIX_API, {
      Function: "SetText",
      Input: SCORE_INPUT_GUID,
      SelectedName: HOME_SCORE_FIELD,
      Value: homeScore
    }).fail(function() {
      console.error("分数同步失败，请检查vMix连接状态");
      // 现场使用建议改成页面角落的固定提示，不要用alert弹框打断裁判操作
    })
  })

  // 客队加分、减分、重置分逻辑按上面的格式复制改参数就行
})

小技巧：不要用双击打开本地HTML文件的file://协议跑页面，随便搭个本地静态服务（比如装个Node.js跑npx serve、用IIS托管都行），能避开很多浏览器安全限制导致的奇怪问题。

技术选型建议 #

根据赛事规模选就行，不用上来就搞复杂框架：

• 小型赛事/快速落地场景：就用你现在的HTML+jQuery方案，单文件就能跑，裁判电脑上不用装额外环境，打开浏览器就能用，足够稳定
• 中大型赛事/需要多端协同：前端可以换成Vue3/React做更复杂的交互（比如犯规次数、暂停计时、选手信息展示），后端加个轻量Node.js服务做请求代理，所有发往vMix的请求都走后端转发，彻底绕开浏览器CORS限制，还能加操作日志、误操作撤销、分数自动备份的功能
• 高可靠性要求场景：加个本地分数缓存，每次分数变动先存到浏览器localStorage，就算vMix临时重启、网络断了，重连后能自动把最新分数同步到大屏，不会出现裁判端和大屏分数不一致的事故

*常见坑提醒：如果调用SetText接口返回200但大屏文字没改，90%是SelectedName参数写错了，去vMix的输入源设置里找到对应文本框的完整名称，复制过来不要手敲。

内容的提问来源于stack exchange，提问作者Ahmed Hani