[bug][Web, Firefox] Can not connect to any room due to timeouts.

[itsarjunsinh]

Describe the bug

Firefox users can not connect to any room using the Flutter SDK & LiveKit cloud. The url & token used, do in fact work on Firefox in example.livekit.io which uses the react SDK. The Flutter web build is able to connect to rooms in Chrome & Safari.

The exception message is

LiveKit Exception ConnectionException Timed out waiting for EnginePeerStateUpdatedEvent

The time out being referenced is likely the duration assigned to the connection field in the Timeouts class.

Previously (in older versions), 'SC Failed to connect to server' was the exception.

To Reproduce

Just attempt to connect to a room in a Flutter web build on Firefox. Don't even need to render any remote participants.

Sample Code

class RoomPage extends StatefulWidget {
  const RoomPage({super.key, required this.title});

  final String title;

  @override
  State<RoomPage> createState() => _RoomPageState();
}

class _RoomPageState extends State<RoomPage> {
  bool isOn = false;
  String errorLog = '';
  Room? _room;

  Future<void> _toggleVideo() async {
    if (isOn) {
      try {
        setState(() {
          _room?.disconnect();
          _room?.dispose();
          isOn = false;
          errorLog = '';
        });
      } catch (e) {
        setState(() {
          errorLog = e.toString();
          isOn = true;
        });
      }
    } else {
      try {
        _room = Room();
        await _room!.connect( 'wss://[name].livekit.cloud', '[token]');
        setState(() {
          _room;
          isOn = true;
          errorLog = '';
        });
      } catch (e) {
        // FIREFOX throws EnginePeerStateUpdatedEvent timeout exception here.
        setState(() {
          _room = null;
          errorLog = e.toString();
          isOn = false;
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          if (errorLog.isEmpty && isOn) const Center(child: Text('Connected')),
          if (!isOn) const Center(child: Text('Disconnected')),
          if (errorLog.isNotEmpty) Center(child: Text(errorLog)),
          if (_room?.localParticipant != null)
            for (final track in _room!.localParticipant!.videoTracks)
              VideoTrackRenderer(track as VideoTrack),
        ],
      ),
      floatingActionButton: FloatingActionButton(
              onPressed: _toggleVideo,
              tooltip: 'Video',
              backgroundColor: isOn ? Colors.red : Colors.white,
              child: const Icon(Icons.video_call),
       ),
    );
  }
}

Expected behavior
Firefox will connect to the room, so we can render local and remote participants.

Platform information

• Flutter version: 3.3.8
• Plugin version: 1.1.9 (also in previous versions)
• Flutter target: Web - Firefox (v107.0.1)

[cloudwebrtc]

The reason is that firefox does not support the connectionstatechange event, we may have to use iceconnectionstatechange instead

https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionstatechange_event

[cloudwebrtc]

Fix from upstream flutter-webrtc/dart-webrtc#17