TRTC 云助手 Web

业务流程
本节汇总了一些常见的业务流程，帮助您更好地理解整个场景的实现流程。
音视频推流
音视频拉流
﻿
﻿
﻿
﻿
﻿
﻿
接入准备
步骤一：开通服务
虚拟营业厅场景需要依赖腾讯云 实时音视频 TRTC  产品构建。
1. 首先，您需要登录 实时音视频 TRTC 控制台 创建应用。
﻿
﻿
﻿
说明：
建议创建两个应用分别用于测试环境和生产环境，首次开通 TRTC 服务可前往 试用中心 免费领取10000分钟试用时长包。
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，确认合法性。
﻿
﻿
﻿
说明：
调试跑通阶段的本地 UserSig 计算方式不推荐应用到线上环境，容易被逆向破解导致密钥泄露。
我们提供了多个语言版本（Java/GO/PHP/Nodejs/Python/C#/C++）的 UserSig 服务端计算源代码，详见 UserSig 计算源码。
步骤二：初始化与监听
TRTC SDK 创建实例与设置事件监听器。
const trtc = TRTC.create();

trtc.on('error', err => {
  console.error(err);
});
说明：
如果您的业务会话生命周期跟 SDK 生命周期一致，关闭页面前可以不进行反初始化。若您只在进入业务会话之后才初始化 SDK，退出业务会话之后不再使用，可以对 SDK 进行反初始化。
建议监听 SDK 事件通知，对一些常见错误进行日志打印和处理，详见 错误码表。
步骤三：房间管理
建议一次业务会话对应一个房间，业务后台自己维护一个房间列表。TRTC 没有严格的房间概念，会在第一个用户进入房间时，如果房间不存在则自动创建对应的虚拟房间，当所有人都退出房间后，房间则会自动解散。如果有用户再次进入房间的话，房间不存在则会被再次创建，所以业务方需要控制和管理房间的状态，判断用户能否进入房间。
进房参数注意事项：
注意：
TRTC 房间号分为整型 roomId 和字符串类型 strRoomId，两种类型的房间不互通，选择其一即可，各端需要统一房间号类型。
UserSig 和 SdkAppId 建议在初始化 SDK 时即从业务后台生成并获取，其中 UserSig 只会在进房时校验，进房后过期不影响体验。
TRTC 进房场景可分为实时通话（AudioCall、VideoCall）和互动直播（Live、VoiceChatRoom）两大类。虚拟营业厅场景选用 VideoCall 模式，Web 端对应的场景为 rtc。
TRTC 用户角色，只有在互动直播模式下才区分主播和观众，其中只有主播才有推流权限，观众如需推流要先切换至主播角色。虚拟营业厅场景由于选择的是 VideoCall 模式，没有主播和观众的区分，所以 role 参数不需要填。
// 进入房间
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/',
  }
})
﻿
Web

本页目录：

业务流程

接入准备

步骤一：开通服务

步骤二：导入SDK

接入过程

步骤一：生成鉴权凭证

步骤二：初始化与监听

步骤三：房间管理

步骤四：音频流管理

高级功能

设备检测

网络检测

人脸检测和识别

内网代理
