用 Peer.js 愉快上手 P2P 通信

前言

哈喽,大家好,我是海怪。

最近公司项目需要用到视频流的技术,所以就研究了一下 WebRTC,正好看到 Peer.js 这个框架,用它做了一个小 Demo,今天就跟大家做个简单的分享吧。

WebRTC 是什么

WebRTC(Web Real Time Communication)也叫做 网络实时通信,它可以 允许网页应用不通过中间服务器就能互相直接传输任意数据,比如视频流、音频流、文件流、普通数据等。 它逐渐也成为了浏览器的一套规范,提供了如下能力:

  • 捕获视频和音频流
  • 进行音频和视频通信
  • 进行任意数据的通信

这 3 个功能分别对应了 3 个 API:

  • MediaStream (又称getUserMedia)
  • RTCPeerConnection
  • RTCDataChannel

虽然这些 API 看起来很简单,但是使用起来非常复杂。不仅要了解 "candidate", "ICE" 这些概念,还要写很多回调才能实现端对端通信。而且由于不同浏览器对 WebRTC 的支持不尽相同,所以还需要引入 Adapter.js 来做兼容。光看下面这个连接步骤图就头疼:

原生 WebRTC 连接步骤

所以,为了更简单地使用 WebRTC 来做端对端传输,Peer.js 做了底层的 API 调用以及兼容,简化了整个端对端实现过程。

下面就用它来实现一个视频聊天室吧。

文章代码都放在 Github 项目 上了,你也可以点击 预览链接 来查看。

视频效果

项目初始化

首先使用 create-react-app 来创建一个 React 项目:

create-react-app react-chatroom

将一些无用的文件清理掉,只留下一个 App.js 即可。为了界面更好看,这里可以使用 antd 作为 UI 库:

npm i antd

最后在 index.js 中引入 CSS:

import 'antd/dist/antd.css'

布局

安装 peer.js

npm i peerjs

写好整个页面的布局:

const App = () => {
  const [loading, setLoading] = useState(true);

  const [localId, setLocalId] = useState('');
  const [remoteId, setRemoteId] = useState('');

  const [messages, setMessages] = useState([]);
  const [customMsg, setCustomMsg] = useState('');

  const currentCall = useRef();
  const currentConnection = useRef();

  const peer = useRef()

  const localVideo = useRef();
  const remoteVideo = useRef();

  useEffect(() => {
    createPeer()

    return () => {
      endCall()
    }
  }, [])

  // 结束通话
  const endCall = () => {}

  // 创建本地 Peer
  const createPeer = () => {}

  // 开始通话
  const callUser = async () => {}

  // 发送文本
  const sendMsg = () => {}

  return (
    

本地 Peer ID: {localId || }

setRemoteId(e.target.value)} type="text" placeholder="对方 Peer 的 Id"/>

本地摄像头

发送消息

消息列表

(
{msg.type === 'local' ? : 对方} {msg.data}
)} />

自定义消息