Switch camera black screen issue for video-sdk web on iOS for Safari (iOS 17.4.1)(Safari 17.4)

Video SDK Web
1

Description

  1. On iOS camera has weird ratio issue when first turned on vs second time turned on.
  2. Switch Camera on iOS web zoomStream.switchCamera() has issue where video screen turn black and even if you switch back it will remain black unless video camera was turned off and turned back on.

Which Web Video SDK version?
“@zoom/videosdk”: “^1.10.7”,
“@zoom/videosdk-ui-toolkit”: “^1.9.8”,

Video SDK Code Snippets

          await zoomStream.switchCamera(nextCameraToSwitch).then((result) => {
            console.info('%c switchCamera result', 'background-color: green;', result);
          }).catch((error) => {
            console.error('Error during switchCamera execution', error);
          });
          console.info(
            '%cSwitching camera successful',
            'background-color: green;',
            nextCameraToSwitch
          );

To Reproduce(If applicable)
Steps to reproduce the behavior:
In video-sdk web

2 issues

  1. Video size ratio issue.
  2. Switch camera blacking out issue.

(Camera video stream ratio issue reproduce)
1.Use iOS safari 17.4
2.Turning video on first time will have flat size video
3. turn off video
4. turn video back on video streaming content from camera size ratio will be horizontal (how you hold phone ) ratio rather than landscape ratio for camera.
After this no matter how you turn on or off it will always shows as (how you hold the phone camera view ratio)

(Camera switch from front to back of phone camera issue)
1.Use iOS safari 17.4
2. turn on video webcam (user facing - front)
3. switch camera to (‘environment’) = which is back.
4. about 50% on first time when switch happens screen is black and no matter how many time you switch it will just show black screen. unless camera is turned off and turned on again.

Troubleshooting Routes
I have already tried to debug using dev tool debug inspector mode on Safari to check if there is any error occurring during camera switching as well as camera activation (turning them on)

Device (please complete the following information):

  • Device: iPhone 11 and iPhone 14
  • OS: iOS 17.4.1
  • Browser: Safari
  • Browser Version: Safari 17.4
2

Hey @kevinlabx

Thanks for your feedback.

(Camera switch from front to back of phone camera issue)

This is a known issue, and we are planning to address it in the upcoming version. As a workaround, you can use Individual HTML element rendering to render videos.

Thanks
Vic

1 Like
3

@vic.yang
Vic, I found alternative solution for switch camera black out issue.
May be someone else who is also needing to fix this issue can apply this temporary solution.

You just have to turn it on and off real quick and trigger switch camera and I only applied for the iOS.

It’s bit bandage to the problem but hopefully it will save some time for others until the root fix.

Thank you.

          if (isIosMobile) {
            await zoomStream
              ?.stopVideo()
              .then(() => {
                console.info('%c stopVideo result', 'background-color: green;');
              })
              .catch((error) => {
                console.error(
                  'Error during stopVideo execution during switch camera',
                  error
                );
              });
            await zoomStream
              ?.startVideo()
              .then(() => {
                console.info(
                  '%c startVideo result execution during switch camera',
                  'background-color: green;'
                );
              })
              .catch((error) => {
                console.error(
                  'Error during startVideo execution during switch camera',
                  error
                );
              });
          }

          await zoomStream
            .switchCamera(nextCameraToSwitch)
            .then((result) => {
              console.info(
                '%c switchCamera result',
                'background-color: green;',
                result
              );
            })
            .catch((error) => {
              console.error('Error during switchCamera execution', error);
            });
          console.info(
            '%cSwitching camera successful',
            'background-color: green;',
            nextCameraToSwitch
          );
1 Like
5

what’s iOS version?

did you make sure you use 'user' instead of 'environment' ?

'user' is the front camera and back is 'environment'

I think it can also behave differently depending on your iOS version + iOS safari browser version.

check both compare to mine.