repository·master·Indexed 23 days ago
https://github.com/flutter-webrtc/flutter-webrtc-demoA demonstration project for the flutter-webrtc plugin showcasing WebRTC capabilities in Flutter. It includes samples for P2P video calling (CallSample) and peer-to-peer data transfer (DataChannelSample), along with a Signaling class for managing session lifecycles, peer discovery, and media streams. The project also features a ScreenSelectDialog for selecting screens or windows to share on desktop platforms.
P2P Call Sample feature within the demo, you must host a signaling server using webrtc-flutter-server. Once the server is running, enter your server's address into the corresponding field within the example application.To change the image displayed during the app's launch on iOS, you can use one of two methods:
ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory with your own assets.open ios/Runner.xcworkspace.Runner/Assets.xcassets.open ios/Runner.xcworkspaceTo run the demo locally, clone the repository, navigate to the project directory, fetch the necessary Flutter packages, and execute the application.
git clone https://github.com/cloudwebrtc/flutter-webrtc-demo
cd flutter-webrtc-demo
flutter packages get
flutter runThe Signaling class manages WebRTC connections, signaling via WebSockets, and media streams. It handles the lifecycle of calls (inviting, accepting, rejecting, and ending) and manages multiple concurrent Session objects.
To use it, you typically instantiate Signaling with a host and context, call connect() to establish the WebSocket connection, and then use methods like invite() to start a call or accept() to respond to one.
When using the Signaling class in a data channel context, you must subscribe to several event handlers to manage the connection lifecycle:
onSignalingStateChange: Monitors the connection status to the signaling server (ConnectionClosed, ConnectionError, ConnectionOpen).onCallStateChange: Handles the WebRTC session lifecycle. Key states include:CallStateNew: A new session is created.CallStateInvite: An incoming invitation is received.CallStateRinging: The remote peer is ringing; requires an accept() or reject() action.CallStateConnected: The peer connection is established.CallStateBye: The call has ended.onPeersUpdate: Provides a list of available peers and the local user's ID.onDataChannel: Triggered when a data channel is opened by the remote peer.The Signaling class provides callbacks to monitor the status of the signaling connection and individual calls.
SignalingState (Connection level):
ConnectionOpenConnectionClosedConnectionErrorCallState (Session level):
CallStateNewCallStateRingingCallStateInviteCallStateConnectedCallStateByeThe application provides two primary sample modes via the RouteItem menu:
Before entering a sample, the application prompts the user to enter a server address via _showAddressDialog. The server address is persisted using SharedPreferences under the key 'server'. The default value is demo.cloudwebrtc.com.
The main.dart file serves as the entrypoint for the flutter-webrtc-demo application. It initializes the application state, loads the default WebRTC server address from SharedPreferences, and provides a navigation menu to different WebRTC samples.
To run the application, ensure you have the Flutter SDK installed and execute:
flutter runvoid main() => runApp(new MyApp());The CallSample widget provides a complete implementation of a peer-to-peer video calling interface. It requires a host parameter which specifies the signaling server address.
Key features included in this sample:
The DataChannelSample widget demonstrates how to establish a WebRTC connection specifically for sending and receiving data (text or binary) via an RTCDataChannel. It uses a Signaling instance to manage peer discovery, invitations, and call states.
Signaling(host, context)..connect().onDataChannelMessage to receive RTCDataChannelMessage objects. You can check data.isBinary to distinguish between text and binary payloads.onDataChannel callback provides the RTCDataChannel instance once the connection is established._dataChannel?.send() with either a text string or an RTCDataChannelMessage.fromBinary(Uint8List) for binary data.CallStateNew, CallStateInvite, CallStateRinging, CallStateConnected, and CallStateBye to control the UI and connection logic.// Example of handling incoming data channel messages
_signaling?.onDataChannelMessage = (_, dc, RTCDataChannelMessage data) {
setState(() {
if (data.isBinary) {
print('Got binary [' + data.binary.toString() + ']');
} else {
_text = data.text;
}
});
};
// Example of sending text and binary data
_dataChannel?.send(RTCDataChannelMessage(text));
_dataChannel?.send(RTCDataChannelMessage.fromBinary(Uint8List(bytes)));The ScreenSelectDialog is a pre-built Flutter Dialog used to allow users to select a specific screen or application window to share via WebRTC.
It provides a UI with two tabs:
When the user selects a source and clicks 'Share', the dialog returns the selected DesktopCapturerSource. If the user cancels, it returns null.
To use it, show the dialog using Flutter's showDialog method and await the result.
When you receive a call notification (via onCallStateChange with CallStateRinging), use these methods to respond:
accept(String sessionId, String media): Responds to the offer and establishes the connection using the specified media type.reject(String sessionId): Ends the session immediately.