communicate-fusion-vue-zsxt v1.0.24

pc端组件掌上协同分支

1. 安装

yarn communicate-fusion-vue-zsxt
或
npm i communicate-fusion-vue-zsxt -S

2. 使用

2.1 main.js中引入消息组件

//PC端消息组件，必须引入
import CommunicateFusionVueZsxt from 'communicate-fusion-vue-zsxt'
Vue.use(CommunicateFusionVueZsxt.Msg)

2.2 组件中使用

<template>
  <meeting-panel ref="cfvRef"
    :serverUrl="http://127.0.0.1:8080"
    :wss="rhtx2.ikeqiao.net:444"
    width="100vw"
    height="100vh"
    :selfWss="communicate.ikeqiao.net/ws"
    :operationConfig= "operationConfig"
    rightSlotTitle="右插槽标题"
    rightSlotWidth="420px"
    @close="closeHandle" 
    @endMeeting="endMeetingHandle"
    @meetingInvite="meetingInvite"
    @terminalChange="terminalChange"
    @inviteMembers="inviteMembers"
    @inviteDev="inviteDev">
    <template v-slot:message>
      <div style="height: 100%;border: solid 1px white;">
        <div style="color: white;">这里是自定义聊天框插槽</div>
      </div>
    </template>
  </meeting-panel>
</template>
<script>
//引入会话组件
import CommunicateFusionVueZsxt from 'communicate-fusion-vue-zsxt'
  components: {
    MeetingPanel:CommunicateFusionVueZsxt.MeetingPanel,
  },
        // 当前用户登录
        this.$refs.cfvRef.login({
            username:'user2',
            account:'15423998886',
            phone:'15423998886',
            token:'' //通过网关获取的access_token
        }).then(()=>{})

        //参会人员列表
        const userInfoList = [{
            username:'user2', 
            account:'15423998886',
            isChairman:true,
            isOperator:true
        }]
        //入会设备的resId列表
        const deviceList = []
        
        //会议主题
        const title = `视频会议${new Date().getTime()}`
        
        //初始化会议（因为目前创建账号时间较长，所以将初始化与创建会议分离）
        this.$refs.cfvRef.initMeeting({
            userInfoList,
            deviceList,
            title,
            recordEnable:false,
            // sessionId,
            // sessionNumber
        }).then(()=>{
            //创建会议
            this.$refs.cfvRef.createMeeting().then(res=>{
                // 返回数据包括：
                //sessionId：im聊天的会话ID查询历史纪录时用到，
                //sessionNumber：im聊天的标识发送消息时用到，
                //conferenceNumber：会议标识，加入会议时有用
            })
        })
        closeHandle(){
            //窗体关闭
        },
        endMeetingHandle(val){
            //会议结束
            //返回数据为conferenceNumber会议标识
        },
        meetingInvite(meetingInfo){
            //收到会议邀请
            // meetingInfo会议基本信息

            // 接受会议邀请，进入会议
            //this.$refs.cfvRef.joinByInvite()
        }
        //添加人员进入会议
        this.$refs.cfvRef.addUsersToMetting(userInfoList).then(res=>{
            //返回数据为当前会议全部人员和设备
        })

        //添加设备进入会议
        this.$refs.cfvRef.addDeviceToMetting(deviceList).then(res=>{
            //返回数据为当前会议全部人员和设备
        })

        // 主动加入会议
        // this.$refs.cfvRef.joinTheMeeting(conferenceId).then(res=>{
            // 返回数据为会议基本信息
        // })
    }
</script>

3. 参数

3.1 serverUrl

会议组件接口服务地址

3.2 wss

会话服务器地址

3.3 title

会议的名称

3.4 deviceList

入会设备的 resId 数组，通过 网关接口 查询

3.5 login

3.6 userInfoList

3.7 initMeeting方法的参数

3.8 selfWss

自建wss，海康wss无法解决的自定义通知

3.9 operationConfig

operationConfig是个数组对象，可以传入多条，不传使用组件默认的按钮

3.10 插槽说明

聊天插槽：具名插槽，不使用默认使用组件自带的聊天框，使用如下示例

<template v-slot:left>
  <div style="height: 100%;">
    <div style="color: white;">左侧插槽</div>
  </div>
</template>
<template v-slot:right>
  <div style="height: 100%;">
    <div style="color: white;">右侧插槽</div>
  </div>
</template>

3.11 rightSlotTitle

右侧插槽标题

3.12 rightSlotWidth

右侧插槽宽度

4. 方法

5. 事件

6本地调试地址以及部署说明

6.1本地调试说明

本地调试有几个地方需要调整，由于融合通信这边必须是https协议，所以本地需要代理服务端接口，不然如果服务端是http，会有Cross-Origin报错 参考示例：

    proxy: {
      '/commonicate-fusion/': {
        target: 'http://10.2.0.55:8163/', // 组件后端代理，测试环境地址为10.2.0.55:8163
        changeOrigin: true,
        pathRewrite: {
          '/commonicate-fusion/':''
        },
        onProxyReq: function (proxyReq, req, res) {
          proxyReq.setHeader('X-Forwarded-For', req.ip)
          proxyReq.setHeader('Host', req.headers.host)
        }
      },
    },

其中commonicate-fusion可以为任意的路径，当然如果commonicate-fusion调整了，对应的上述serverUrl的后缀也需要对应调整 注: 1.rhtx2.ikeqiao.net:444是海康socket的地址，由于我们开发环境该域名无法访问，所以本地调试wss需填10.21.0.17:444,如果启动后开始会议提示WebSocket connection to 'wss://r10.21.0.17:444/xmessage-ads/ws' failed,需要首先访问一下https://10.21.0.17:444点一下高级-继续访问，然后再调试就可以了，线上通过nginx代理或者使用非政务网直连rhtx2.ikeqiao.net:444目前测试不存在该问题 2.本地调试暂时没处理本地的WebSocket connection to 'wss://本地ip:端口/ws' failed:之类的报错，如果是本地端口可以暂时忽略

6.2部署说明

部署以部署nginx为例，受海康SDK限制，需要配合ssl生成证书部署成https,生成后的配置参考如下:

  #组件后端
  location /commonicate-fusion/ {
    #测试环境地址，如果需要得调整
    proxy_pass http://10.2.0.55:8163/;
  }
  #组件后端自建socket
  location /ws {
    #测试环境地址，如果需要得调整
    proxy_pass http://10.2.0.55:8163;
    proxy_http_version 1.1;
    proxy_read_timeout 3600s;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Real-IP $remote_addr;
  }
  #海康消息地址
  location /xmessage-ads/ {
    proxy_pass   https://rhtx2.ikeqiao.net:444/xmessage-ads/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Real-IP $remote_addr;
  }
  #海康事件地址
  location /xmessage-cms/ {
    proxy_pass   https://rhtx2.ikeqiao.net:444/xmessage-cms/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Real-IP $remote_addr;
  }

如上示例，其中rhtx2.ikeqiao.net:444是海康socket的地址，由于我们开发环境该域名无法访问，所以本地调试需使用10.21.0.17:444 10.2.0.55:8163是融合通信组件后端的测试环境地址， 正式环境目前为communicate.ikeqiao.net