写代码的海怪
写代码的海怪

用 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}
              

            
          )}
        />

        
自定义消息