WebRTCSDKJS 公司 WebRTC 业务端sdk

简介

• 注意事项：

  • 依赖 tq-message-center-engine (2.0.0+)版本

安装依赖

npm install [email protected]
npm install [email protected] 

demo地址,master分支

http://gitlab.hztianque.com/tianque-im/rtc/public/web-rtc-sdk-js-demo

示例代码

//1.配置文件
// ip 直连
const config = {
  userCenterService: 'http://192.168.110.187:8888',//用户中心api地址
  auth: '',//用户中心登录令牌
  imServer: {//推送服务
    namespace: 'com.tianque.message.user', // 命名空间，不建议更改
    appKey: 'com.tianque.tqvdc.demo',
    accessKey: 'ofOjgtx7613ow7p4',//聚光后台配置获取
    accessSecret: 'tCzjJ0JJ3Ahsnf6GE7zCeDrTdj6aF71U',//聚光后台配置获取
    socketHost: 'http://192.168.110.187:10800', // socket 服务器 杭州测试环境
    apiHost: 'http://192.168.1.74:11300', // api 请求服务器 杭州测试环境
    // socketHost: 'https://call.5ihuijia.com:13444', // 北京无线云平台公共演示环境
    // apiHost: 'https://call.5ihuijia.com:14444', //  北京无线云平台公共演示环境
  },
  vdcUrl: 'https://192.168.1.190/tqvdc',//视频通话前端项目地址
  // vdcUrl: 'http://localhost:18081/',//视频通话前端项目地址
  /**
   * 视频通话前端项目用户中心标识,由于视频通话前端项目默认使用的是/usercenter对应的用户中心地址为
   * http://192.168.110.187:8888,如果项目上对应的用户中心不同,则需要联系刘杰约定vdcUserCenterFlag和对应的用户中心地址.
   * 线上环境视频通话是单独部署的.用户中心是一致的,不需要传该字段.
   * 例如项目基线 使用的是http://192.168.100.231:10081用户中心.需要配置vdcUserCenterFlag字段,值为/baseLine
   */
  vdcUserCenterFlag:'/baseLine'

}
//2.构建初始化参数
config.auth = access_token //用户中心登录令牌
let options = {
    clientId: this.uid,//用户唯一id
    name: this.name,//用户名(视频通话展示的名字)
    token: '',
    vdcUrl: config.vdcUrl,
    vdcUserCenterFlag: config.vdcUserCenterFlag,
    auth: config.auth,
    ...config.imServer
}
//3.初始im和webRtc对象
const im = new TQMessageCenterEngine(options)
this.webRtc = new WebRtcSdk(options, im)
//4.添加im监听
// 用户连接成功
im.on(TQMessageCenterEngine.EVENT_TYPES.CONNECT, (data, cb) => {
    console.log('IM 连接成功', data, cb)
})
// 用户离线
im.on(TQMessageCenterEngine.EVENT_TYPES.DISCONNECT, (data, cb) => {
    console.log(`IM 丢失连接`, data, cb)
    this.$Message.error(`${data}`)
})
// 自定义消息
im.on('message', (data) => {
    console.log(`自定义系统消息: `, decode(data))
    const {
        type,
        from,
        caller,
        roomId,
        members,
    } = JSON.parse(decode(data))
    if (type === 'call') { // 被叫
        this.initBeCalling(from, caller, roomId, members)
    }
})

//5.发起视频通话
/**
 * 发起视频通话
 * @param param
 * {
 *      auth 用户中心令牌
 *      orgId 最上层组织机构id
 *      orgInternalCode 最上层组织机构code
 *      orgName 最上层组织机构名称
 *      userType //(可选) 全部    1 ，PC  1051001  ,手机  1051002  ,专职  1051003  ,兼职  1051004,PC+手机  1051005; 默认为 全部 1
 *      members //(可选)参会人员 默认为空数组,如果为空数组则进入根据选人页面,有数据则直接进入视频通话页面,支持中途加人
 *      内部对象解构为{
 *          uid,//用户唯一di
 *          name,//用户姓名
 *          orgFullName,//(可选) 组织机构全称
 *      }
 *      theme //(可选) black 黑色主题,white 白色主题,默认为黑色主题
 * }
 *
 */
this.webRtc.openVdc()

//6.处理被叫逻辑,一般业务端仅需要关心接听和拒绝
//接听
/**
 * 接受呼叫
 * @param param
 * {
 *      roomId 房间id
 *      from 会议发起人
 *      members 参会人员
 * }
 */
this.webRtc.accept({roomId, from, members})

//拒绝
/**
 * 拒绝呼叫
 * @param from 会议发起人
 * @returns {Promise<void>}
 */
this.webRtc.refuse(from)

//下面是依赖"view-design": "^4.0.0",组件的通知逻辑,可以参考,也可以使用其他ui框架的通知组件或者自己开发
initBeCalling(from, caller, roomId, members)
{
    this.$Notice.close('notice')
    // 被叫逻辑
    this.$Notice.info({
        title: '系统通知',
        duration: 60,
        name: 'notice',
        render: h => {
            return h('div', [
                '您收到多人音频通知，请接听 !',
                h('div',
                    {
                        style: {
                            marginTop: '5px',
                            textAlign: 'right',
                        },
                    },
                    [
                        h('span', {
                            style: {
                                color: '#2d8cf0',
                                cursor: 'pointer',
                            },
                            on: {
                                click: () => {
                                    this.$Notice.close('notice')
                                    this.$nextTick(() => {
                                        this.webRtc.accept({roomId, from, members})
                                    })
                                },
                            },
                        }, '接听'),
                        h('span', {
                            style: {
                                color: '#bc1802',
                                marginLeft: '10px',
                                cursor: 'pointer',
                            },
                            on: {
                                click: () => {
                                    this.$Notice.close('notice')
                                    this.webRtc.refuse(from)
                                },
                            },
                        }, '拒绝'),
                    ],
                ),
            ])
        },
    })
}