实现基于html5媒体api的实时屏幕共享需调用navigator.mediadevices.getdisplaymedia()获取屏幕流，再通过webrtc的rtcpeerconnection传输；必须在https或localhost安全上下文中运行，用户需主动授权，且仅支持现代桌面浏览器（firefox/safari支持有限，移动端不支持）。
要实现基于 HTML5 媒体 API 的实时屏幕共享，核心是使用 getDisplayMedia() 获取屏幕流，再通过 WebRTC 传输到远端。它不依赖插件，但需 HTTPS 环境、现代浏览器支持，且用户必须主动授权。
获取屏幕媒体流
调用 navigator.mediaDevices.getDisplayMedia() 请求屏幕捕获权限，返回一个 MediaStream 对象。与 getUserMedia() 不同，它默认捕获整个窗口或标签页，也可指定为“显示器”“窗口”或“标签页”级别（取决于浏览器实现）。
- 必须在安全上下文（HTTPS 或 localhost）中调用，否则会直接拒绝
- 推荐显式传入约束对象，例如
{ video: true, audio: false }；部分浏览器支持audio: true捕获系统声音（仅 Chromium 97+，且需用户手动勾选“共享音频”） - 用户点击“共享”后才真正获得流；若取消或关闭选择框，Promise 会 reject
与 WebRTC 配合传输
拿到屏幕流后，不能直接播放或上传，需接入 WebRTC 连接。通常将该流作为本地轨道添加到 RTCPeerConnection 的发送端。
- 用
addTrack(stream.getVideoTracks()[0], stream)添加视频轨道（屏幕流一般只有视频轨） - 若需同时传输摄像头或麦克风，可额外调用
getUserMedia()并 addTrack，但注意避免多路流混用时的编码冲突 - 建议设置
encode相关参数：如在RTCRtpSender.setParameters()中限制帧率（maxFrameRate: 15）和分辨率（scaleResolutionDownBy: 2），降低带宽压力
处理兼容性与降级
Firefox 和 Safari 对 getDisplayMedia() 支持较晚，且行为有差异：Firefox 不支持共享音频；Safari 16.4+ 才支持，且仅限 macOS Ventura 及以上。
- 检测可用性：
if ('getDisplayMedia' in navigator.mediaDevices)，否则提示用户升级或换浏览器 - 捕获错误类型：常见如
"NotAllowedError"（用户拒绝）、"NotFoundError"（无可用屏幕源）、"AbortError"（系统忙），应给出对应提示 - 移动端不支持屏幕共享（iOS/iPadOS 完全不可用），需提前隐藏按钮或显示友好提示
优化体验与注意事项
屏幕共享对性能敏感，尤其在高分屏或动态内容场景下容易卡顿或延迟升高。
- 避免共享整个桌面——优先引导用户选择单个窗口或标签页，减少编码负载
- 监听
stream.oninactive事件，在用户停止共享时及时清理连接和 UI 状态 - 添加视觉反馈：如在页面角落显示“正在共享屏幕”浮层，并提供一键停止按钮（调用
getVideoTracks()[0].stop()） - 不要缓存流对象：每次共享都应重新调用
getDisplayMedia()，旧流可能已失效
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
