When rendering the self-view on a canvas in iOS, the aspect ratio distorts when in portrait mode.

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?

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)
      width: Math.floor(capturedWidth * ratio),
      height: Math.floor(capturedHeight * ratio)
  }, [stream])

  const onCanvasResize = useCallback(() => {
    const handler = _.debounce(() => {
    }, 500)
  }, [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])

    target: containerRef.current,
    callback: onCanvasResize
const { width, height } = dimension

await stream
          participant.userId, // currentUserId

<div ref={containerRef}>
  <canvas id={SELF_VIDEO_AREA_ID} ref={canvasRef} />

To Reproduce(If applicable)
Join the session and allow camera access.


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.

Perhaps the return value of the getCapturedVideoResolution function is not as intended when in portrait orientation. When I executed stream.getCapturedVideoResolution() in portrait mode, it returned width: 640, height: 480. The expected values are reversed for width and height.

When I first switch to landscape mode and then back to portrait, getCapturedVideoResolution returns the intended values.

Hey @yusuke.yamashita

Thanks for your feedback.

In Video SDK web, the video will be cropped into a 16/9 ratio by default, if you want to use the original ratio, pass the originalRatio when invoking the startVideo method.

We are improving the video experience on mobile browsers, we will add more aspect ratio support in future release, Please stay tuned.


I’m aware that by using originalRatio, I can obtain it in a 3:4 aspect ratio. However, this doesn’t change the fact that the aspect ratio is distorted only upon initial display. It appears that only at the initial display, the video captured in a 3:4 ratio is attempting to be displayed in a 16:9 ratio. When I open the page with the device in landscape mode, it displays at the correct aspect ratio. Also, the aspect ratio is appropriately displayed when switched from landscape to portrait mode.

Hey @yusuke.yamashita

I checked the code you provided again, it seems the code for setting the canvas dimension is not correct. Currently, even though the ratio of the captured stream is 3/4, we still rendered it in a 16/9 ratio, I believe as you have tried, we will fill the gaps with the black bar.

We are working on support of capturing and rendering more aspect ratios such as 3/4, and 4/3 on mobile browsers. Please stay tuned.


Does this mean that even when captured in a 3:4 ratio, the Zoom Video SDK is rendering it in a 16:9 ratio? Or, could there be an issue with my implementation of the canvas? If there’s a problem on the Zoom Video SDK side, could you let me know when it is expected to be fixed?

Hey @yusuke.yamashita

Yes. Video will be rendered in a 16/9 ratio now. The 3/4 aspect ratio may be supported in September or October release.


I understand. Thank you for your investigation! I’m looking forward to the update.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.