communicate-fusion-vue-zsxt

v1.0.24

Published

a year ago

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

0High
0Medium
0Low

error10.wxg

naibigpower

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

| 字段 | 说明 | 类型 | 备注 | |:--------:| :---------:|:---------:|:---------| | username | 用户名 | string | 参会人员姓名 | | account | 账号 | number | 传手机号，作为用户的唯一标识，防止重名 | | phone | 手机号 | number | | | token | access_token | string | 通过网关获取的access_token |

3.6 userInfoList

| 字段 | 说明 | 类型 | 备注 | |:--------:| :---------:|:---------:|:---------| | username | 用户名 | string | 参会人员姓名 | | account | 账号 | number | 传手机号，作为用户的唯一标识，防止重名 | | isChairman | 是否为主持人 | boolean | 如果需要操作视频，主持人和操作人需要同一个账户，不填默认取第一个 | | isOperator | 是否为登陆人 | boolean | 如果需要操作视频，主持人和操作人需要同一个账户，不填默认取第一个 |

3.7 initMeeting方法的参数

| 字段 | 说明 | 类型 | 是否必须 | 备注 | |:--------:| :---------:|:---------:|:---------:|:---------| | userInfoList | 用户列表 | array | 必须 | 上面userInfoList的数据格式 | | deviceList | 设备列表 | array | 必须 | 设备resId的数组 | | title | 会议主题 | string | 必须 | | | recordEnable | 是否开启录制 | boolean | 非必须| | | sessionId | im聊天会话ID | string | 非必须 | im聊天的会话ID查询历史纪录时用到 | | sessionNumber | im聊天会话标识 | string | 非必须 | im聊天的标识发送消息时用到 |

3.8 selfWss

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

3.9 operationConfig

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

| 字段 | 说明 | 类型 | | ------- | ------------------------------------------------------------ | -------- | | type | 如果需要组件自带的按钮，可以传入type枚举，mute:开启/关闭静音，video:开启/关闭摄像头,capability:布局配置,hangup:离开会议(主持人结束会议),switchCamera:切换摄像头不传或者传其他目前可以自定义按钮 | string | | title | 当用户将鼠标悬停在该元素上时，显示的提示 | string | | style | 样式，可以加背景图片或者背景颜色之类，自定义按钮时生效，组件按钮不生效 | string | | onClick | 按钮点击事件 | function |

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. 方法

| 方法名 | 说明| 参数 | 返回结果 | |:--------:| :---------:| :---------:|:---------| | login | 登录wss | 参考3.5 | | | initMeeting | 创建会议 | 参考3.7 | sessionId：im聊天的会话ID查询历史纪录时用到；sessionNumber：im聊天的标识发送消息时用到；conferenceNumber：会议标识，加入会议时有用 | | addUsersToMetting | 添加人员 | userInfoList，参考3.6 | 当前会议全部人员和设备 | | addDeviceToMetting | 添加设备 | 入会设备的 resId 数组 |当前会议全部人员和设备| | joinTheMeeting | 主动加入会议 | 会议的conferenceId |会议基本信息| | joinByInvite | 接受会议邀请 | |无| | rightSlotShow | 显示隐藏右侧slot | Boolean 或不传 |无|

5. 事件

| 事件名 | 说明 | 返回结果 | |:--------:| :---------:|:---------| | close | 窗体关闭 | 无 | | endMeeting | 会议结束 | conferenceNumber会议标识，加入会议时有用 | | meetingInvite | 会议邀请 | 会议基本信息 | | terminalChange |会议终端改变| 当前会议全部人员和设备 | | inviteMembers |邀请成员按钮回调| 无 | | inviteDev |邀请设备按钮回调| 单参数，内含{title,number,creatorName,chairmanName,actualStartTime}其中title:会议标题number:会议号creatorName:发起人chairmanName:主持人actualStartTime:会议开始时间 |

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