Video SDK Type and Version
VideoSDK: 1.11.10
Description
I created a canvas with a 16:9 ratio and then started a local video track with a virtual background. However, the video displayed in the canvas has a different ratio, resulting in black area around it. How can I fix this?
Here is my code:
async startPreviewVideo(imageUrl) {
try {
if (imageUrl) {
await this.localVideoTrack.start(document.querySelector("#preview-camera-canvas"), { imageUrl: imageUrl });
} else {
await this.localVideoTrack.start(document.querySelector("#preview-camera-video"));
}
} catch (error) {
Logger.error('[JS] Start local preview video error', error);
throw error;
}
}
Hey @lmtruong1512
Thanks for your feedback.
In Video SDK Web, we provide the cropped option, could you try it again?
Or would you like to share the session IDs with us for troubleshooting purposes?
Thanks
Vic
@vic.yang Thank you for your reply.
I tried the cropped option, but it didn’t work. My session ID is zyEbgY+8SZKrnRLdhUeocQ==. Could you help me troubleshoot this?
Hey @lmtruong1512
The issue of black bars might be related to the camera device.
We attempt to capture at a 16/9 aspect ratio, but not all cameras support it.
Could you share the camera model with us?
Alternatively, you can check if the resolution supports 1280x720 by going to chrome://media-internals/ and looking under the Video Capture tab.
Thanks
Vic
@vic.yang
Thank you for your reply, this is my camera info, can you check it:
