How can I only iterate between the front and back camera? instead of 5 cameras?

[issamBoutissante]

Rotating the camera inside video call composite is switching between more than 3 to 5 cameras

This happens when I rotate the camera

we need to switch only between 2 cameras "principle ones

---

"@azure/communication-calling": "^1.20.1-beta.2",
"@azure/communication-calling-effects": "^1.0.0-beta.1",
"@azure/communication-chat": "^1.3.2",
"@azure/communication-common": "^2.3.0",
"@azure/communication-react": "^1.10.0",

• OS & Device: iOS, (didn't test on Android)
• Browser: [Apple Safari]

[alkwa-msft]

Thanks for sharing your issue @issamBoutissante. Today we only use the device apis in the browser which are able to detect all of the various cameras that are available to your web browser. On the iPhone/android devices there can be many cameras.

The issue here is that at this time it is challenging to identify specifically which cameras you want to look for. What is the difference between two front-facing cameras versus one camera that is front and one that is back. It is challenging for us to determine and choose the correct devices for you.

If you know specifically which devices you are looking for you can try to enumerate the specific array of devices instead of grabbing all of the devices.

The logic for selecting the next camera to switch to is here. It grabs "cameras" from the props we pass in

communication-ui-library/packages/react-components/src/components/LocalVideoCameraButton.tsx

Line 4 in 9dec947

import { IconButton, useTheme } from '@fluentui/react';

The props are drawn from our LocalVideoTileSelector which grabs the values directly from the "deviceManager" in the Web Calling SDK being used under the hood.

communication-ui-library/packages/react-composites/src/composites/CallComposite/selectors/LocalVideoTileSelector.ts

Line 11 in 9dec947

export const localVideoCameraCycleButtonSelector = createSelector([getDeviceManager], (deviceManager) => {

I will share some of my findings with the team. I am unsure if we can automatically choose the best front/back camera but we can try or look into exposing an API to only allow specific "devices" by the developer through the UI Library. The challenge with the latter is how can the developer determine the best front/back facing camera descision.

[issamBoutissante]

Hi @alkwa-msft ,

Thanks a ton for helping out with my camera issue (#3949)! I totally understand the challenge of picking the right camera, especially with all those front-facing ones.

I'll check out the code you linked to and try manually choosing the front/back cameras myself. That might work as a temporary solution.

The idea of letting developers pick specific cameras through the UI library sounds awesome for the future! It would give us much more control.

Thanks again for everything. I'll keep you posted on how things go!

[morgan-hill]

I'm also blocked with this. Having a functioning ability to rotate through the primary forward and back cameras would dramatically improve current UI library. It's not that useful toggling through five cameras on a mobile device.

[alkwa-msft]

We will review this issue with the team. @morgan-hill thanks for sharing your feedback. If you have any other issues you would like to share please open up a Github issue.