✨ Floating call widgets
This commit is contained in:
@ -1,22 +1,13 @@
|
||||
import 'dart:async';
|
||||
import 'dart:convert';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:livekit_client/livekit_client.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:solian/models/call.dart';
|
||||
import 'package:solian/providers/auth.dart';
|
||||
import 'package:solian/router.dart';
|
||||
import 'package:solian/utils/service_url.dart';
|
||||
import 'package:solian/providers/chat.dart';
|
||||
import 'package:solian/widgets/chat/call/controls.dart';
|
||||
import 'package:solian/widgets/chat/call/exts.dart';
|
||||
import 'package:solian/widgets/chat/call/participant.dart';
|
||||
import 'package:solian/widgets/chat/call/participant_menu.dart';
|
||||
import 'package:solian/widgets/exts.dart';
|
||||
import 'package:solian/widgets/indent_wrapper.dart';
|
||||
import 'package:permission_handler/permission_handler.dart';
|
||||
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
|
||||
import 'package:wakelock_plus/wakelock_plus.dart';
|
||||
import 'dart:math' as math;
|
||||
|
||||
class ChatCall extends StatefulWidget {
|
||||
@ -29,337 +20,39 @@ class ChatCall extends StatefulWidget {
|
||||
}
|
||||
|
||||
class _ChatCallState extends State<ChatCall> {
|
||||
String? _token;
|
||||
String? _endpoint;
|
||||
bool _isHandled = false;
|
||||
|
||||
bool _isMounted = false;
|
||||
late ChatProvider _chat;
|
||||
|
||||
StreamSubscription? _subscription;
|
||||
List<MediaDevice> _audioInputs = [];
|
||||
List<MediaDevice> _videoInputs = [];
|
||||
|
||||
bool _enableAudio = true;
|
||||
bool _enableVideo = false;
|
||||
LocalAudioTrack? _audioTrack;
|
||||
LocalVideoTrack? _videoTrack;
|
||||
MediaDevice? _videoDevice;
|
||||
MediaDevice? _audioDevice;
|
||||
|
||||
final VideoParameters _videoParameters = VideoParametersPresets.h720_169;
|
||||
|
||||
late Room _callRoom;
|
||||
late EventsListener<RoomEvent> _callListener;
|
||||
|
||||
List<ParticipantTrack> _participantTracks = [];
|
||||
ParticipantTrack? _focusParticipant;
|
||||
|
||||
Future<void> checkPermissions() async {
|
||||
if (lkPlatformIs(PlatformType.macOS) || lkPlatformIs(PlatformType.linux)) return;
|
||||
|
||||
await Permission.camera.request();
|
||||
await Permission.microphone.request();
|
||||
await Permission.bluetooth.request();
|
||||
await Permission.bluetoothConnect.request();
|
||||
}
|
||||
|
||||
Future<(String, String)> exchangeToken() async {
|
||||
await checkPermissions();
|
||||
|
||||
final auth = context.read<AuthProvider>();
|
||||
if (!await auth.isAuthorized()) {
|
||||
router.pop();
|
||||
throw Error();
|
||||
}
|
||||
|
||||
var uri = getRequestUri('messaging', '/api/channels/${widget.call.channel.alias}/calls/ongoing/token');
|
||||
|
||||
var res = await auth.client!.post(uri);
|
||||
if (res.statusCode == 200) {
|
||||
final result = jsonDecode(utf8.decode(res.bodyBytes));
|
||||
_token = result['token'];
|
||||
_endpoint = 'wss://${result['endpoint']}';
|
||||
joinRoom(_endpoint!, _token!);
|
||||
return (_token!, _endpoint!);
|
||||
} else {
|
||||
var message = utf8.decode(res.bodyBytes);
|
||||
context.showErrorDialog(message);
|
||||
throw Exception(message);
|
||||
}
|
||||
}
|
||||
|
||||
void joinRoom(String url, String token) async {
|
||||
if (_isMounted) {
|
||||
return;
|
||||
} else {
|
||||
_isMounted = true;
|
||||
}
|
||||
|
||||
ScaffoldMessenger.of(context).clearSnackBars();
|
||||
|
||||
final notify = ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text(AppLocalizations.of(context)!.connectingServer),
|
||||
duration: const Duration(minutes: 1),
|
||||
),
|
||||
);
|
||||
|
||||
try {
|
||||
await _callRoom.connect(
|
||||
url,
|
||||
token,
|
||||
roomOptions: RoomOptions(
|
||||
dynacast: true,
|
||||
adaptiveStream: true,
|
||||
defaultAudioPublishOptions: const AudioPublishOptions(
|
||||
name: 'call_voice',
|
||||
stream: 'call_stream',
|
||||
),
|
||||
defaultVideoPublishOptions: const VideoPublishOptions(
|
||||
name: 'call_video',
|
||||
stream: 'call_stream',
|
||||
simulcast: true,
|
||||
backupVideoCodec: BackupVideoCodec(enabled: true),
|
||||
),
|
||||
defaultScreenShareCaptureOptions: const ScreenShareCaptureOptions(
|
||||
useiOSBroadcastExtension: true,
|
||||
params: VideoParameters(
|
||||
dimensions: VideoDimensionsPresets.h1080_169,
|
||||
encoding: VideoEncoding(maxBitrate: 3 * 1000 * 1000, maxFramerate: 30),
|
||||
),
|
||||
),
|
||||
defaultCameraCaptureOptions: CameraCaptureOptions(maxFrameRate: 30, params: _videoParameters),
|
||||
),
|
||||
fastConnectOptions: FastConnectOptions(
|
||||
microphone: TrackOption(track: _audioTrack),
|
||||
camera: TrackOption(track: _videoTrack),
|
||||
),
|
||||
);
|
||||
|
||||
setupRoom();
|
||||
} catch (e) {
|
||||
context.showErrorDialog(e);
|
||||
} finally {
|
||||
notify.close();
|
||||
}
|
||||
}
|
||||
|
||||
void autoPublish() async {
|
||||
try {
|
||||
if (_enableVideo) await _callRoom.localParticipant?.setCameraEnabled(true);
|
||||
} catch (error) {
|
||||
await context.showErrorDialog(error);
|
||||
}
|
||||
try {
|
||||
if (_enableAudio) await _callRoom.localParticipant?.setMicrophoneEnabled(true);
|
||||
} catch (error) {
|
||||
await context.showErrorDialog(error);
|
||||
}
|
||||
}
|
||||
|
||||
void setupRoom() {
|
||||
_callRoom.addListener(onRoomDidUpdate);
|
||||
setupRoomListeners();
|
||||
sortParticipants();
|
||||
WidgetsBindingCompatible.instance?.addPostFrameCallback((_) => autoPublish());
|
||||
|
||||
if (lkPlatformIsMobile()) {
|
||||
Hardware.instance.setSpeakerphoneOn(true);
|
||||
}
|
||||
}
|
||||
|
||||
void setupRoomListeners() {
|
||||
_callListener
|
||||
..on<RoomDisconnectedEvent>((event) async {
|
||||
if (event.reason != null) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
|
||||
content: Text('Call disconnected... ${event.reason}'),
|
||||
));
|
||||
}
|
||||
if (router.canPop()) router.pop();
|
||||
})
|
||||
..on<ParticipantEvent>((event) => sortParticipants())
|
||||
..on<LocalTrackPublishedEvent>((_) => sortParticipants())
|
||||
..on<LocalTrackUnpublishedEvent>((_) => sortParticipants())
|
||||
..on<TrackSubscribedEvent>((_) => sortParticipants())
|
||||
..on<TrackUnsubscribedEvent>((_) => sortParticipants())
|
||||
..on<ParticipantNameUpdatedEvent>((event) {
|
||||
sortParticipants();
|
||||
})
|
||||
..on<AudioPlaybackStatusChanged>((event) async {
|
||||
if (!_callRoom.canPlaybackAudio) {
|
||||
bool? yesno = await context.showPlayAudioManuallyDialog();
|
||||
if (yesno == true) {
|
||||
await _callRoom.startAudio();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
void sortParticipants() {
|
||||
Map<String, ParticipantTrack> mediaTracks = {};
|
||||
for (var participant in _callRoom.remoteParticipants.values) {
|
||||
mediaTracks[participant.sid] = ParticipantTrack(
|
||||
participant: participant,
|
||||
videoTrack: null,
|
||||
isScreenShare: false,
|
||||
);
|
||||
|
||||
for (var t in participant.videoTrackPublications) {
|
||||
mediaTracks[participant.sid]?.videoTrack = t.track;
|
||||
mediaTracks[participant.sid]?.isScreenShare = t.isScreenShare;
|
||||
}
|
||||
}
|
||||
|
||||
final mediaTrackList = mediaTracks.values.toList();
|
||||
mediaTrackList.sort((a, b) {
|
||||
// Loudest people first
|
||||
if (a.participant.isSpeaking && b.participant.isSpeaking) {
|
||||
if (a.participant.audioLevel > b.participant.audioLevel) {
|
||||
return -1;
|
||||
} else {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Last spoke first
|
||||
final aSpokeAt = a.participant.lastSpokeAt?.millisecondsSinceEpoch ?? 0;
|
||||
final bSpokeAt = b.participant.lastSpokeAt?.millisecondsSinceEpoch ?? 0;
|
||||
|
||||
if (aSpokeAt != bSpokeAt) {
|
||||
return aSpokeAt > bSpokeAt ? -1 : 1;
|
||||
}
|
||||
|
||||
// Has video first
|
||||
if (a.participant.hasVideo != b.participant.hasVideo) {
|
||||
return a.participant.hasVideo ? -1 : 1;
|
||||
}
|
||||
|
||||
// First joined people first
|
||||
return a.participant.joinedAt.millisecondsSinceEpoch - b.participant.joinedAt.millisecondsSinceEpoch;
|
||||
});
|
||||
|
||||
ParticipantTrack localTrack = ParticipantTrack(
|
||||
participant: _callRoom.localParticipant!,
|
||||
videoTrack: null,
|
||||
isScreenShare: false,
|
||||
);
|
||||
if (_callRoom.localParticipant != null) {
|
||||
final localParticipantTracks = _callRoom.localParticipant?.videoTrackPublications;
|
||||
if (localParticipantTracks != null) {
|
||||
for (var t in localParticipantTracks) {
|
||||
localTrack.videoTrack = t.track;
|
||||
localTrack.isScreenShare = t.isScreenShare;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setState(() {
|
||||
_participantTracks = [localTrack, ...mediaTrackList];
|
||||
if (_focusParticipant == null) {
|
||||
_focusParticipant = _participantTracks.first;
|
||||
} else {
|
||||
final idx = _participantTracks.indexWhere((x) => _focusParticipant!.participant.sid == x.participant.sid);
|
||||
_focusParticipant = _participantTracks[idx];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
void onRoomDidUpdate() => sortParticipants();
|
||||
|
||||
void revertDevices(List<MediaDevice> devices) async {
|
||||
_audioInputs = devices.where((d) => d.kind == 'audioinput').toList();
|
||||
_videoInputs = devices.where((d) => d.kind == 'videoinput').toList();
|
||||
|
||||
if (_audioInputs.isNotEmpty) {
|
||||
if (_audioDevice == null && _enableAudio) {
|
||||
_audioDevice = _audioInputs.first;
|
||||
Future.delayed(const Duration(milliseconds: 100), () async {
|
||||
await changeLocalAudioTrack();
|
||||
setState(() {});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (_videoInputs.isNotEmpty) {
|
||||
if (_videoDevice == null && _enableVideo) {
|
||||
_videoDevice = _videoInputs.first;
|
||||
Future.delayed(const Duration(milliseconds: 100), () async {
|
||||
await changeLocalVideoTrack();
|
||||
setState(() {});
|
||||
});
|
||||
}
|
||||
}
|
||||
setState(() {});
|
||||
}
|
||||
|
||||
Future<void> setEnableVideo(value) async {
|
||||
_enableVideo = value;
|
||||
if (!_enableVideo) {
|
||||
await _videoTrack?.stop();
|
||||
_videoTrack = null;
|
||||
} else {
|
||||
await changeLocalVideoTrack();
|
||||
}
|
||||
setState(() {});
|
||||
}
|
||||
|
||||
Future<void> setEnableAudio(value) async {
|
||||
_enableAudio = value;
|
||||
if (!_enableAudio) {
|
||||
await _audioTrack?.stop();
|
||||
_audioTrack = null;
|
||||
} else {
|
||||
await changeLocalAudioTrack();
|
||||
}
|
||||
setState(() {});
|
||||
}
|
||||
|
||||
Future<void> changeLocalAudioTrack() async {
|
||||
if (_audioTrack != null) {
|
||||
await _audioTrack!.stop();
|
||||
_audioTrack = null;
|
||||
}
|
||||
|
||||
if (_audioDevice != null) {
|
||||
_audioTrack = await LocalAudioTrack.create(AudioCaptureOptions(
|
||||
deviceId: _audioDevice!.deviceId,
|
||||
));
|
||||
await _audioTrack!.start();
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> changeLocalVideoTrack() async {
|
||||
if (_videoTrack != null) {
|
||||
await _videoTrack!.stop();
|
||||
_videoTrack = null;
|
||||
}
|
||||
|
||||
if (_videoDevice != null) {
|
||||
_videoTrack = await LocalVideoTrack.createCameraTrack(CameraCaptureOptions(
|
||||
deviceId: _videoDevice!.deviceId,
|
||||
params: _videoParameters,
|
||||
));
|
||||
await _videoTrack!.start();
|
||||
}
|
||||
}
|
||||
ChatCallInstance get _call => _chat.call!;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_subscription = Hardware.instance.onDeviceChange.stream.listen(revertDevices);
|
||||
_callRoom = Room();
|
||||
_callListener = _callRoom.createListener();
|
||||
Hardware.instance.enumerateDevices().then(revertDevices);
|
||||
WakelockPlus.enable();
|
||||
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
_chat.setShown(true);
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return IndentWrapper(
|
||||
title: AppLocalizations.of(context)!.chatCall,
|
||||
hideDrawer: true,
|
||||
child: FutureBuilder(
|
||||
future: exchangeToken(),
|
||||
_chat = context.watch<ChatProvider>();
|
||||
if (!_isHandled) {
|
||||
_isHandled = true;
|
||||
if (_chat.handleCall(widget.call, widget.call.channel)) {
|
||||
_chat.call?.init();
|
||||
}
|
||||
}
|
||||
|
||||
Widget content;
|
||||
if (_chat.call == null) {
|
||||
content = const Center(
|
||||
child: CircularProgressIndicator(),
|
||||
);
|
||||
} else {
|
||||
content = FutureBuilder(
|
||||
future: _call.exchangeToken(context),
|
||||
builder: (context, snapshot) {
|
||||
if (!snapshot.hasData || snapshot.data == null) {
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
@ -372,15 +65,20 @@ class _ChatCallState extends State<ChatCall> {
|
||||
Expanded(
|
||||
child: Container(
|
||||
color: Theme.of(context).colorScheme.surfaceVariant,
|
||||
child: _focusParticipant != null
|
||||
child: _call.focusTrack != null
|
||||
? InteractiveParticipantWidget(
|
||||
participant: _focusParticipant!,
|
||||
isFixed: false,
|
||||
participant: _call.focusTrack!,
|
||||
onTap: () {},
|
||||
)
|
||||
: Container(),
|
||||
),
|
||||
),
|
||||
if (_callRoom.localParticipant != null) ControlsWidget(_callRoom, _callRoom.localParticipant!),
|
||||
if (_call.room.localParticipant != null)
|
||||
ControlsWidget(
|
||||
_call.room,
|
||||
_call.room.localParticipant!,
|
||||
),
|
||||
],
|
||||
),
|
||||
Positioned(
|
||||
@ -391,10 +89,10 @@ class _ChatCallState extends State<ChatCall> {
|
||||
height: 128,
|
||||
child: ListView.builder(
|
||||
scrollDirection: Axis.horizontal,
|
||||
itemCount: math.max(0, _participantTracks.length),
|
||||
itemCount: math.max(0, _call.participantTracks.length),
|
||||
itemBuilder: (BuildContext context, int index) {
|
||||
final track = _participantTracks[index];
|
||||
if (track.participant.sid == _focusParticipant?.participant.sid) {
|
||||
final track = _call.participantTracks[index];
|
||||
if (track.participant.sid == _call.focusTrack?.participant.sid) {
|
||||
return Container();
|
||||
}
|
||||
|
||||
@ -403,13 +101,14 @@ class _ChatCallState extends State<ChatCall> {
|
||||
child: ClipRRect(
|
||||
borderRadius: const BorderRadius.all(Radius.circular(8)),
|
||||
child: InteractiveParticipantWidget(
|
||||
isFixed: true,
|
||||
width: 120,
|
||||
height: 120,
|
||||
color: Theme.of(context).cardColor,
|
||||
participant: track,
|
||||
onTap: () {
|
||||
if (track.participant.sid != _focusParticipant?.participant.sid) {
|
||||
setState(() => _focusParticipant = track);
|
||||
if (track.participant.sid != _call.focusTrack?.participant.sid) {
|
||||
_call.changeFocusTrack(track);
|
||||
}
|
||||
},
|
||||
),
|
||||
@ -422,27 +121,21 @@ class _ChatCallState extends State<ChatCall> {
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return IndentWrapper(
|
||||
title: AppLocalizations.of(context)!.chatCall,
|
||||
hideDrawer: true,
|
||||
child: content,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void deactivate() {
|
||||
_subscription?.cancel();
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) => _chat.setShown(false));
|
||||
super.deactivate();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
WakelockPlus.disable();
|
||||
(() async {
|
||||
_callRoom.removeListener(onRoomDidUpdate);
|
||||
await _callListener.dispose();
|
||||
await _callRoom.disconnect();
|
||||
await _callRoom.dispose();
|
||||
})();
|
||||
super.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
class InteractiveParticipantWidget extends StatelessWidget {
|
||||
|
||||
Reference in New Issue
Block a user