如何在Angular中实现Chrome Cast网页投屏功能

以下是可直接落地的实现方案，点击绑定的按钮会自动唤起Chrome原生的投屏设备选择弹窗，用户选中设备后自动将当前网页投到对应设备：

1. 加载Cast SDK #

在项目src/index.html的<head>标签内加入SDK加载脚本：

<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

2. 封装Cast逻辑公共服务 #

新建cast.service.ts，把SDK初始化、设备选择、投屏触发的逻辑统一封装，避免重复写代码：

import { Injectable } from '@angular/core';

// 声明全局window上的Cast相关类型，避免TS报错
declare global {
  interface Window {
    cast: any;
    __onGCastApiAvailable: (isAvailable: boolean) => void;
  }
}

@Injectable({ providedIn: 'root' })
export class CastService {
  private currentCastSession: any = null;
  // 默认使用Google官方公共接收器ID，无需自行开发接收端即可实现网页投屏
  private readonly RECEIVER_APP_ID = 'CC1AD845';

  constructor() {
    this.setupCastSdk();
  }

  private setupCastSdk(): void {
    // SDK加载完成后的初始化回调
    window.__onGCastApiAvailable = (isAvailable: boolean) => {
      if (!isAvailable) return;

      const castContext = window.cast.framework.CastContext.getInstance();
      // 配置Cast参数
      castContext.setOptions({
        receiverApplicationId: this.RECEIVER_APP_ID,
        autoJoinPolicy: window.cast.framework.AutoJoinPolicy.ORIGIN_SCOPED
      });

      // 监听投屏会话状态
      castContext.addEventListener(
        window.cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
        (event: any) => {
          switch (event.sessionState) {
            case window.cast.framework.SessionState.SESSION_STARTED:
              this.currentCastSession = event.session;
              break;
            case window.cast.framework.SessionState.SESSION_ENDED:
              this.currentCastSession = null;
              break;
          }
        }
      );
    };
  }

  // 对外暴露的触发方法：唤起设备选择弹窗，选完自动投屏当前页面
  public openCastDevicePicker(): void {
    const castContext = window.cast.framework.CastContext.getInstance();
    castContext.requestSession()
      .then(() => {
        if (!this.currentCastSession) return;
        // 把当前网页地址作为媒体资源加载到投屏设备
        const pageMediaInfo = new window.cast.media.MediaInfo(window.location.href, 'text/html');
        const loadRequest = new window.cast.media.LoadRequest(pageMediaInfo);
        this.currentCastSession.loadMedia(loadRequest)
          .catch((err: Error) => console.error('投屏内容加载失败：', err));
      })
      .catch((err: Error) => {
        // 用户取消选择、设备离线等场景会走到这里，按需加提示即可
        console.log('投屏未启动：', err.message);
      });
  }
}

3. 给按钮绑定触发事件 #

在你放置投屏按钮的组件中，引入服务后绑定点击事件即可：

// 组件ts文件
import { Component } from '@angular/core';
import { CastService } from './cast.service'; // 替换成你自己的服务路径

@Component({
  selector: 'app-page-header',
  template: `
    <button (click)="onCastBtnClick()" class="cast-btn">
      投屏到其他设备
    </button>
  `
})
export class PageHeaderComponent {
  constructor(private castService: CastService) {}

  onCastBtnClick(): void {
    this.castService.openCastDevicePicker();
  }
}

常见问题说明 #

• 测试时必须保证打开网页的设备、目标投屏设备连接同一个局域网，否则设备列表会为空
• 上述代码用的是Google官方公共接收器，如果需要自定义投屏端的展示样式、交互逻辑，需要自行注册Cast应用，替换代码里的RECEIVER_APP_ID即可
• 如果项目用了Angular SSR/Angular Universal，要把Cast相关逻辑标记为仅客户端执行，避免服务端渲染时找不到window对象报错
• 不要在本地file://协议下测试，要启动本地HTTP/HTTPS服务访问页面，否则Cast SDK会初始化失败

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