使用Presentation API/Google Cast实现时钟网站电视投屏的问题咨询

问题核心原因 #

你遇到的「仅支持特定视频站点投屏」提示是Google Cast的官方限制：当前Chrome内置的Presentation API对Chromecast类设备的直接投屏能力，仅对白名单认证过的站点开放，未经过Cast开发者平台注册的自定义站点无法直接调用该能力，此前流传的添加空video元素绕过限制的方案已经在2022年的Chrome版本更新中被修复，无法再使用。

具体实现步骤 #

1. 注册Google Cast开发者账号 #

你查到的5美元注册费是官方要求的开发者准入费用，缴纳完成后即可获得自定义接收器的发布权限，该方案是目前唯一可行的正式上线方案，不存在无效的情况。

2. 开发并部署接收器 #

接收器不需要打包为Android应用，仅需独立的HTML页面即可：

• 将你时钟网站的展示逻辑迁移到单独的HTML文件中，可根据需求添加接收发送端参数的逻辑适配不同展示效果
• 将该HTML文件部署到公网可访问的HTTPS服务器上

3. 发送端页面集成Cast SDK #

不要仅调用原生Presentation API，需要在你的时钟站点（发送端）集成Google Cast Sender SDK，核心逻辑示例如下：

// 监听Cast SDK加载完成事件
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    // 初始化Cast上下文，填入后续注册拿到的接收器应用ID
    const castContext = cast.framework.CastContext.getInstance();
    castContext.setOptions({
      receiverApplicationId: 'YOUR_RECEIVER_APP_ID',
      autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
    });
  }
};

// 投屏按钮触发逻辑
async function triggerCast() {
  try {
    const castSession = await cast.framework.CastContext.getInstance().requestSession();
    // 可选：向接收器传递自定义参数
    castSession.sendMessage('urn:x-cast:your.custom.namespace', {
      action: 'showClock',
      style: 'dark'
    });
  } catch (err) {
    // 处理用户取消投屏等异常
  }
}

4. 提交审核上线 #

在Cast开发者后台填写你部署好的接收器HTTPS地址，提交应用审核，你的时钟站点属于纯展示类工具，无违规内容，通常1-2个工作日即可通过审核，审核完成后所有用户访问你的站点都可以正常触发投屏到支持Cast的电视设备。

临时测试方案 #

如果需要提前测试效果，可以不用先注册开发者账号：
打开Chrome浏览器的chrome://flags页面，搜索cast相关选项，启用未认证接收器的测试支持，填入本地部署的接收器地址即可在当前浏览器上测试投屏效果，该方案仅适合开发调试使用，无法面向普通用户开放。

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