Avoid multiple calls to getUserMedia for getLocalDevices

[lukasIO]

fixes iOS safari video preview disappearing.
Alternative fix on the SDK level to livekit/livekit-react#60.
With this fix, we don't have to change anything in the react packages.

[changeset-bot]

🦋 Changeset detected

Latest commit: de4ec44

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
livekit-client	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[davidzhao]

I wonder if there's an alternative way to trigger the permission dialog without impacting normal devices.

Is it worth trying this approach:

• in getDevices, calling navigator.mediaDevices.getUserMedia() but with constraints that wouldn't match any device.. for example, deviceId: "dummy".

Thinking out loud, the problem only exists if we acquire the same device twice, so if we could make it so that the getUserMedia attempt in discovery grants permissions, but fails to acquire an actual device.

[davidzhao]

this seems like it'd be problematic when we require different constraints? It seems that each attempt could be different.

[davidzhao]

ok, I totally misread the code.. it wasn't re-using it, but just caching the previous one.. clever!

this should work as well.

[davidzhao]

though I think there are still some edge cases as it relates to audio/video types.

[lukasIO]

nice idea! will test that approach with a dummy deviceId.
It might still fail as I think on iOS Safari acquiring multiple camera tracks isn't supported, but will verify.

[lukasIO]

@davidzhao your suggestion works like a charm also on iOS. It's a great workaround!

edit: ah. celebrated too early. behaviour is different for firefox. On firefox the permissions do not get granted or rather the user doesn't even get prompted for permissions if there is a OverConstrainedError. This leads to the devices list staying empty. MDN says:

If no camera exists with this resolution or higher, then the returned promise will be rejected with OverconstrainedError, and the user will not be prompted.

This seems to be in accordance with how the spec defines the steps: https://www.w3.org/TR/mediacapture-streams/#dom-mediadevices-getusermedia

If candidateSet is the empty set, jump to the step labeled NotFound Failure below.

The jump would mean skipping a user facing permission prompt.

We could:

• use your suggestion for all browsers and make an exception for firefox
• keep the old behaviour (the one prior to this PR) and only use the dummy-id workaround for Safari

As the spec says Firefox's behaviour is the "correct" one, I'd opt for only making the Safari case an exception. What do you think?

[davidzhao]

nice!!

[lukasIO]

@davidzhao the map approach seems to work across browsers as long as the safari case is handled separately. tested across firefox/chrome/safari and iOS safari

[davidzhao]

awesome work!