Option to Disable Horizontal Mirroring of Self-View in Amazon Chime SDK

[funayamateppei]

Community Note

• Please vote for this issue by adding a 👍 reaction to the issue. This will help the community and maintainers from the Amazon Chime SDK team to prioritize this request.
• Please do not leave "+1" or "me too" comments, they generate extra noise for issue followers and do not help prioritize the request.
• Please go through the existing issues to see if your request has already been recommended.
• Please do not use this template for bugs or support. Each individual repository has a PR template, documentation, and resources for troubleshooting.
• If you are interested in working on this issue or have submitted a pull request, please leave a comment.

Tell us about your request

What do you want us to build?

We would like an option in the Amazon Chime SDK to disable the horizontal mirroring of the self-view video stream. This feature request is specifically for the amazon-chime-sdk-js library.

Tell us about the problem you are trying to solve and why is it hard?

Currently, the self-view in video streams is horizontally mirrored by default. This causes issues when trying to share specific points on the screen with others during a video call. The mirrored view can lead to confusion, as the point being clicked or pointed at by the user does not correspond to what the other participants see.

How are you currently solving a problem?

As a workaround, users have to manually adjust their actions to account for the mirrored view, which is not intuitive and can lead to errors. This workaround is not effective, especially in scenarios where precise pointing or clicking needs to be demonstrated.

Additional context

This feature is important for improving the accuracy of communication during video calls, especially in scenarios where screen sharing and precise pointing are necessary. Allowing users to choose whether their self-view is mirrored or not would greatly enhance the usability of the Amazon Chime SDK for these use cases.

[ltrung]

@funayamateppei Thanks for submitting this. For a workaround you can override the styling of the video element to remove the mirroring effect. Here is the link to all the style we apply to the video tile https://github.com/aws/amazon-chime-sdk-js/blob/main/src/videotile/DefaultVideoTile.ts#L34. After calling bindVideoElement you can override the style in your code, or you can just use css !important to auto remove the style.
Similar issue #1021.

[funayamateppei]

@ltrung

Thank you for your response.

I wanted to use the method you suggested, but we are currently in the process of migrating from Twilio to Chime. During this period, we are separating Twilio and Chime per customer while waiting for port openings.

Since Twilio does not mirror horizontally, applying horizontal mirroring in the UI would affect the Twilio side. It would be great if there were a flag to disable horizontal mirroring, as this would make it easier for users. I wanted to share this feedback with you.

For now, we have resolved the issue by rendering the video using the MediaStream from the returned VideoTrack instead of using the rendering method provided by Chime.

const newMediaStream = await deviceController.startVideoInput({facingMode: "environment"})

const attach = (element: HTMLVideoElement) => {
  element.srcObject = newMediaStream
}