- Web 应用集成无线投屏的难点：浏览器无原生投屏能力，传统方案需安装插件（兼容性差/被浏览器拦截）
- 必捷 Web SDK 基于 WebAssembly + WebRTC + WebSocket 实现浏览器无插件投屏，Chrome/Edge/Safari/Firefox 全兼容
- 集成步骤：①引入 SDK 脚本；②初始化 SDK；③获取投屏码；④调用投屏 API；⑤监听事件回调
- 4 类典型场景：在线教育/视频会议/远程协作/Web 端 PPT 演示
- 与原生 SDK 对比：Web SDK 无需安装，跨平台，但延迟略高（150-300ms vs 50-100ms）
Web 端投屏的技术挑战
Web 应用集成无线投屏面临三大挑战：
- 浏览器无原生投屏能力：Chrome/Edge/Safari/Firefox 均未提供统一的投屏 API
- 插件方案被废弃：Chrome 90+ 已全面禁用 NPAPI 插件（Flash/Java Applet 均不可用）
- 扩展方案体验差：浏览器扩展需用户主动安装，且 Edge/Chrome 商店审核严格
必捷 Web SDK 基于现代 Web 技术（WebAssembly + WebRTC + WebSocket）实现浏览器原生投屏，无需任何插件或扩展，是当前 Web 端投屏的最优方案。
技术架构
必捷 Web SDK 的技术架构分 4 层：
- 采集层：getDisplayMedia() 采集屏幕/标签页/窗口（Chrome 72+/Edge 79+/Safari 13+）
- 编码层：WebAssembly 实现 H.264/H.265 硬件编码（CPU 占用 ≤ 15%）
- 传输层：WebRTC 实现 P2P 传输（延迟 ≤ 300ms），WebSocket 实现信令
- 渲染层：BJ62S/BJ66 终端接收后解码输出到大屏
| 技术 | 作用 | 兼容性 |
|---|---|---|
| getDisplayMedia | 屏幕/标签页/窗口采集 | Chrome 72+/Edge 79+/Safari 13+ |
| WebAssembly | 硬件编解码 | 全现代浏览器 |
| WebRTC | P2P 传输 | 全现代浏览器 |
| WebSocket | 信令控制 | 全浏览器 |
集成步骤详解
必捷 Web SDK 集成仅需 5 步：
- 引入 SDK：
<script src="https://cdn.bijienetworks.com/sdk/web/latest.js"></script> - 初始化 SDK：
BijieSDK.init({ appId: "your_app_id", appSecret: "your_app_secret" }) - 获取设备列表：
BijieSDK.getDevices()返回用户可投屏的设备 - 调用投屏 API：
BijieSDK.startCast({ deviceId, source: "screen" }) - 监听事件：监听 onCastStarted/onCastStopped/onError 回调
代码量：仅需 30-50 行 JS 代码即可完成集成，远低于原生 SDK 的 200+ 行。
4 类典型场景
| 场景 | Web 应用类型 | 投屏需求 | SDK 调用方式 |
|---|---|---|---|
| 在线教育 | 在线辅导平台 | 老师屏幕/PPT 投屏给学生 | 整页投屏 + 摄像头浮窗 |
| 视频会议 | Web 会议应用 | 参会人共享屏幕 | getDisplayMedia + 选标签页 |
| 远程协作 | 在线文档/设计工具 | 实时协作标注 | 投屏 + 双向标注协议 |
| Web 端PPT演示 | 在线 PPT 工具 | PPT 投屏到会议室 | 标签页投屏 + 全屏模式 |
与原生 SDK 对比
| 维度 | Web SDK | 原生 SDK (iOS/Android/Win/Mac) |
|---|---|---|
| 集成复杂度 | 30-50行代码 | 200+ 行代码 |
| 兼容性 | Chrome/Edge/Safari/Firefox | 需为每平台单独开发 |
| 安装要求 | 无需安装 | 需安装客户端 |
| 投屏延迟 | 150-300ms | 50-100ms |
| 采集能力 | 屏幕/标签页/窗口 | 屏幕/应用/摄像头/麦克风 |
| 适合场景 | 轻量级 Web 集成 | 高性能专业场景 |
最佳实践
- 权限申请友好化：投屏按钮放在显眼位置，点击后引导用户授权
- 错误提示具体化：根据错误码返回具体提示（如”浏览器版本过低请升级”）
- 断线自动重连：网络抖动时 SDK 自动重连，避免用户感知
- 性能监控：上报投屏成功率/延迟/卡顿率，持续优化
- 降级方案：旧浏览器降级为”复制投屏码到客户端”提示
常见问题
Q：Web SDK 需要 HTTPS 吗？
A：必须。getDisplayMedia/WebRTC 等 API 要求 HTTPS 环境（localhost 除外）。生产环境请配置 SSL 证书。
Q：Web SDK 收费吗？
A：基础功能免费（每月 1000 次投屏会话）。企业级功能（更高并发/专属技术支持/SLA 保障）按需授权。具体请咨询必捷商务。
Q：Web SDK 能投声音吗？
A：能。通过 getDisplayMedia 选中标签页时勾选”共享标签页音频”，即可同步传输声音。注意浏览器安全和隐私限制，部分场景需用户主动确认。
Q：Web SDK 支持手机浏览器吗？
A：支持。移动端 Chrome/Safari 均可调用 SDK，但 getDisplayMedia 在移动端仅支持标签页投屏（无完整屏幕采集能力）。
