Peer.js构建视频聊天应用使用详解

2023-03-13 11:41

短信预约 -IT技能 免费直播动态提醒

正文

Peer.js 是一个浏览器端的 Peer-to-Peer 库，可以方便地构建 WebRTC 应用程序。在本文中，我们将使用 Peer.js 来创建一个简单的视频聊天应用程序。

步骤 1：设置环境

首先，我们需要在项目中引入 Peer.js 库。我们可以使用 npm 或者 CDN 来引入它。在这里，我们将使用 CDN。

<script class="lazy" data-src="<https://cdn.jsdelivr.net/npm/peerjs@1.3.2/dist/peerjs.min.js>"></script>

步骤 2：创建 Peer 实例

Peer.js 允许我们通过创建 Peer 实例来连接到另一个 Peer。我们可以使用 Peer 实例来发送和接收数据。在我们的应用程序中，我们将创建两个 Peer 实例 - 一个用于发送视频流，另一个用于接收视频流。

const peer = new Peer(); // 创建 Peer 实例

步骤 3：获取本地媒体流

在我们可以发送视频流之前，我们需要获取本地媒体流。我们可以使用 navigator.mediaDevices.getUserMedia() 方法来获取本地媒体流。

navigator.mediaDevices.getUserMedia({ video: true, audio: true }) // 获取本地媒体流
  .then(stream => {
    // 将本地媒体流添加到 video 元素中
    const video = document.getElementById('local-video');
    video.class="lazy" data-srcObject = stream;
    // 将本地媒体流发送给远程 Peer
    const call = peer.call('remote-peer-id', stream);
    call.on('stream', remoteStream => {
      // 将远程媒体流添加到 video 元素中
      const remoteVideo = document.getElementById('remote-video');
      remoteVideo.class="lazy" data-srcObject = remoteStream;
    });
  })
  .catch(error => {
    console.error('Error accessing media devices.', error);
  });

在上面的代码中，我们首先获取本地媒体流，然后将其添加到一个 video 元素中。接下来，我们使用 Peer.call() 方法将本地媒体流发送给远程 Peer。当远程 Peer 接收到媒体流时，我们可以将其添加到另一个 video 元素中。

步骤 4：接收远程媒体流

我们还需要编写代码来接收远程媒体流。我们可以使用 Peer.on() 方法来监听 incoming-call 事件。当我们收到 incoming-call 事件时，我们可以使用 call.answer() 方法来接收远程媒体流。

peer.on('call', call => {
  navigator.mediaDevices.getUserMedia({ video: true, audio: true }) // 获取本地媒体流
    .then(stream => {
      // 将本地媒体流添加到 video 元素中
      const video = document.getElementById('local-video');
      video.class="lazy" data-srcObject = stream;
      // 接收远程媒体流
      call.answer(stream);
      call.on('stream', remoteStream => {
        // 将远程媒体流添加到 video 元素中
        const remoteVideo = document.getElementById('remote-video');
        remoteVideo.class="lazy" data-srcObject = remoteStream;
      });
    })
    .catch(error => {
      console.error('Error accessing media devices.', error);
    });
});

在上面的代码中，我们首先使用 Peer.on() 方法监听 incoming-call 事件。当我们收到 incoming-call 事件时，我们获取本地媒体流，然后使用 call.answer() 方法来接收远程媒体流。

步骤 5：连接到另一个 Peer

最后，我们需要连接到另一个 Peer。我们可以使用 Peer.connect() 方法来连接到另一个 Peer。在我们的应用程序中，我们将使用一个输入框来输入远程 Peer 的 ID。

<input type="text" id="remote-peer-id" />
<button id="connect-button">连接</button>

const connectButton = document.getElementById('connect-button');
connectButton.addEventListener('click', () => {
  const remotePeerId = document.getElementById('remote-peer-id').value;
  const conn = peer.connect(remotePeerId);
  conn.on('open', () => {
    console.log('Connected to remote peer.');
  });
});

在上面的代码中，我们首先获取输入框中输入的远程 Peer 的 ID，然后使用 Peer.connect() 方法连接到远程 Peer。当连接建立时，我们会收到一个 open 事件。