Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a button to switch the camera on mobile #2694

Merged
merged 1 commit into from
Nov 1, 2024

Conversation

robintown
Copy link
Member

@robintown robintown commented Oct 28, 2024

No description provided.

@toger5
Copy link
Contributor

toger5 commented Oct 29, 2024

I think it makes sense to immediately think about > 2 cameras. I think nowadays, the amount of ===2 camera phones is very limited.
But if it is intentionally split into two PR's that also makes sense to me.
My camera is muted after a device switch (using the current selector + more than 2 devices, android, firefox)
Probably worth another issue right?

Copy link
Contributor

@toger5 toger5 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add a screenshot?
I am not sure what icon and css it is using.
But it seems its adding another entry in the bottom button list.
It does not handle clicks on your video tile rigth?

@robintown
Copy link
Member Author

I think it makes sense to immediately think about > 2 cameras. I think nowadays, the amount of ===2 camera phones is very limited.

I don't have an iPhone to test with so I'll need someone to report what the device names are (so I can get an idea for whether analyzing them for their facing direction is possible) and also what the expected behavior is when you switch cameras in say, Facetime.

@toger5
Copy link
Contributor

toger5 commented Oct 29, 2024

Android Samsung S21
Firefox:

  • Facing front: 3
  • Facing front: 1
  • Facing front: 0
  • Facing back: 2

Chrome:

  • camera2 1, facing front
  • camera2 3, facing front
  • camear2 2, facing back
  • camera2 0, facing back

@fkwp
Copy link
Contributor

fkwp commented Oct 29, 2024

tested with Pixle 7 Pro -> nice

is localization an issue? Safari on iOS has a German translation:

  • Frontkamera
  • Rückseitige Dual-Weitwinkelkamera
  • Rückseitige Ultra-Weitwinkelkamera
  • Rückkamera

@robintown
Copy link
Member Author

Haha, localization is what I feared :D

@fkwp
Copy link
Contributor

fkwp commented Nov 1, 2024

nice: just tested on

  • iOS and it works
  • iPadOS and it works
  • Android Pixel 7 Pro and it works

@toger5
Copy link
Contributor

toger5 commented Nov 1, 2024

Tested on S21
It works well in chrome.
On Firefox it works but it is very easy to get into a "broken" state

If i set it to one of the other cameras in the device drawer settings menu i dont get a stream anymore.

Playing around with it more:
It seems that there is just one camera that breaks everything. I select it once and it does not work anymore.
If I only use index 0 and 3 its all good. i can select the camerea from the dropdown and via the swap button.
On chrome and FF.

Copy link
Contributor

@toger5 toger5 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two review comments:

  • Does it make sense to use the same logic we have for the mute button? Each press independent if the camera has updated already swapts the target state. We always wait until the camera has finished updating/(track has sucessfully changed) only then we start the next update in case the user has pressed the button as many times so the current state is not the target state?
  • should we remove the video device selector on mobile knowing that my phone can get into a "broken" state? I also dont see any benefit to choose a specific device on mobile especially if the device descriptions are so poor.
    We can entirely drop the settings tab on mobile. On desktop i do see value in selecting the exact webcam one wants to use.

@robintown
Copy link
Member Author

Does it make sense to use the same logic we have for the mute button? Each press independent if the camera has updated already swapts the target state.

In the mute button case, I think this was motivated by the immediate feedback that we have to provide in the form of changing the button's state. We don't have to provide any such feedback for the switch camera button, so I'd prefer to avoid complicating it. Or is there another reason to try that?

should we remove the video device selector on mobile knowing that my phone can get into a "broken" state?

I'm not sure what you mean here. The video device selector does update when the camera is switched.

@robintown robintown requested a review from toger5 November 1, 2024 20:37
@toger5
Copy link
Contributor

toger5 commented Nov 1, 2024

I'm not sure what you mean here. The video device selector does update when the camera is switched.

I was considering to entirely remove the video tab from the settings. So that the only way to select a camera device is by the switch button

@toger5
Copy link
Contributor

toger5 commented Nov 1, 2024

In the mute button case, I think this was motivated by the immediate feedback that we have to provide in the form of changing the button's state.

What does happen if i press the button twice (quickly)
Will it ignore the second click because its in a "wait for camera switch" mode?
I mostly wanted to make sure its not colliding with the first switch.

Copy link
Contributor

@toger5 toger5 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good.
I left a non blocking comment.

Thanks!

src/room/InCallView.tsx Show resolved Hide resolved
Comment on lines +111 to +118
const localTrackOptions = useMemo(
() => ({
// The only reason we request audio here is to get the audio permission
// request over with at the same time. But changing the audio settings
// shouldn't cause this hook to recreate the track, which is why we
// reference the initial values here.
// We also pass in a clone because livekit mutates the object passed in,
// which would cause the devices to be re-opened on the next render.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this moved to the lobby file?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Previously the only thing that needed the video track was the VideoPreview itself, but now the LobbyView wants to render a button which accesses the track as well, so I hoisted the video track and the code for starting it up to this component

@robintown
Copy link
Member Author

I was considering to entirely remove the video tab from the settings. So that the only way to select a camera device is by the switch button

I was more asking about what you mean by 'broken', as the state seemed to stay accurate in my testing

What does happen if i press the button twice (quickly)
Will it ignore the second click because its in a "wait for camera switch" mode?
I mostly wanted to make sure its not colliding with the first switch.

It appears to simply ignore the second click, yeah, which is an acceptable behavior here IMO

@robintown robintown merged commit 8f8e2b4 into element-hq:livekit Nov 1, 2024
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants