在浏览器中轻松屏幕分享：基于 PeerJS 的前端实现

前端

2023-09-16 01:36:27

欢迎来到技术的奇幻世界，在这个世界里，可能性是无穷无尽的。今天，我们将踏上一个激动人心的旅程，探索如何在浏览器中使用 PeerJS 实现纯前端屏幕分享。

什么是 PeerJS？简而言之，它是一个令人惊叹的库，利用了 WebRTC 的强大功能，让开发人员可以轻松地在浏览器之间建立点对点连接，从而实现令人惊叹的实时通信功能。

为什么选择 PeerJS？它的优势显而易见：

纯前端： 无需额外的服务器或插件，一切都可以在浏览器中完成。
点对点： 设备直接连接，无需中间人，确保了数据的隐私和安全。
低延迟： WebRTC 优化了延迟，确保了流畅、实时的屏幕共享体验。

让我们开始吧！

1. 设置项目

首先，我们需要创建一个新的项目。使用你最喜欢的代码编辑器或 IDE，创建一个新的文件夹并初始化一个 npm 项目：

mkdir screen-sharing
cd screen-sharing
npm init -y

然后，安装 PeerJS 库：

npm install peerjs

2. HTML 和 JavaScript

现在，让我们创建我们的 HTML 和 JavaScript 文件。在 index.html 中，添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <script src="script.js"></script>
</head>
<body>
  <div id="local-video"></div>
  <div id="remote-video"></div>
</body>
</html>

在 script.js 中，我们将编写我们的 JavaScript 代码：

// 获取视频元素
const localVideo = document.getElementById('local-video');
const remoteVideo = document.getElementById('remote-video');

// 创建 PeerJS 对象
const peer = new Peer();

// 当接收到连接请求时
peer.on('connection', conn => {
  // 建立数据通道
  conn.on('data', data => {
    // 将接收到的数据流显示到远程视频中
    remoteVideo.srcObject = data;
  });
});

// 当收到来电时
peer.on('call', call => {
  // 接受来电
  call.answer();

  // 将本地视频流发送到远程设备
  call.on('stream', stream => {
    localVideo.srcObject = stream;
  });
});

// 请求屏幕共享
peer.on('open', id => {
  navigator.mediaDevices.getDisplayMedia()
    .then(stream => {
      // 发送屏幕共享流到远程设备
      const call = peer.call(id, stream);
    });
});