Peer.js 構建視頻聊天應用使用詳解

更新時間：2023年03月13日 09:31:16 作者：forrest醬

這篇文章主要為大家介紹了Peer.js 構建視頻聊天應用使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

Peer.js 是一個瀏覽器端的 Peer-to-Peer 庫，可以方便地構建 WebRTC 應用程序。在本文中，我們將使用 Peer.js 來創(chuàng)建一個簡單的視頻聊天應用程序。

步驟 1：設置環(huán)境

首先，我們需要在項目中引入 Peer.js 庫。我們可以使用 npm 或者 CDN 來引入它。在這里，我們將使用 CDN。

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

步驟 2：創(chuàng)建 Peer 實例

Peer.js 允許我們通過創(chuàng)建 Peer 實例來連接到另一個 Peer。我們可以使用 Peer 實例來發(fā)送和接收數(shù)據(jù)。在我們的應用程序中，我們將創(chuàng)建兩個 Peer 實例 - 一個用于發(fā)送視頻流，另一個用于接收視頻流。

const peer = new Peer(); // 創(chuàng)建 Peer 實例

步驟 3：獲取本地媒體流

在我們可以發(fā)送視頻流之前，我們需要獲取本地媒體流。我們可以使用 navigator.mediaDevices.getUserMedia() 方法來獲取本地媒體流。

navigator.mediaDevices.getUserMedia({ video: true, audio: true }) // 獲取本地媒體流
  .then(stream => {
    // 將本地媒體流添加到 video 元素中
    const video = document.getElementById('local-video');
    video.srcObject = stream;
    // 將本地媒體流發(fā)送給遠程 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() 方法將本地媒體流發(fā)送給遠程 Peer。當遠程 Peer 接收到媒體流時，我們可以將其添加到另一個 video 元素中。

步驟 4：接收遠程媒體流

我們還需要編寫代碼來接收遠程媒體流。我們可以使用 Peer.on() 方法來監(jiān)聽 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() 方法監(jiān)聽 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 事件。