Description
Hello. I am rendering the video of remote participants with reference to the following URL, but the video is distorted as shown in the attached image (see Screenshots).
I have implemented it with the contents of Single HTML canvas rendering.
It occurs with high probability when participants are using Mac + Microsoft Edge.
Is there any solution?
I will provide any necessary information.
Thanks.
Browser Console Error
The following warning message was displayed.
- [Deprecation] The ScriptProcessorNode is deprecated. Use AudioWirkletNoe instead. (Wpisz Worklet audio | Blog | Chrome for Developers)
- not sharing decode type
Which Web Video SDK version?
I’m using the SDK version 1.10.8.
Video SDK Code Snippets
videoClient.getAllUser().forEach(async (user) => {
if (user.bVideoOn) {
await videoClient.getMediaStream().renderVideo(
document.getElementById("remote-video-canvas") as HTMLCanvasElement,
user.userId,
1920,
1080,
0,
0,
3
);
}
});
const peerVideoStateChange = async (payload: {
action: "Start" | "Stop";
userId: number;
}): Promise<void> => {
console.log("peer-video-state-change");
if (payload.action === "Start") {
await videoClient
.getMediaStream()
.renderVideo(
document.getElementById("remote-video-canvas") as HTMLCanvasElement,
payload.userId,
1920,
1080,
0,
0,
3
);
} else if (payload.action === "Stop") {
await videoClient
.getMediaStream()
.stopRenderVideo(
document.getElementById("remote-video-canvas") as HTMLCanvasElement,
payload.userId
);
}
};
To Reproduce(If applicable)
- Participant A is using Mac + Edge, and join the room,
- Participant B is using Windows + Chrome, and join the room.
- Both remote video images are distorted.
Screenshots
Device
- Participant A
- Apple M1 Pro macOS Sonoma 14.4.1
- Microsoft Edge 123.0.2420.65
- Participant B
- Windows 11 Pro 23H2 22631.3296
- Google Chrome 123.0.6312.86
