Self video on iPhone not mirrored

Video SDK Web
,
1

Description
When I start the video with the option mirrored = true, my video is not mirrored correctly (when I raise my right hand, the opposite hand appears in the video) on iPhone.
However, it works fine on other OS (Android, Windows, macOS, iPadOS).

Browser Console Error
No errors appear.

Which Web Video SDK version?
1.11.10

Device (please complete the following information):

  • Device: iPhone 12
  • OS: iOS 17.5.1
  • Browser: Safari
  • Browser Version: Safari 17.5.1
2

Hey @phuongnv1

Thanks for your feedback.

There are some issues with the mirror option in the stream.startVideo method on certain platforms. Currently, a workaround is to call the stream.mirrorVideo method right after the startVideo method is resolved.

Thanks
Vic

3

Key @vic.yang

I tried calling stream.mirrorVideo right after startVideo. Here is my code:

await stream.startVideo({cameraId, hd, originalRatio}); stream.mirrorVideo(true);

I noticed that the result didn’t change.
Please help me check it.

4

Hey @phuongnv1

Sorry for the incorrect guidance. To be precise, stream.mirrorVideo should be performed after rendering the self-view.

Thanks
Vic

5

Hey @vic.yang
Thank you for your feedback.

I tried running stream.mirrorVideo right after stream.renderVideo or stream.attachVideo. However, I had to delay it by about 200ms for it to work (which doesn’t seem great from a UX perspective).

When I turn off the camera and turn it back on (handling it the same way as above), it seems the mirrorVideo function doesn’t work.

I want to ask if, when the user changes position or turns the camera off and back on, do I need to call the mirrorVideo function after rendering the self-view.

Another approach is that I want to use CSS (transform: scaleX(-1) on the video-player element) to flip the video, but it doesn’t work.

Thanks
Phuong

6

Hey @phuongnv1

Thanks for your feedback.

When I turn off the camera and turn it back on (handling it the same way as above), it seems the mirrorVideo function doesn’t work.

Perhaps when you detached the video, you also deleted the corresponding video player. So, the next time you attach the video, the video player is a new element, which means the original mirror effect won’t take effect.

Another approach is that I want to use CSS (transform: scaleX(-1) on the video-player element) to flip the video, but it doesn’t work.

It only takes effect on certain platforms such as iOS. We recommend using stream. mirrorVideo method.

Thanks
Vic