以主播身份进入房间进行直播的场景跟实时音视频通话场景流程一样，请参考使用TRTC Web SDK实现实时音视频通话。本文主要介绍以观众身份进入直播间。
实现直播互动，就是在创建用户时（调用 TRTC.createClient() 方法）将配置属性中 mode 的值改为“live”，然后在用户进入房间时（调用 client.join() 方法）说明身份参数 role 的值，‘anchor’为主播、‘audience’为观众。
当 role 的值为 ‘anchor’ 时，通常的操作为开播和下播，方法的调用和音视频的接通挂断一样；当 role 的值为 ‘audience’ 时，通常的操作会有进入房间看直播、离开房间、与主播进行连麦互动、下麦，观众角色进出房间不会触发 stream-added 通知，连麦和下麦会触发
1、进入房间代码：主播和观众的进房方式可以是一样的，只需要在 client.join() 时设置好 role 的值
代码语言：javascript复制 let sdkAppId = this.sdkAppId; // 您从腾讯云申请的 sdkAppId
let userId = this.userId; // 用户ID
let roomId = this.roomId; // 房间号
let mode = this.mode; // 实时音视频通话模式，‘live’为直播
let role = this.role; // 直播模式时，设置有效，‘anchor’为主播角色，‘audience’为观众角色
let client = this.client; // 本地客户端对象
let localStream = this.localStream; // 本地音视频流对象
let remoteStream = this.remoteStream; // 远端音视频流对象
let userSig = genTestUserSig(userId).userSig; // 用户签名
let clientConfig = { // 创建client对象时的配置参数
mode,
sdkAppId,
userId,
userSig
};
client = TRTC.createClient(clientConfig); // 创建client对象
client.on("stream-added", event => { // 监听流的变化
console.log("有人加入了");
if(this.remoteStream != null){
this.remoteStream.stop() // 将play（）创建的音视频标签从HTML中移除，详细请参考 https://trtc-1252463788.file.myzijiebao.com/web/docs/LocalStream.html#stop
}
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());
if (role == "anchor") {
remoteStream.play("audienceStream");
} else if (role == "audience") {
remoteStream.play("anchorStream");
}
});
// 进入房间，主播进房role值为‘anchor’，观众进房间role值为‘audience’
client.join({ roomId: parseInt(roomId), role }).then(() => {
let streamConfig = { // 配置创建本地所收集的音视频流的参数
userId: userId,
video: true,
audio: true
};
localStream = TRTC.createStream(streamConfig); // 创建本地流
localStream.setVideoProfile("480p");
if (role == "anchor") { // 判断角色是主播时，将收集本地音视频流进行推流操作
console.log("主播");
localStream.initialize().then(() => { // 初始化本地音视频流后进行之后的操作
client.publish(localStream); // 进行推流操作
localStream.play("anchorStream", { // 将本地流进行播放
objectFit: "contain",
muted: true // 本地流播放时，默认禁止播放本地流的音轨
});
this.localStream = localStream;
this.client = client;
});
} else if (role == "audience") { // 判断角色是观众时，将收集的本地音视频流保存，用于连麦时的推流
console.log("你是观众");
this.localStream = localStream;
}
this.client = client;
});以上设置了两个监听，用来监听远端流的变化（stream-added）和远端流订阅情况（stream-subscribed）；身份为主播时，用于监听观众连麦所推的远端流，然后进行相关操作；身份为观众时，则用于确保不会错过主播所推的流。
2、主播下播代码
代码语言：javascript复制 let client = this.client;
let localStream = this.localStream;
client.unpublish(localStream).then(() => { // 先确保停止推流再离开房间，主播离开房间，整个直播会话结束
client.leave();
});3、观众连麦代码
代码语言：javascript复制 let client = this.client;
let localStream = this.localStream;
client.switchRole("anchor").then(() => { // 转换观众身份为主播，
localStream.initialize().then(() => { // 初始化所收集到的本地流，然后进行推流和播放
client.publish(localStream); // 推流操作，会触发主播的stream-added通知
localStream.play("audienceStream", {
objectFit: "contain",
muted: true
});
this.localStream = localStream;
this.client = client;
});
});4、下麦操作的代码
代码语言：javascript复制 let client = this.client;
client.switchRole("audience").then(() => { // 转换身份为观众，自动停止推流
console.log("变观众了");
let localStream = this.localStream;
localStream.stop(); //
});以上 client.switchRole() 方法实际上是 ‘退出房间’-->‘变换身份’-->‘以新的身份重新进入房间’ 三个动作的封装，所以在调用时会触发你设计的相关操作，比如一些进房和退房的监听函数，在设计这些监听函数时需要谨慎考虑你的代码逻辑。
