使用 Peer.js 构建 WebRTC 视频聊天应用教程

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

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

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);
  });

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);
    });
});

<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.');
  });
});