Issue Description
You have implemented both screen sharing and camera video display using the Agora Whiteboard SDK, but you want to distinguish whether a remote user is sharing their screen or using their camera from the remote user's side.
Platform/SDK
- Agora Whiteboard SDK (Web)
- JavaScript client API
Step by Step Solution
1. Understand the User ID (UID) Concept
Each client joining an Agora RTC channel has a unique user ID (UID). By default, if you do not specify a UID when joining, Agora assigns a random one.
2. Use Separate Clients for Camera and Screen Sharing
- Create one Agora client instance (`clientA`) for the camera/microphone stream.
- Create a second Agora client instance (`clientB`) for the screen sharing stream.
3. Assign Fixed or Structured UIDs
When joining the channel:
- Join with `clientA` using your normal user UID (e.g., `12345`).
- Join with `clientB` using a UID that has a specific prefix to indicate screen sharing, for example `99912345` (where `999` is the prefix and `12345` is the base UID).
Make sure your authentication token matches the UID you provide.
4. Publish Tracks Separately
- Publish the camera/mic video and audio tracks with `clientA`.
- Publish the screen sharing video track with `clientB`.
5. Identify Screen Sharing vs Camera on the Subscriber Side
In your subscriber event handler (`user-published`), check the UID of the user publishing the video track:
client.on('user-published', async (user, mediaType) = {
await client.subscribe(user, mediaType);
if (mediaType === 'video') {
if (user.uid.toString().startsWith('999')) {
// This is a screen share stream
user.videoTrack.play("screen-share-container");
} else {
// // This is a camera video stream
user.videoTrack.play("camera-container");
}
}
if (mediaType === 'audio') {
user.audioTrack.play();
}
});This way, based on the UID prefix, you can differentiate and render screen sharing and camera video separately.
Root Cause
The Agora SDK does not automatically distinguish between screen sharing and camera video streams by media type or metadata. Without a predefined UID scheme or separate client instances, both streams appear as generic video tracks, making it impossible to differentiate on the subscriber side.
Prevention/Best Practice
- Always use separate Agora client instances for camera and screen sharing to maintain clear separation of streams.
- Use a consistent UID naming convention or prefix for screen sharing users to simplify identification and handling on subscribers.
- Ensure matching authentication tokens are generated for each UID to avoid join failures.
Corresponding Documentation/Links
- Agora Web SDK Join API (UID parameter)
https://api-ref.agora.io/en/video-sdk/web/4.x/interfaces/iagorartcclient.html#join
- Agora Screen Sharing Implementation Sample
https://github.com/AgoraIO-Community/Agora-Web-Tutorial/tree/master/Screen-Sharing
- Agora Whiteboard SDK Documentation
https://docs.agora.io/en/whiteboard