一、业务流程
本节汇总了一些常见的业务流程，帮助你更好地理解整个场景的实现流程。
音视频推流音视频拉流
二、步骤一：开通服务
虚拟营业厅场景需要依赖腾讯云 实时音视频 TRTC 产品构建。
1. 首先，你需要登录 实时音视频 TRTC 控制台 创建应用。
注意：说明：
2. 创建应用完毕之后，你可以在应用管理 > 应用概览中看到该应用的基本信息，其中需要你保管好 SDKAppID、SDKSecretKey 便于后续的使用，同时应避免密钥泄露造成流量盗刷。
三、步骤二：导入SDK
把 TRTC SDK 的 zip 压缩包下载到本地并解压，解压后可以在 SDK 目录下找到 trtc.js 文件。
在 Web 页面中引用 SDK 库：
<script src="trtc.js"></script>
四、步骤一：生成鉴权凭证
UserSig 是腾讯云设计的一种安全保护签名，目的是为了阻止恶意攻击者盗用你的云服务使用权。腾讯云实时音视频（TRTC）、即时通信（IM）等服务都采用了该套安全保护机制，TRTC 在进房时鉴权，IM 在登录时鉴权。
·调试跑通阶段：可以通过 客户端示例代码 和 控制台 两种方法计算生成 UserSig，仅用于调试测试。
·正式运行阶段：推荐安全等级更高的服务端计算 UserSig 方案，防止客户端被逆向破解泄露密钥。
具体实现流程如下：
1. 你的 App 在调用 SDK 的初始化函数之前，首先要向你的服务器请求 UserSig。
2. 你的服务器根据 SDKAppID 和 UserID 计算 UserSig。
3. 服务器将计算好的 UserSig 返回给你的 App。
4. 你的 App 将获得的 UserSig 通过特定 API 传递给 SDK。
5. SDK 将 SDKAppID + UserID + UserSig 提交给腾讯云服务器进行校验。
6. 腾讯云校验 UserSig，确认合法性。
注意：说明：
五、步骤二：初始化与监听
TRTC SDK 创建实例与设置事件监听器。
const trtc = TRTC.create();
trtc.on('error', err => {
console.error(err);
});
注意：说明：
六、步骤三：房间管理
建议一次业务会话对应一个房间，业务后台自己维护一个房间列表。TRTC 没有严格的房间概念，会在第一个用户进入房间时，如果房间不存在则自动创建对应的虚拟房间，当所有人都退出房间后，房间则会自动解散。如果有用户再次进入房间的话，房间不存在则会被再次创建，所以业务方需要控制和管理房间的状态，判断用户能否进入房间。
进房参数注意事项：
// 进入房间
try {
await trtc.enterRoom({ roomId, scene:'rtc', sdkAppId, userId, userSig});
console.log('进房成功');
} catch (error) {
console.error('进房失败' + error);
}// 退出房间
await trtc.exitRoom();
注意：说明：
七、步骤四：音频流管理
TRTC SDK 默认为自动订阅音频流逻辑，用户进房会自动开始播放远端用户的声音。如有手动订阅音频流的需求，可以在enterRoom时设置 autoReceiveAudio 的值为 false 关闭自动播放音频。
1. 推流端。
// 进房成功后，开始推音频和视频流
try {
await trtc.enterRoom({ roomId, scene:'rtc', sdkAppId, userId, userSig });
console.log('进房成功');
// 为了预览摄像头画面，你需在 DOM 中放置一个 HTMLElement，可以是一个 div 标签，假设其 id 为 local-video。
const view = 'local-video';
await trtc.startLocalVideo({ view });
await trtc.startLocalAudio();
} catch (error) {
console.error('进房失败 ' + error);
}
2. 拉流端。
当收到远端流事件回调后，则可以开始拉流。
trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
// 为了播放视频画面，你需在 DOM 中放置一个 HTMLElement，可以是一个 div 标签，假设其 id 为 `${userId}_${streamType}`
const view = `${userId}_${streamType}`;
trtc.startRemoteVideo({ userId, streamType, view });
});
八、设备检测
在虚拟营业厅场景中，为了避免用户端与坐席端的业务会话连通后音视频不通、互相听不到的问题，需要引导用户端进入会话前，或者进入排队队列后，进行设备检测。通常需要检测摄像头、麦克风和扬声器这三个设备。
// 摄像头测试，传入摄像头 Id 和 Div Id
async function cameraTest(cameraId, container) {
localStream = TRTC.createStream({
audio: false,
video: true,
cameraId: cameraId
});
try {
await localStream.initialize();
} catch (error) {
}
localStream.play(container);
}
// 完成测试后关闭 localStream
localStream.close();
// 扬声器测试
<div class="audio-test">
<audio id="audio-player" src="https://xx.xx.xx/test.mp3" controls></audio>
</div>
// 完成测试后把 mp3 播放停掉
let audioPlayer = document.querySelector('#audio-player');
if (!audioPlayer.paused) {
audioPlayer.pause();
}
// 麦克风测试
async function cameraTest(micId, container) {
localStream = TRTC.createStream({
audio: true,
video: false,
micId: micId
});
try {
await localStream.initialize();
} catch (error) {
}
localStream.play(container);
// 监听音量，并量化显示出来
setInterval(() => {
let volume = localStream.getAudioLevel();
// 把获取到的麦克风音量展示在界面上
}, 100);
}
// 完成测试后关闭
localStream.close();
TRTC 提供了设备检测 的 React 组件，推荐使用组件快速集成设备检测功能。
九、网络检测
用户端的网络环境不可控，用户有可能在户外、商场等地方用手机办理业务，网络环境复杂多变，网络信号时好时坏。这种情况需要引导用户端进入视频会话前做网络质量检测，如果检测不通过，提示用户找个网络信号好的地方，在办理业务的过程中尽量保持位置不动，以免视频中断影响业务办理。
// 使用测试账号模拟用户进房，测试上行通话质量
async function testNetworkQuality() {
uplinkClient = TRTC.createClient({
sdkAppId,
userId,// 使用测试账号
userSig,
mode: 'rtc'
});
const localStream = TRTC.createStream({ audio: true, video: true });
await localStream.initialize();
// 监听 network-quality 事件
uplinkClient.on('network-quality', async event => {
// 上行网络质量
const { uplinkNetworkQuality } = event.uplinkNetworkQuality;
// rtt
const { rtt } = await window.uplinkClient.getTransportStats();
});
await uplinkClient.join({ roomId: xxx }); // 加入用于测试的房间
await uplinkClient.publish(localStream);
}
// 测试完成后退出测试房间
localStream.stop();
localStream.close();
uplinkClient.leave();
downlinkClient.leave();
十、人脸检测和识别
在虚拟营业厅场景中，通常需要确认是不是本人办理业务，这里可以通过摄像头采集到的画面抓取一帧图片，进行人脸识别和认证。
在进行人像识别前，可以做个模板示意图，指引用户按示意图摆放人像在摄像头中的位置，确保人脸能清晰完整展示在画面中。
采集摄像头图片：
async function getPicFromCamera(cameraId, container) {
localStream = TRTC.createStream({
audio: false,
video: true,
cameraId: cameraId
});
try {
await localStream.initialize();
} catch (error) {
}
await localStream.play(container);
// 获取用户的视频画面，userId不用传
let imgData = trtc.getVideoSnapshot(streamType:TRTC.TYPE.STREAM_TYPE_MAIN)
// 把图片数据上传到业务后台
}
业务后台调用人脸核身接口，判断视频中人像是否是办理业务本人：
credential := common.NewCredential(
"SecretId",
"SecretKey",
)
// 实例化一个client选项
cpf := profile.NewClientProfile()
cpf.HttpProfile.Endpoint = "faceid.tencentcloudapi.com"
// 实例化要请求产品的client对象
client, _ := faceid.NewClient(credential, "", cpf)
// 实例化一个请求对象
request := faceid.NewImageRecognitionV2Request()
request.IdCard = common.StringPtr("身份证号码")
request.Name = common.StringPtr("姓名")
request.ImageBase64 = common.StringPtr("Web前端从摄像头采集到的图片数据")
// 返回的resp是一个ImageRecognitionV2Response的实例，与请求对象对应
response, err := client.ImageRecognitionV2(request)
if _, ok := err.(*errors.TencentCloudSDKError); ok {
fmt.Printf("An API error has returned: %s", err)
return
}
if err != nil {
panic(err)
}
十一、内网代理
金融保险行业，对于网络安全要求比较高，内网和外网有防火墙隔离。用户端在外网、坐席端在内网、TRTC 服务端在厂商云端，三方要能视频通话，则需要打通座席端内网到 TRTC 服务端的链路。
API时序图
业务方在自己的内网搭建 WebRTC 代理和 WebScoket 代理，给代理服务器开通访问 TRTC 服务的防火墙白名单，坐席端通过代理连接到 TRTC 服务，这样可以做到座席端的内网环境隔离。
坐席端设置代理：
const trtc = TRTC.create();
await trtc.enterRoom({
…,
proxy: {
// 设置 Websocket 代理，用于中转 SDK 与 TRTC 后台的信令数据包。
websocketProxy: 'wss://proxy.example.com/ws/',
// 设置 turn server，用于中转 SDK 与 TRTC 后台的媒体数据包。192.168.x.x:3478 为 turn server 的 ip 及端口，
turnServer: [{ url: '192.168.x.x:3478', username: 'myname', credential: '123456', credentialType: 'password' }]
// SDK 默认会向 yun.tim.qq.com 域名上报日志，但若该域名在你的内网无法访问，你需要给该域名开白名单或者配置以下日志代理。
// 设置日志上报代理，日志是排查问题的关键数据，请务必设置该代理。
loggerProxy: 'https://proxy.example.com/logger/',
}
})