# web-rtc-sdk-js

> tq-vdc业务端sdk

Latest version **1.0.0-alpha.10** (published 2022-06-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install web-rtc-sdk-js
pnpm add web-rtc-sdk-js
yarn add web-rtc-sdk-js
bun add web-rtc-sdk-js
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-alpha.10 |
| Published | 2022-06-06 |
| First published | 2022-06-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 12.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | liujie@hztianque.com |
| Maintainers | jackxuechen |
| Keywords | web-rtc-sdk-js, WebRTCSDKJS |

## Links

- npm: https://www.npmjs.com/package/web-rtc-sdk-js
- npm.io page: https://npm.io/package/web-rtc-sdk-js

## Dependencies (2)

- [js-base64](https://npm.io/package/js-base64.md) ^3.7.2
- [babel-plugin-add-module-exports](https://npm.io/package/babel-plugin-add-module-exports.md) ^0.2.1

## Recent versions

- 1.0.0-alpha.10 (latest) — 2022-06-06

## README

# WebRTCSDKJS 公司 WebRTC 业务端sdk

## 简介

* 注意事项：
  - > 依赖 tq-message-center-engine (2.0.0+)版本

#### 安装依赖

```shell
npm install tq-message-center-engine@2.0.0-alpha.6
npm install web-rtc-sdk-js@1.0.0-alpha.10 
```

#### demo地址,master分支
http://gitlab.hztianque.com/tianque-im/rtc/public/web-rtc-sdk-js-demo

#### 示例代码

```js
//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)
                                },
                            },
                        }, '拒绝'),
                    ],
                ),
            ])
        },
    })
}
```

---
_Source: https://npm.io/package/web-rtc-sdk-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._