logo头像
游魂的网络日志

IM腾讯实时音视频小记

Uniapp使用腾讯实时音视频(demo)

  1. 在插件市场购买插件(0元) https://ext.dcloud.net.cn/plugin?id=9035

    1. 输入安卓包名(hbuilder点击发行 原生app云打包之后可以看到包名)

      image-20220926115011379

    2. 配置插件

      image-20220926114442012

  2. 完成步骤1后 打包(发行 原生app云打包)使用公共测试证书

  3. 自定义调试基座 然后运行到安卓app基座(连接手机调试)

    img

  4. 第一行引入原生插件(只能在app中生效),其它是腾讯云的配置,userId自己定义,userSig建议服务端生成(https://cloud.tencent.com/document/product/647/17275)

1
2
3
4
5
const TUICallKit = uni.requireNativePlugin('TencentCloud-TUICallKit')
const TUICallingEvent = uni.requireNativePlugin('globalEvent')
const sdkAppId = 1400737560
const userId = 'xxx'
const userSig = 'eJyrVgrxCdYrSy1S...'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
created() {
const options = {
SDKAppID: sdkAppId,
userID: userId,
userSig: userSig,
}
TUICallKit.login(options, (res) => {
if (res.code === 0) {
console.log('已登录')
} else {
console.log(`login failed, error message = ${res.msg}`)
}
})
TUICallingEvent.addEventListener('onError', (res) => {
console.log('onError', JSON.stringify(res))
})
TUICallingEvent.addEventListener('onCallReceived', (res) => {
console.log('onCallReceived', JSON.stringify(res))
})
TUICallingEvent.addEventListener('onCallCancelled', (res) => {
console.log('onCallCancelled', res)
})
TUICallingEvent.addEventListener('onCallBegin', (res) => {
console.log('onCallBegin', JSON.stringify(res))
})
TUICallingEvent.addEventListener('onCallEnd', (res) => {
console.log('onCallEnd', JSON.stringify(res))
})
}
  1. 之后就可以根据文档操作了,发起挂断事件监听(https://cloud.tencent.com/document/product/647/78762)

Web使用腾讯实时音视频(demo)

  1. 测试使用script引入 也可以使用npm(https://cloud.tencent.com/document/product/647/78731)

    1
    2
    3
    4
    <script src="./trtc-js-sdk/trtc.js"></script>
    <script src="./tim-js-sdk/tim-js.js"></script>
    <script src="./tsignaling/tsignaling-js.js"></script>
    <script src="./tuicall- engine-webrtc/tuicall-engine-webrtc.js"></script>
  2. 引入客户端生成userSig相关文件

    1
    2
    3
    <script src="./js/clipboard.min.js"></script>
    <script src="./js/lib-generate-test-usersig.min.js"></script>
    <script src="./js/generateTestUserSig.js"></script>
  3. 传入参数 登录,之后就可以呼叫 监听事件等等(https://cloud.tencent.com/document/product/647/78756)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    const {
    TUICallEngine,
    TUICallEvent
    } = window['tuicall-engine-webrtc']
    let options = {
    SDKAppID: sdkAppId, // 接入时需要将 0 替换为您的云通信应用的 SDKAppID
    tim: null // tim 参数适用于业务中已存在 TIM 实例,为保证 TIM 实例唯一性
    }
    console.log()
    let tuiCallEngine = TUICallEngine.createInstance(options);
    tuiCallEngine.login({
    userID: userId,
    userSig: userSig,
    }).then(res => {
    // success
    }).catch(error => {
    console.warn('login error:', error)
    })
  4. Web端没看到有通话组件的(呼叫界面、接听界面)

踩坑

  • 如果呼叫一个从未登录过得用户 不会唤起UI 只会提示呼叫成功
  • 当你呼叫未登录过得用户后,再去呼叫正常的用户也不会拉起UI