前言
哈喽,大家好,我是海怪。
最近公司项目需要用到视频流的技术,所以就研究了一下 WebRTC,正好看到 Peer.js 这个框架,用它做了一个小 Demo,今天就跟大家做个简单的分享吧。
WebRTC 是什么
WebRTC(Web Real Time Communication)也叫做 网络实时通信,它可以 允许网页应用不通过中间服务器就能互相直接传输任意数据,比如视频流、音频流、文件流、普通数据等。 它逐渐也成为了浏览器的一套规范,提供了如下能力:
- 捕获视频和音频流
- 进行音频和视频通信
- 进行任意数据的通信
这 3 个功能分别对应了 3 个 API:
- MediaStream (又称getUserMedia)
- RTCPeerConnection
- RTCDataChannel
虽然这些 API 看起来很简单,但是使用起来非常复杂。不仅要了解 “candidate”, “ICE” 这些概念,还要写很多回调才能实现端对端通信。而且由于不同浏览器对 WebRTC 的支持不尽相同,所以还需要引入 Adapter.js 来做兼容。光看下面这个连接步骤图就头疼:
所以,为了更简单地使用 WebRTC 来做端对端传输,Peer.js 做了底层的 API 调用以及兼容,简化了整个端对端实现过程。
下面就用它来实现一个视频聊天室吧。
项目初始化
首先使用 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 (