在使用 TRTC Web SDK 中，经常需要使用到两个对象，Client 客户端对象，Stream 流对象：
- Client 对象，代表一个本地客户端。Client 类的方法提供了加入通话房间、发布本地流、订阅远端流等功能。
- Stream 对象，代表一个音视频流对象，包括本地音视频流对象 LocalStream 和远端音视频流对象 RemoteStream 。Stream 类的方法主要提供音视频流对象的行为，包括音频和视频的播放控制。
下图展示了一个基本音视频通话的API调用流程：
实时音视频通话流程1、加入聊天代码：
代码语言：javascript复制 let sdkAppId = this.sdkAppId; // 您从腾讯云申请的 sdkAppId
let userId = this.userId; // 用户ID
let roomId = this.roomId; // 房间号
let client = this.client; // 本地客户端对象
let localStream = this.localStream; // 本地音视频流对象
let remoteStream = this.remoteStream; // 远端音视频流对象
let userSig = genTestUserSig(userId).userSig; // 用户签名，生成方式可以参考 https://cloud.tencent.com/document/product/647/17275
// 创建client需要的配置参数
let clientConfig = {
mode: "rtc", // 实时音视频通话模式，设为‘rtc’；
sdkAppId,
userId,
userSig
};
// 相关配置可参考 https://trtc-1252463788.file.myzijiebao.com/web/docs/TRTC.html#.createClient
// 先创建一个client对象
client = TRTC.createClient(clientConfig);
this.client = client;
// client.on(eventName,handler)给client对象设置监听回调函数
/*
eventName事件名称有：了解更多 https://trtc-1252463788.file.myzijiebao.com/web/docs/module-Event.html
stream-added 远端流添加事件，当远端用户发布流后会收到该通知
stream-removed 远端流移除事件，当远端用户取消发布流后会收到该通知
stream-updated 远端流更新事件，当远端用户添加、移除或更换音视频轨道后会收到该通知
stream-subscribed 远端流订阅成功事件，调用 subscribe() 成功后会触发该事件
connection-state-changed WebSocket 信令通道连接状态变化事件
‘DISCONNECTED’：连接断开
‘CONNECTING’：正在连接中
‘RECONNECTING’：自动重连中
‘CONNECTED’：已连接
peer-join 远端用户进房通知
peer-leave 远端用户退房通知
注意：
live 模式下，不支持观众进退房通知
v4.8.2 之前版本，远端用户进房推流后，才会收到进房通知
v4.8.2 及其之后版本，远端用户进房，就能收到进房通知
mute-audio 远端用户禁用音频通知
mute-video 远端用户禁用视频通知
client-banned 用户被踢出房间通知，被踢原因有：同名用户登录；被账户管理员主动踢出房间
network-quality 网络质量统计数据事件，进房后开始统计，每两秒触发一次，包括上行（uplinkNetworkQuality）和下行（downlinkNetworkQuality）的质量统计数据
上行网络质量为 SDK 到腾讯云的上行连接网络质量
下行网络质量为 腾讯云到 SDK 的所有下行连接的平均网络质量
error 错误事件，当出现不可恢复错误后，会抛出此事件
player-state-changed Audio/Video Player 状态变化事件 App 可根据状态变化来更新 UI，比如，通过监听 video player 状态变化来关闭或打开遮板
*/
// 监听远端流添加事件 请在join()进房前注册该事件，确保您不会错过远端用户进房通知。 收到上述事件后要通过subscribe()订阅远端音视频流。
client.on("stream-added", event => {
remoteStream = event.stream;
this.remoteStream = remoteStream;
console.log("远端流增加: " remoteStream.getId());
//订阅远端流
client.subscribe(remoteStream);
});
// 监听订阅到远端流触发事件
client.on("stream-subscribed", event => {
remoteStream = event.stream;
console.log("远端流订阅成功：" remoteStream.getId());
// 播放远端流
remoteStream.play("remoteStream");
});
// client.join()加入房间 相关API：https://trtc-1252463788.file.myzijiebao.com/web/docs/Client.html#join
client.join({ roomId: parseInt(roomId) }).then(() => {
// 确保加入房间后执行一下代码
// 创建一个localStream对象所要填写的参数配置
let streamConfig = {
userId: userId,
video: true,
audio: true
};
// 相关配置可参考 https://trtc-1252463788.file.myzijiebao.com/web/docs/TRTC.html#.createStream
// 创建一个localStream本地音视频流对象
localStream = TRTC.createStream(streamConfig);
// localStream初始化之前可以进行一些设置 具体方法可参考 https://trtc-1252463788.file.myzijiebao.com/web/docs/LocalStream.html
localStream.setVideoProfile("480p");
/*
localStream.setAudioProfile(profile) 设置音频Profile
localStream.setVideoProfile(profile) 设置视频Profile v4.8.4 及其之后版本，该方法支持动态调用；v4.8.4 之前版本，该方法需要在 initialize() 之前调用。
localStream.setScreenProfile(profile) 设置屏幕分享Profile
*/
// 初始化本地流
localStream.initialize().then(() => {
// 初始化成功之后执行一下函数
/*
localStream.setVideoContentHint(hint) 设置视频内容提示，主要用于提升在不同场景下的视频编码质量 该方法需要在调用 initialize() 成功之后调用。
*/
// 初始化后进行推流
// 该方法需要在 join() 进房后调用，一次音视频会话中只能发布一个本地流。若想发布另外一个本地流，可先通过 unpublish() 取消发布当前本地流后再发布新的本地流。
// 在发布本地流后，可通过 removeTrack()、addTrack()、 replaceTrack() 来更新本地流中的某个音频或视频流。
// 发布本地流后远端会收到 ‘stream-added’ 事件通知。同理远端发布视频流时本地端会收到 ‘stream-added’ 事件通知
client.publish(localStream);
localStream.play("localStream", {
// 播放的相关配置参考 https://trtc-1252463788.file.myzijiebao.com/web/docs/LocalStream.html#play
objectFit: "contain", // 视频画面显示模式，参考 CSS object-fit 属性
muted: true //本地流默认为true，防止播放从麦克风采集回来的声音
});
this.localStream = localStream;
this.client = client;
});
});2、断开聊天代码：
代码语言：javascript复制 let client = this.client; // 本地客户端对象
let localStream = this.localStream; // 本地音视频流对象
client.unpublish(localStream).then(() => {
// 确认取消发布本地流后执行一下代码
// 退出当前音视频通话房间，结束一次音视频通话会话。
// 退房前请确保已经通过 unpublish() 取消发布本地流，若未取消发布本地流，SDK 内部会自动取消发布本地流。 同时，退房会关闭所有远端流。
client.leave();
});
