This document describes how to enter a room as audience and start co-anchoring. The process of entering a room and publishing streams as an anchor in live streaming scenarios is the same as that in call scenarios. Please see Real-Time Audio/Video Call. Example
You can click Demo to try out the audio/video features, or log in to GitHub to get the sample code related to this document. Step 1. Create a client object
mode
: TRTC mode, which should be set to live
sdkAppId
: the sdkAppId
you obtain from Tencent Cloud
userId
: user ID
userSig
: user signature
const client = TRTC.createClient({
mode: 'live',
sdkAppId,
userId,
userSig
});
Step 2. Enter a room as audience
Call Client.join() to enter a TRTC room. Below are the request parameters: roomId
: room ID
role
: role
anchor
(default): users in the role of “anchor” can publish local streams and play remote streams.
audience
. Users in the role of “audience” can play remote streams but cannot publish local streams. To co-anchor and publish local streams, audience must switch the role to anchor
using Client.switchRole().
client
.join({ roomId, role: 'audience' })
.then(() => {
console.log('Entered room successfully');
})
.catch(error => {
console.error('Failed to enter room' + error);
});
Step 3. Play a live stream
1. After receiving client.on('stream-added')
, which is used to listen for remote streams, call Client.subscribe() to subscribe to the remote stream. Note:
To ensure that you are notified when a remote user enters the room, please subscribe to the client.on('stream-added')
callback before you call Client.join() to enter the room. client.on('stream-added', event => {
const remoteStream = event.stream;
console.log('New remote stream:' + remoteStream.getId());
client.subscribe(remoteStream);
});
client.on('stream-subscribed', event => {
const remoteStream = event.stream;
console.log('Subscribed to remote stream successfully:' + remoteStream.getId());
remoteStream.play('remote_stream-' + remoteStream.getId());
});
2. In the callback that indicates successful subscription to a remote stream, call Stream.play() to play the stream on a webpage. The play
method allows a parameter that is a div element ID. The SDK will create an audio/video tag in the div element and play the stream on it. client.on('stream-subscribed', event => {
const remoteStream = event.stream;
console.log('Subscribed to remote stream successfully:' + remoteStream.getId());
remoteStream.play('remote_stream-' + remoteStream.getId());
});
Step 4. Co-anchor
Step 4.1. Switch roles
client
.switchRole('anchor')
.then(() => {
})
.catch(error => {
console.error('Failed to switch role' + error);
});
Step 4.2. Co-anchor
1. Call TRTC.createStream() to create a local audio/video stream. In the example below, the audio/video stream is captured by the camera and mic. The parameters include: userId
: ID of the user to whom the local stream belongs
audio
: whether to enable audio
video
: whether to enable video
const localStream = TRTC.createStream({ userId, audio: true, video: true });
localStream
.initialize()
.then(() => {
console.log('Local stream initialized successfully');
})
.catch(error => {
console.error('Failed to initialize local stream' + error);
});
3. Play the local stream after it is initialized
localStream
.initialize()
.then(() => {
console.log('Local stream initialized successfully');
localStream.play('local_stream');
})
.catch(error => {
console.error('Failed to initialize local stream' + error);
});
client
.publish(localStream)
.then(() => {
console.log('Local stream published successfully');
})
.catch(error => {
console.error('Failed to publish local stream' + error);
});
Step 5. Exit the room
Call Client.leave() to exit the room. The live streaming session ends. client
.leave()
.then(() => {
})
.catch(error => {
console.error('Failed to leave room' + error);
});
Note:
The value of appScene
must be the same on each client. Inconsistent appScene
may cause unexpected problems.
Was this page helpful?