当前位置：首页 > JavaScript

js实现屏幕共享

2026-04-07 10:02:48JavaScript

使用WebRTC API实现屏幕共享

WebRTC的getDisplayMedia()方法允许获取屏幕内容作为媒体流。需要用户明确授权才能访问屏幕。

async function startScreenSharing() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: {
        displaySurface: 'window', // 或 'screen', 'browser'
        logicalSurface: true,
        cursor: 'always' // 或 'motion', 'never'
      },
      audio: false // 可设置为true以共享系统音频
    });

    const videoElement = document.getElementById('screenShareVideo');
    videoElement.srcObject = stream;

    stream.getVideoTracks()[0].onended = () => {
      console.log('Screen sharing ended');
    };
  } catch (err) {
    console.error('Error sharing screen:', err);
  }
}

屏幕共享参数配置

getDisplayMedia()接受配置对象，可控制共享内容类型和质量：

displaySurface: 指定共享类型（窗口/屏幕/浏览器标签）
cursor: 控制鼠标指针显示方式
width/height: 设置分辨率约束
frameRate: 控制帧率

const constraints = {
  video: {
    width: { ideal: 1920 },
    height: { ideal: 1080 },
    frameRate: { ideal: 30, max: 60 }
  }
};

结合PeerConnection进行远程共享

获取屏幕流后可通过WebRTC与远端建立连接：

async function shareToRemote() {
  const localStream = await navigator.mediaDevices.getDisplayMedia();
  const peerConnection = new RTCPeerConnection();

  localStream.getTracks().forEach(track => {
    peerConnection.addTrack(track, localStream);
  });

  // 处理信令交换和连接建立...
}

浏览器兼容性处理

不同浏览器可能需要前缀或特殊处理：

const mediaDevices = navigator.mediaDevices || 
                    (navigator.mozGetUserMedia || navigator.webkitGetUserMedia 
                     ? { getUserMedia: c => new Promise((y,n) => 
                         (navigator.mozGetUserMedia || 
                          navigator.webkitGetUserMedia).call(navigator, c, y, n)) 
                       } 
                     : null);

屏幕共享权限检查

在尝试共享前可检查API可用性：

function canShareScreen() {
  return navigator.mediaDevices && 
         navigator.mediaDevices.getDisplayMedia && 
         typeof navigator.mediaDevices.getDisplayMedia === 'function';
}

错误处理与用户引导

常见错误场景需要特殊处理：

用户拒绝权限时显示引导说明
浏览器不支持时提供备用方案
共享中断时自动重连或通知

function handleSharingError(error) {
  switch(error.name) {
    case 'NotAllowedError':
      showPermissionGuide();
      break;
    case 'NotFoundError':
      showAlternativeOptions();
      break;
    default:
      console.error('Sharing error:', error);
  }
}

屏幕共享的停止控制

提供明确的停止共享控制：

js实现屏幕共享

function stopScreenSharing(stream) {
  stream.getTracks().forEach(track => track.stop());
  const videoElement = document.getElementById('screenShareVideo');
  videoElement.srcObject = null;
}