该案例完整源码地址： github.com/recall-lide…
1.什么是umi，可以参照官方文档学习 https://umijs.org/zh-CN/docs
2.腾讯实时音视频（基于webrtc,官方API文档https://cloud.tencent.com/document/product/647），声网也是一样的（还支持RN，非常的nice）
3.首先初始化umi项目 yarn create @umijs/umi-app
4.注册登录腾讯云，按照官方步骤https://cloud.tencent.com/document/product/647/32398获取SDKAPPID和SECRETKEY ，并提前下载demo源码https://github.com/tencentyun/TRTCSDK/tree/master/Web/TRTCSimpleDemo,供后续调试使用
5.当我们注册好账号，并且下载好demo源码之后，就可以尝试在我们自己的环境中集成sdk，并且跑通demo
5.1、安装sdk
npm install trtc-js-sdk --save
或者 yarn add trtc-js-sdk
在需要的地方使用,只需要引入即可，在ts环境下会报找不到包，在全局声明文件声明一下即可declare module 'trtc-js-sdk'
import TRTC from 'trtc-js-sdk';
5.2、签名
- 在官方demo源码中找到
\Web\js\debug\GenerateTestUserSig.js这个js文件，这里面就是签名函数，我们可以全选，把他复制出来，建立我们自己的签名函数，我是直接写到了项目中，注意本地调试要引入Web\js\lib-generate-test-usersig.min.js这个js文件来进行签名，上线之后转为后台签名
import React, { FC, useEffect, useState } from 'react'
import TRTC from 'trtc-js-sdk'
import LibGenerateTestUserSig from '@/assets/lib/js/lib-generate-test-usersig.min.js'
// 签名
const genTestUserSig = (userID: string) => {
const SDKAPPID = 填自己的 //必须是数字
const EXPIRETIME = 604800
const SECRETKEY = '填自己的'
const generator = new LibGenerateTestUserSig(
SDKAPPID,
SECRETKEY,
EXPIRETIME,
)
const userSig = generator.genTestUserSig(userID)
return {
sdkAppId: SDKAPPID,
userSig: userSig,
}
}
5.3创建客户端
- 我们根据官方提供的api
https://trtc-1252463788.file.myqcloud.com/web/docs/TRTC.html,调用对应的方法来进行创建 - 创建客户端之前，我们要检查浏览器支持情况，如果不支持则给出提示，支持直接创建
// 创建客户端
const createClient = (id: string) => {
//获取签名
const config = genTestUserSig(id)
const sdkAppId = config.sdkAppId
const userSig = config.userSig
const clt = TRTC.createClient({
mode: 'videoCall',
sdkAppId,
userId,
userSig,
})
setClient(clt)
// 在进入房间之前，监听并订阅远端流
subscribeStream(clt)
// 加入房间
joinRoom(clt, homeId)
}
// 检查浏览器是否支持
const check = () => {
// v4.7.0 及其以上版本的 SDK
TRTC.checkSystemRequirements().then((checkResult: any) => {
if (!checkResult.result) {
// SDK 不支持当前浏览器，根据用户设备类型建议用户使用 SDK 支持的浏览器
console.log(
'checkResult',
checkResult.result,
'checkDetail',
checkResult.detail,
)
return
}
// 否则创建客户端
createClient(userId)
})
}
5.4、加入房间
- 加入一个音视频通话房间。进房代表开始一个音视频通话会话，这时候 SDK 会监听远端用户进房退房情况，若有远端用户进房并且发布流，本地会收到 'stream-added' 事件。进房后用户可以通过 publish() 发布本地流，本地流发布成功后远端用户就会收到相应 'stream-added' 事件通知从而完成一个双向的音视频通话连接。
const joinRoom = (c: any, roomId: number) => {
c.join({ roomId })
.catch((error: any) => {
console.error('进房失败 ' + error)
})
.then(() => {
console.log('进房成功')
//创建本地流
createStream(userId, c)
//播放远端流
playStream(c)
})
}
5.5、创建本地流
- 创建一个本地流 Stream 对象，本地流 Stream 对象通过 publish() 方法发布本地音视频流。
const createStream = (u: any, c: any) => {
const ls = TRTC.createStream({ userId, audio: true, video: true })
setLocalStream(ls)
ls.initialize()
.catch((error: any) => {
console.error('初始化本地流失败 ' + error)
})
.then(() => {
console.log('初始化本地流成功')
// 播放本地流，调用Stream的play方法传入dom的id
ls.play('local_stream')
//创建好后才能发布
publishStream(ls, c)
})
}
5.6、发布本地流
- 本地流发布后，远端就会监听到 ‘stream-added’ 事件，然后对远端流进行播放，就建立了通信
const publishStream = (local: any, c: any) => {
c.publish(local)
.catch((error: any) => {
console.error('本地流发布失败 ' + error)
})
.then(() => {
console.log('本地流发布成功')
})
}
5.7、监听远端流
- 监听到远端流增加后，进行订阅
const subscribeStream = (c: any) => {
c.on('stream-added', (event: any) => {
const rs = event.stream
console.log('远端流增加: ' + remoteStream?.getId())
//订阅远端流
c.subscribe(rs)
})
}
5.8、播放远端流
- 监听订阅成功事件 'stream-subscribed'，播放远端流
const playStream = (c: any) => {
c.on('stream-subscribed', (event: any) => {
const rs = event.stream
setRemoteStream(rs)
console.log('远端流订阅成功：' + rs.getId())
rs.play('remote_stream')
})
}
5.9、退出房间
//退出音视频
const leaveRoom = (c: any) => {
client
.leave()
.then(() => {
console.log('退房成功')
// 停止本地流，关闭本地流内部的音视频播放器
localStream?.stop()
// 关闭本地流，释放摄像头和麦克风访问权限
localStream?.close()
setLocalStream(null)
setClient(null)
// 退房成功，可再次调用client.join重新进房开启新的通话。
history.push({
pathname: '/',
})
})
.catch((error: any) => {
console.error('退房失败 ' + error)
// 错误不可恢复，需要刷新页面。
})
}
5.10效果图
- 左侧远端流，右侧本地流
