How to Implement a Video Conferencing Tool Using WebRTC in FlutterFlow

1// Custom Widget: VideoCallWidget
2// Pubspec: flutter_webrtc: ^0.9.47
3import 'package:flutter/material.dart';
4import 'package:flutter_webrtc/flutter_webrtc.dart';
5import 'package:cloud_firestore/cloud_firestore.dart';
6
7class VideoCallWidget extends StatefulWidget {
8  final double width, height;
9  final String callId;
10  final bool isCaller;
11  const VideoCallWidget({Key? key, required this.width, required this.height,
12    required this.callId, required this.isCaller}) : super(key: key);
13  @override
14  State<VideoCallWidget> createState() => _VCState();
15}
16
17class _VCState extends State<VideoCallWidget> {
18  RTCPeerConnection? _pc;
19  MediaStream? _localStream;
20  final _localR = RTCVideoRenderer();
21  final _remoteR = RTCVideoRenderer();
22  bool _muted = false, _camOff = false;
23
24  @override
25  void initState() { super.initState(); _init(); }
26
27  Future<void> _init() async {
28    await _localR.initialize();
29    await _remoteR.initialize();
30    _pc = await createPeerConnection({
31      'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}],
32    });
33    _localStream = await navigator.mediaDevices.getUserMedia({'audio': true, 'video': true});
34    _localR.srcObject = _localStream;
35    _localStream!.getTracks().forEach((t) => _pc!.addTrack(t, _localStream!));
36    _pc!.onTrack = (e) { if (e.streams.isNotEmpty) { _remoteR.srcObject = e.streams[0]; setState(() {}); } };
37    final ref = FirebaseFirestore.instance.collection('calls').doc(widget.callId);
38    _pc!.onIceCandidate = (c) => ref.collection(widget.isCaller ? 'callerCandidates' : 'calleeCandidates').add(c.toMap());
39    if (widget.isCaller) {
40      final offer = await _pc!.createOffer();
41      await _pc!.setLocalDescription(offer);
42      await ref.set({'offer': offer.toMap(), 'status': 'ringing'});
43      ref.snapshots().listen((s) async {
44        if (s.data()?['answer'] != null && _pc != null)
45          await _pc!.setRemoteDescription(RTCSessionDescription(
46            s.data()!['answer']['sdp'], s.data()!['answer']['type']));
47      });
48      _listenICE(ref, 'calleeCandidates');
49    } else {
50      final s = await ref.get();
51      await _pc!.setRemoteDescription(
52        RTCSessionDescription(s['offer']['sdp'], s['offer']['type']));
53      final answer = await _pc!.createAnswer();
54      await _pc!.setLocalDescription(answer);
55      await ref.update({'answer': answer.toMap(), 'status': 'active'});
56      _listenICE(ref, 'callerCandidates');
57    }
58    setState(() {});
59  }
60
61  void _listenICE(DocumentReference r, String sub) {
62    r.collection(sub).snapshots().listen((s) { for (final c in s.docChanges) {
63      final d = c.doc.data()!;
64      _pc?.addCandidate(RTCIceCandidate(d['candidate'], d['sdpMid'], d['sdpMLineIndex']));
65    }});
66  }
67
68  @override
69  void dispose() { _localStream?.dispose(); _pc?.close();
70    _localR.dispose(); _remoteR.dispose(); super.dispose(); }
71
72  @override
73  Widget build(BuildContext context) {
74    return SizedBox(width: widget.width, height: widget.height,
75      child: Stack(children: [
76        RTCVideoView(_remoteR, objectFit: RTCVideoViewObjectFit.RTCVideoViewObjectFitCover),
77        Positioned(top: 16, right: 16, child: ClipRRect(
78          borderRadius: BorderRadius.circular(12),
79          child: SizedBox(width: 120, height: 160,
80            child: RTCVideoView(_localR, mirror: true)))),
81        Positioned(bottom: 32, left: 0, right: 0, child: Row(
82          mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
83            IconButton(icon: Icon(_muted ? Icons.mic_off : Icons.mic),
84              onPressed: () { setState(() => _muted = !_muted);
85                _localStream?.getAudioTracks().first.enabled = !_muted; }),
86            IconButton(icon: Icon(_camOff ? Icons.videocam_off : Icons.videocam),
87              onPressed: () { setState(() => _camOff = !_camOff);
88                _localStream?.getVideoTracks().first.enabled = !_camOff; }),
89            FloatingActionButton(backgroundColor: Colors.red,
90              child: const Icon(Icons.call_end), onPressed: () async {
91                _localStream?.getTracks().forEach((t) => t.stop());
92                await _pc?.close();
93                await FirebaseFirestore.instance.collection('calls')
94                    .doc(widget.callId).update({'status': 'ended'});
95              }),
96          ])),
97      ]));
98  }
99}