Video SDK Type and Version
@zoom/videosdk: 1.11.0
Description
We are currently in the process of migrating our web application from Twilio to Zoom Video SDK.
During one-on-one video calls, we occasionally encounter an issue where the video feed of the remote participant appears with a pink/purple color distortion immediately after connecting to the call.
Interestingly, this issue seems to resolve itself either by reloading the page or waiting a few seconds.
We have observed this problem across various operating systems, including Windows, macOS, iOS, and Ubuntu, as well as different browsers, so it does not appear to be tied to a specific platform or browser.
Notably, this color distortion only affects the remote participant’s video feed; the local preview video remains unaffected.
Code
Here’s the relevant parts of our code. initParticipantsVideo
is called after initializing the client and joining the session.
We use the <video-player-container>
html element.
const attachParticipantVideo = async (userId: number) => {
const participant = client.getUser(userId);
if (!participant || !participant.bVideoOn) {
return;
}
const userVideo = await stream.attachVideo(userId, VideoQuality.Video_360P);
participantsContainer.appendChild(userVideo as VideoPlayer);
};
const initParticipantsVideo = async () => {
const users = client
.getAllUser()
.filter((user) => user.userId !== client.getCurrentUserInfo().userId);
for (const user of users) {
try {
await attachParticipantVideo(user.userId);
} catch (e) {
console.error("Failed to setup participant video", e);
}
}
};