Description
I am currently developing a video chat application using the Zoom Video SDK. When displaying the self-view in a canvas tag on an iPhone (iOS version 16.5), the aspect ratio distorts when the device is in portrait mode.
※ When trying to post an image, the following error occurs, so I cannot post the image.
An error occurred: Sorry, you can’t embed media items in a post.
Browser Console Error
Which Web Video SDK version?
1.8.0
Video SDK Code Snippets
const options: CaptureVideoOption = {
mirrored: true,
hd: stream.isSupportHDVideo()
}
await stream.startVideo(options)
const setCanvasDimension = useCallback(() => {
const { width: containerWidth, height: containerHeight } = containerRef.current.getBoundingClientRect()
const containerSize = Math.min(containerWidth, containerHeight) // Assuming it becomes a square
const { width: capturedWidth, height: capturedHeight } = stream.getCapturedVideoResolution()
const ratio = Math.min(containerSize / capturedWidth, containerSize / capturedHeight)
setDimension({
width: Math.floor(capturedWidth * ratio),
height: Math.floor(capturedHeight * ratio)
})
}, [stream])
const onCanvasResize = useCallback(() => {
const handler = _.debounce(() => {
setCanvasDimension()
}, 500)
handler()
}, [setCanvasDimension])
useEffect(() => {
const { width, height } = dimension
try {
canvasRef.current.width = width
canvasRef.current.height = height
} catch (e) {
stream.updateVideoCanvasDimension(canvasRef.current, width, height)
}
}, [dimension, stream])
useZoomSizeCallback({
target: containerRef.current,
callback: onCanvasResize
})
const { width, height } = dimension
await stream
.renderVideo(
element,
participant.userId, // currentUserId
width,
height,
0,
0,
VideoQuality.Video_360P
)
<div ref={containerRef}>
<canvas id={SELF_VIDEO_AREA_ID} ref={canvasRef} />
</div>
To Reproduce(If applicable)
Join the session and allow camera access.
Screenshots
Troubleshooting Routes
Device (please complete the following information):
- Device:iPhone
- OS: iOS version 16.5
- Browser: Chrome
Additional context
Also, when the device orientation is switched to landscape, the aspect ratio corrects itself. Upon switching back to portrait, the aspect ratio remains correct, but the displayed area is not as intended.
