WebRTC如何实现屏幕共享(webrtc入门四)

欢迎回来！本文是 WebRTC 入门系列的第 4 部分，我们将学习如何获得用户的屏幕，以及如何切换媒体轨道，以便用屏幕代替摄像机来发送。

这部分在技术上不需要涉及到前面的部分，如果你已经有一个信令服务器，请随意使用它。

请记住，可以共享的各种屏幕/标签/窗口取决于正在使用的浏览器。

首先，我们需要编辑 public/index.html 文件，打开它并添加以下一行：

<button id="screenShareButton" onclick="shareScreen();" disabled>Share Screen</button>

当用户单击此按钮时，屏幕共享将开始。

接下来我们需要修改 public/main.js，打开它并添加以下内容：

首先我们需要获取屏幕共享按钮的引用。

const screenShareButton = document.getElementById('screenShareButton');

一旦 RTCPeerConnection 初始化（与调用按钮相同），我们将启用该按钮，在“initializePeerConnection”函数的末尾添加以下内容：

screenShareButton.disabled = false;

接下来我们需要在会话结束时再次禁用该按钮，因此在“停止”函数中添加以下内容：

screenShareButton.disabled = true

现在我们可以创建允许用户共享屏幕的新功能。

const shareScreen = async () => {
  const mediaStream = await getLocalScreenCaptureStream();

  const screenTrack = mediaStream.getVideoTracks()[0];

  if (screenTrack) {
    console.log('replace camera track with screen track');
    replaceTrack(screenTrack);
  }
};

此函数调用一个将很快实现的辅助函数，但基本上它所做的是获取屏幕轨道并替换发送到远程对等点的轨道。

接下来我们将定义两个辅助函数，第一个是“getLocalScreenCaptureStream”

const getLocalScreenCaptureStream = async () => {
  try {
    const constraints = { video: { cursor: 'always' }, audio: false };
    const screenCaptureStream = await navigator.mediaDevices.getDisplayMedia(constraints);

    return screenCaptureStream;
  } catch (error) {
    console.error('failed to get local screen', error);
  }
};

在这里，我们通过调用“getDisplayMedia”获取用户屏幕，此 API 使用与“getUserMedia”API 略有不同的约束。在这里我告诉它在屏幕共享时也显示光标。此外，我们已经有了用户的麦克风，因此我们不需要任何音频。

接下来我们定义用屏幕轨迹替换相机轨迹的函数。

const replaceTrack = (newTrack) => {
  const sender = peerConnection.getSenders().find(sender =>
    sender.track.kind === newTrack.kind 
  );

  if (!sender) {
    console.warn('failed to find sender');

    return;
  }

  sender.replaceTrack(newTrack);
}

这个函数需要一个newTrack参数，这是要取代旧轨道的轨道。首先我们需要获得相关的RTCRtpSender，所以我们调用RTCPeerConnection.getSenders，这将返回一个RTCRtpSender对象的数组，接下来我们根据newTrack的种类（即音频或视频）来过滤发送者。因为我们要用屏幕轨道替换摄像机轨道，所以我们应该得到视频RTCRtpSender对象。最后我们用屏幕轨道替换发送者的轨道。

接下来我们需要在会话结束时停止轨道，所以在 “stop “函数中添加以下内容：

for (const sender of peerConnection.getSenders()) {
  sender.track.stop();
}

这会循环遍历 RTCPeerConnection 的所有 RtcRtpSender 并停止它们的跟踪。

完成 :) 如果正确完成，远程对等点现在应该获得共享屏幕。

现在让我们来看看它的运行情况。首先启动服务器：

npm start

接下来打开 2 个选项卡/浏览器到“https://localhost:3000”

按照上一部分中的步骤初始化呼叫，然后单击“共享屏幕”按钮。你应该会看到以下提示：（我使用的是 Chrome，但如果你使用的是不同的浏览器，提示会有所不同）。

随意选择你想分享的东西，然后点击确定。

一旦完成，看一下远程同行，你应该在远程视频中看到共享的屏幕，像这样：

会议结束后，该轨道也会被释放。

好的，这一部分已经完成，接下来我们将研究数据通道。希望能在那里见到你!

Github 地址：https://github.com/ethand91/webrtc-tutorial

系列阅读：

使用 JavaScript 和 Nodejs 搭建 webrtc信令服务器(webrtc入门一)

WebRTC MediaDevices API 获取媒体设备的访问权限(webrtc入门二)

WebRTC建立P2P连接和发送/接收媒体(webrtc入门三)