quickrtc_flutter_client 1.1.0 copy "quickrtc_flutter_client: ^1.1.0" to clipboard
quickrtc_flutter_client: ^1.1.0 copied to clipboard

A Flutter WebRTC library built on MediaSoup for real-time video conferencing.

example/README.md

QuickRTC Flutter Example #

Code snippets demonstrating how to use the QuickRTC Flutter Client SDK.

Quick Start #

1. Socket Connection #

import 'package:socket_io_client/socket_io_client.dart' as io;

final socket = io.io(
  'https://your-server.com:3000',
  io.OptionBuilder()
      .setTransports(['websocket'])
      .disableAutoConnect()
      .build(),
);
socket.connect();

2. Create Controller & Join Meeting #

import 'package:quickrtc_flutter_client/quickrtc_flutter_client.dart';

final controller = QuickRTCController(socket: socket, debug: true);

await controller.joinMeeting(
  conferenceId: 'my-room',
  participantName: 'John',
);

3. Start Camera & Microphone #

// Get local media
final media = await QuickRTCStatic.getLocalMedia(MediaConfig.audioVideo());

// Publish to meeting
await controller.produce(
  ProduceInput.fromTracksWithTypes(media.tracksWithTypes),
);

4. Toggle Controls #

await controller.toggleMicrophoneMute();  // Mute/unmute mic
await controller.toggleCameraPause();     // Pause/resume camera

5. Screen Sharing #

// Mobile
final media = await QuickRTCStatic.getLocalMedia(MediaConfig.screenShareOnly());

// Desktop (with picker dialog)
final media = await QuickRTCStatic.getScreenShareWithPicker(context);

// Publish
await controller.produce(
  ProduceInput.fromTrack(media.screenshareTrack!, type: StreamType.screenshare),
);

Android External Stop Detection

On Android, when screen sharing is stopped via the system notification ("Stop now" button) or when MediaProjection is revoked, the SDK automatically:

  1. Detects the stop via producer stats monitoring (checks if bytes are still being sent)
  2. Calls stopStream() which emits closeProducer to the server
  3. Other participants are notified and remove the screen share tile

This is handled automatically - no additional code is required. The SDK uses multiple detection strategies:

  • Track onMute callback
  • Track muted property monitoring
  • Producer RTP stats monitoring (most reliable - detects when no new bytes are being sent for ~2 seconds)

6. Render Video #

// Local video
QuickRTCMediaRenderer(
  stream: localStream,
  mirror: true,
  isLocal: true,
  participantName: 'You',
)

// Remote video
QuickRTCMediaRenderer(
  remoteStream: participant.videoStream,
  participantName: participant.name,
)

// Remote audio (invisible - plays audio)
QuickRTCAudioRenderers(participants: state.participantList)

6. Media Rendering #

QuickRTCMediaRenderer

Display local/remote video with built-in indicators.

// Local
QuickRTCMediaRenderer(
  stream: localStream,
  mirror: true,
  isLocal: true,
  participantName: 'You',
)

// Remote
QuickRTCMediaRenderer(
  remoteStream: participant.videoStream,
  participantName: participant.name,
)

QuickRTCAudioRenderers

Invisible widget to handle all remote participant audio.

QuickRTCAudioRenderers(participants: state.participantList)

7. State Management Patterns #

The SDK provides specialized widgets for efficient state management:

QuickRTCBuilder

Rebuilds a specific part of your UI when state changes.

QuickRTCBuilder(
  buildWhen: (prev, curr) => prev.participantCount != curr.participantCount,
  builder: (context, state) {
    return Text('Count: ${state.participantCount}');
  },
)

QuickRTCConsumer

Access the controller and state directly in your builder.

QuickRTCConsumer(
  builder: (context, controller, state, child) {
    return ControlButton(
      isActive: state.hasLocalVideo,
      onPressed: () => controller.toggleCameraPause(),
    );
  },
)

QuickRTCListener

Perform side-effects (like showing snackbars) based on state changes.

QuickRTCListener(
  listenWhen: (prev, curr) => prev.error != curr.error && curr.error != null,
  listener: (context, state) {
    showError(state.error!);
  },
  child: YourContent(),
)

8. Leave Meeting #

await controller.leaveMeeting();
controller.dispose();
socket.disconnect();

Files #

  • lib/quickrtc_snippets.dart - All code snippets in one file

Dependency Management #

This project uses modern dependency constraints. If you encounter issues with generated files:

  1. Run flutter pub get
  2. Run flutter pub run build_runner build --delete-conflicting-outputs

The library is verified to pass static analysis with zero warnings on all platforms.

Full Example #

For a complete working app, see quickrtc-example/flutter-client.

Learn More #