webRTC机制和peerjs库的介绍在其他博客中已经有了很多介绍，这里我直接搬运过来

WebRTC（Web Real-Time Communication）即：网页即时通信。 简单点讲，它可以实现浏览器网页与网页之间的音视频实时通信（或传输其它任何数据)，目前主流浏览器都支持该API，WebRTC现在已经纳入W3C标准。

如上图：通常某个浏览器所在的电脑，都会连接具体的多媒体设备（比如：麦克风、摄像头)。如果A电脑上的摄像头只支持VP8，H264格式，而另一台电脑上的摄像头只支持H264、MPEG-4格式，它俩要能正常播放彼此的视频，肯定会选择双方都能识别的H264格式。这就好比：2个不同国籍的人要相互交流，A会说英语、中文；而B只会说英语，毫无悬念，他俩肯定会用双方都能听懂的“英语”来沟通。

这是一张媒体协商过程的经典图例, Amy要跟Bob通信, 要先发一个Offer(即: 描述Amy自己会话的SDP), Bob收到后,做出Answer回应(即:描述Bob自己会话的SDP), 双方完成SDP交换后, 根据前面的分析,取出二份SDP的交集, 即完成了媒体协商.

这是mozilla开发者官网上的一张图, 大致描述了webrtc的处理过程：

• A通过STUN服务器，收集自己的网络信息
• A创建Offer SDP，通过Signal Channel(信令服务器)给到B
• B做出回应生成Answer SDP，通过Signal Channel给到A
• B通过STUN收集自己的网络信息，通过Signal Channel给到A

注：如果A,B之间无法直接穿透（即：无法建立点对点的P2P直连），将通过TURN服务器中转。

vue环境下引入第三方库，并且不是使用npm包的形式，在官网下载peer.js，放入src/tools/目录里

在聊天页面的vue中，引入这个函数库

发送语音邀请

在html中增加一个请求通话的按钮，点击的时候调用指定函数，效果如图：

实现这个点击函数，我们需要获取到当前设备的音频和视频流，需要访问访问用户的音频和视频设备（如摄像头和麦克风），这样我们就拿到了本地音视频流

另一篇文章有介绍最兼容的getUserMedia获取音视频流的函数方法

拿到音视频流以后再去初始化一下PeerJs服务，拿到peerjs的id，这个ID就是我们通话的身份ID，非常重要

我们想对客服发起语音通话，那么就需要拿到客服的peerid，那怎么才能知道客服的peerid呢？

那么我们在初始化好自己的peerid以后，调用一个后端接口，让客服把他们的peerid发过来，这样我们才能知道客服的peerid

同样，后端客服在接收到访客请求通话的指令后，就初始化自己的peerjs ID，然后调用后端接口，把自己的peerjs ID传递过来（这里暂时先略过客服端的操作）

我们在WebSocket中接收到客服的peerjs ID以后进行远程调用操作

这样就在call.on('stream')中拿到了客服的音视频流，现在只需要把这个音视频流展示到界面上就可以了

 界面上加上两个标签video和audio

把获取到的视频流，音频流展示出来