js实现屏幕共享
使用 getDisplayMedia API 实现屏幕共享
getDisplayMedia 是浏览器提供的 API，允许用户选择屏幕、窗口或标签页进行共享。以下是基本实现方式：
async function startScreenSharing() {
try {
const stream = await navigator.mediaDevices.getDisplayMedia({
video: {
cursor: "always",
displaySurface: "window"
},
audio: false
});
const videoElement = document.getElementById('screenShare');
videoElement.srcObject = stream;
} catch (err) {
console.error("Error sharing screen:", err);
}
}设置共享约束参数
可以通过约束参数调整共享内容的质量和行为：
const constraints = {
video: {
width: { ideal: 1920 },
height: { ideal: 1080 },
frameRate: { ideal: 30 },
displaySurface: "monitor" // 或 "window", "browser"
}
};处理共享停止事件
监听 ended 事件可处理用户主动停止共享的情况：
stream.getVideoTracks()[0].addEventListener('ended', () => {
console.log('Screen sharing stopped by user');
// 执行清理操作
});结合 WebRTC 实现远程共享
如需将共享内容发送给远端，可与 RTCPeerConnection 结合：
const peerConnection = new RTCPeerConnection();
stream.getTracks().forEach(track => {
peerConnection.addTrack(track, stream);
});
// 继续完成信令流程...浏览器兼容性处理
不同浏览器可能需要前缀或特殊处理：
const getDisplayMedia =
navigator.mediaDevices.getDisplayMedia ||
navigator.mediaDevices.webkitGetDisplayMedia ||
navigator.mediaDevices.mozGetDisplayMedia;权限和用户体验注意事项
- 必须在用户手势事件（如点击）中触发 API 调用
- 部分浏览器限制扩展程序域的共享
- 共享指示器会显示在屏幕上提醒用户
- 需处理用户拒绝权限的情况
扩展功能实现
可添加画中画模式提升用户体验：
videoElement.addEventListener('enterpictureinpicture', () => {
console.log('Entered PiP mode');
});以上代码片段展示了屏幕共享的核心实现方式，实际应用中需根据具体需求调整参数和处理边界情况。
