Peer

admin 报建百科 2024-04-25 402 14

Peer

Peer.js 是一个浏览器端 Peer-to-Peer 库，能够容易地搭建 WebRTC 应用软件。在本文中，我们将要应用 Peer.js 来创建一个简单的视频聊天应用程序流程。

流程 1：设定自然环境

最先，我们应该在工程中引进 Peer.js 库。我们可以用 npm 或是 CDN 来引进它。在这儿，我们将要应用 CDN。

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

流程 2：建立 Peer 案例

Peer.js 容许我们可以通过建立 Peer 案例来连接到另一个 Peer。我们可以用 Peer 案例来上传和获取数据。在咱们的应用程序中，我们将要建立2个 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.srcObject = stream;

    // 将当地媒体流发给远程控制 Peer
    const call = peer.call('remote-peer-id', stream);
    call.on('stream', remoteStream => {
      // 将远程控制媒体流导入到 video 原素中
      const remoteVideo = document.getElementById('remote-video');
      remoteVideo.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.srcObject = stream;

      // 接受远程控制媒体流
      call.answer(stream);
      call.on('stream', remoteStream => {
        // 将远程控制媒体流导入到 video 原素中
        const remoteVideo = document.getElementById('remote-video');
        remoteVideo.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 事情。