当前位置：首页 > JavaScript

js实现屏幕共享

2026-02-02 16:21:13JavaScript

屏幕共享的实现方法

在JavaScript中实现屏幕共享主要依赖于WebRTC（Web Real-Time Communication）技术，结合getDisplayMedia API捕获屏幕内容。以下是具体实现步骤：

获取用户屏幕流

使用navigator.mediaDevices.getDisplayMedia方法请求用户授权并捕获屏幕内容：

async function startScreenShare() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: {
        cursor: "always", // 显示鼠标指针
        displaySurface: "window" // 可选: "window", "browser", "monitor"
      },
      audio: false // 如需共享音频则设为true
    });
    return stream;
  } catch (err) {
    console.error("Error sharing screen:", err);
  }
}

将屏幕流绑定到视频元素

获取屏幕流后，可将其显示在页面上的<video>元素中：

const videoElement = document.getElementById('screen-preview');
const screenStream = await startScreenShare();

if (screenStream) {
  videoElement.srcObject = screenStream;
  videoElement.play();
}

通过WebRTC共享流

若需将屏幕流传输给其他用户，需结合RTCPeerConnection建立连接：

const peerConnection = new RTCPeerConnection();

// 添加屏幕流到连接
screenStream.getTracks().forEach(track => {
  peerConnection.addTrack(track, screenStream);
});

// 生成SDP offer并发送给接收方
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
// 此处需将offer通过信令服务器发送给接收方

处理权限与兼容性

权限提示：浏览器会弹出窗口要求用户选择共享的屏幕区域。

兼容性检查：确保浏览器支持getDisplayMedia：

if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
  alert("您的浏览器不支持屏幕共享功能");
}

注意事项

HTTPS要求：getDisplayMedia仅在安全上下文（HTTPS或localhost）中可用。
扩展支持：某些浏览器（如Firefox）可能需要安装扩展程序才能共享整个屏幕。

结束共享：通过关闭流释放资源：

function stopScreenShare() {
  const tracks = screenStream?.getTracks();
  tracks?.forEach(track => track.stop());
}

完整示例代码

<video id="screen-preview" autoplay muted></video>
<button id="start-btn">开始共享</button>
<button id="stop-btn">停止共享</button>

<script>
  let screenStream;

  document.getElementById('start-btn').addEventListener('click', async () => {
    screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
    const videoElement = document.getElementById('screen-preview');
    videoElement.srcObject = screenStream;
  });

  document.getElementById('stop-btn').addEventListener('click', () => {
    screenStream?.getTracks().forEach(track => track.stop());
  });
</script>

通过上述方法可实现基础的屏幕共享功能，实际应用中需结合信令服务器处理WebRTC的SDP交换和ICE候选信息。

js实现屏幕共享