How to skip DeviceSelectionScreen (deviceSelectionStep)?

[pavel-khudiakov-effectiff]

Question
Hello everyone! My version is 0.7.1.

I need to skip deviceSelectionStep, but if I replace (for example) <DeviceSelectionScreen …> to <Button onClick={handleJoin}> in PreJoinScreens.tsx, after join the room my video is black (it's switching on after double click on/off) and microphone is muted forever.

Can't understand why. Red dot on Chrome tab showing that video and audio tracks is working.

Additional context

[pavel-khudiakov-effectiff]

I think the problem is somewhere inside getAudioAndVideoTracks() in PreJoinScreens.tsx:

1. If we use NextJS with reactStrictMode: true, it permanently uses mic and camera, because of useEffect without return. Probably I should add:

return () => { localTracks.forEach((track) => track.stop()); };

2. Then if I skip <DeviceSelectionScreen /> and replace it with <Button onClick={handleJoin}> instead, I facing some async problem:

• Local camera is black (it's switching on after double click on/off) and microphone is muted forever.
• But if I stay little longer on PreJoinScreens page, camera and mic initiated well.

How should I init camera and mic in a correct way, when I skip DeviceSelectionScreen part? I need it to accept incoming call without device checks.

[pavel-khudiakov-effectiff]

The problem is reproduced if isAcquiringLocalTracks is true at the same time while we are trying to get publications from usePublications. I modify my example for join on submit:

master...pavel-khudiakov-effectiff:twilio-video-app-react:skip-device-selection-screen

Now it's easier to reproduce.
Probably the problem is somewhere inside async operations.

[pavel-khudiakov-effectiff]

I tried any variation if (isAcquiringLocalTracks) return <Spinner> or waiting isAcquiringLocalTracks before call handleJoin(), but it's not helping.

[pavel-khudiakov-effectiff]

Add commit 'debug 2':

1. When I try to call handleJoin() from useEffect with if (!isAcquiringLocalTracks) ... it is still black screen:

  useEffect(() => {
    if (isJoining && !isAcquiringLocalTracks) {
      handleJoin();
    }
  }, [isJoining, isAcquiringLocalTracks]);

2. But if I click at the button (after it is no more disabled), everything is fine:

        <Button
          variant="contained"
          color="primary"
          data-cy-join-now
          onClick={handleJoin}
          disabled={isAcquiringLocalTracks}
        >

[pavel-khudiakov-effectiff]

Now it's working:

732d704

If anyone has better ideas, please feel free to text me.