vue集成PC端融云音视频1对1聊天 _样式

2月中下旬的时候，接到需要集成融云音视频的需求。一开始不知道怎么下手，毕竟去年我做的只是文字之间的聊天，并没有集成音视频。然后分为2部分考虑，第一部分是考虑样式，第二部分是考虑实现逻辑。
1.样式
从样式开始，考虑到PC端，于是参考了微信的PC样式。从上找了一圈样式，终于找到比较满意的样式。放上链接：的的这个地址。图片样式是这种。（截图压缩太厉害，大家知道样式就可以了。）原文件从拉下来可能会出现没办法运行的情况，请各位自己去解决哦。当样式选好，我就可以进行功能调试了。

文章插图
2.开始接入融云。
我之前的博客有写过怎么初始化融云的文件，前面已经说过怎么进行文字的实时发送，这里就不再介绍。如有疑问，请看我之前博客。这次用了vue+vuex+axios+js-(存插件)
首先，这个聊天，用了vuex，在vuex中存了融云实时发过来的消息，因为要将消息过滤。不同的人不同的信息格式。现在我要初始化2个文件，首先是初始化..init(, , )，初始化融云之后才能初始化融云的其他东西，比如语音，比如音视频。
初始化音视频：

// import '../store/utils'import Cookies from 'js-cookie'var RongCallLib = window.RongCallLibvar config1 = {// 发起音视频超时时间, 默认 15000 毫秒timeout: 15000,// 视频分辨率, 默认 640*480(可选)width: 640,height: 480,// 视频码率, 默认 600*450(可选)maxRate: 600,minRate: 50,// 视频帧率, 默认 15(可选)frameRate: 15,// 本身用户的Id(必填)currentUserId: Cookies.get('userId'), // 获取用户id// 检测RongIMLibRongIMLib: RongIMLib}RongCallLib = RongCallLib.init(config1)RongCallLib.setVideoProfile(50)export default {RongWatch (callback) {// 注册命令监听RongCallLib.commandWatch(function (message) {// message 请查看消息类型callback.sendVoice && callback.sendVoice(message)})},RongCall (params, callback) { // 发起语音console.log(RongCallLib)RongCallLib.call(params, function (error) {console.log(error)})},Ronghungup (params) { // 挂断语音RongCallLib.hungup(params, function (error, summary) {console.log(summary)})},RongAccept (params) { // 接听console.log(params)RongCallLib.accept(params)}}

【vue集成PC端融云音视频1对1聊天】（未完待续。。。突然发现如果不从头开始解释，好多文件牵扯起来就说不清楚了，等我再整理整理思路。。）