feat: web/native device consistency management (#243)
* fix: Force audio settings to be consistent. * chore: applyAudioSettings for onUnpublish. * revert audio output select for web. * add RoomHardwareManagementMethods to Room. * update. * fix analyze. * update. * update. * chore: Reset sinkId for web when remoteTrack replays. * rename setAudioOutput to setSinkId for flutter web. * chore: Make sure AudioElement has `setSinkId` method.
This commit is contained in:
CloudWebRTC
@@ -33,7 +33,6 @@ class _ControlsWidgetState extends State<ControlsWidget> {
|
||||
List<MediaDevice>? _audioInputs;
|
||||
List<MediaDevice>? _audioOutputs;
|
||||
List<MediaDevice>? _videoInputs;
|
||||
MediaDevice? _selectedVideoInput;
|
||||
|
||||
StreamSubscription? _subscription;
|
||||
|
||||
@@ -61,7 +60,6 @@ class _ControlsWidgetState extends State<ControlsWidget> {
|
||||
_audioInputs = devices.where((d) => d.kind == 'audioinput').toList();
|
||||
_audioOutputs = devices.where((d) => d.kind == 'audiooutput').toList();
|
||||
_videoInputs = devices.where((d) => d.kind == 'videoinput').toList();
|
||||
_selectedVideoInput = _videoInputs?.first;
|
||||
setState(() {});
|
||||
}
|
||||
|
||||
@@ -94,23 +92,18 @@ class _ControlsWidgetState extends State<ControlsWidget> {
|
||||
}
|
||||
|
||||
void _selectAudioOutput(MediaDevice device) async {
|
||||
await Hardware.instance.selectAudioOutput(device);
|
||||
await widget.room.setAudioOutputDevice(device);
|
||||
setState(() {});
|
||||
}
|
||||
|
||||
void _selectAudioInput(MediaDevice device) async {
|
||||
await Hardware.instance.selectAudioInput(device);
|
||||
await widget.room.setAudioInputDevice(device);
|
||||
setState(() {});
|
||||
}
|
||||
|
||||
void _selectVideoInput(MediaDevice device) async {
|
||||
final track = participant.videoTracks.firstOrNull?.track;
|
||||
if (track == null) return;
|
||||
if (_selectedVideoInput?.deviceId != device.deviceId) {
|
||||
await track.switchCamera(device.deviceId);
|
||||
_selectedVideoInput = device;
|
||||
setState(() {});
|
||||
}
|
||||
await widget.room.setVideoInputDevice(device);
|
||||
setState(() {});
|
||||
}
|
||||
|
||||
void _toggleCamera() async {
|
||||
@@ -293,8 +286,7 @@ class _ControlsWidgetState extends State<ControlsWidget> {
|
||||
value: device,
|
||||
child: ListTile(
|
||||
leading: (device.deviceId ==
|
||||
Hardware
|
||||
.instance.selectedAudioInput?.deviceId)
|
||||
widget.room.selectedAudioInputDeviceId)
|
||||
? const Icon(
|
||||
EvaIcons.checkmarkSquare,
|
||||
color: Colors.white,
|
||||
@@ -317,45 +309,43 @@ class _ControlsWidgetState extends State<ControlsWidget> {
|
||||
icon: const Icon(EvaIcons.micOff),
|
||||
tooltip: 'un-mute audio',
|
||||
),
|
||||
if (!lkPlatformIs(PlatformType.web))
|
||||
PopupMenuButton<MediaDevice>(
|
||||
icon: const Icon(Icons.volume_up),
|
||||
itemBuilder: (BuildContext context) {
|
||||
return [
|
||||
const PopupMenuItem<MediaDevice>(
|
||||
value: null,
|
||||
child: ListTile(
|
||||
leading: Icon(
|
||||
EvaIcons.speaker,
|
||||
color: Colors.white,
|
||||
),
|
||||
title: Text('Select Audio Output'),
|
||||
PopupMenuButton<MediaDevice>(
|
||||
icon: const Icon(Icons.volume_up),
|
||||
itemBuilder: (BuildContext context) {
|
||||
return [
|
||||
const PopupMenuItem<MediaDevice>(
|
||||
value: null,
|
||||
child: ListTile(
|
||||
leading: Icon(
|
||||
EvaIcons.speaker,
|
||||
color: Colors.white,
|
||||
),
|
||||
title: Text('Select Audio Output'),
|
||||
),
|
||||
if (_audioOutputs != null)
|
||||
..._audioOutputs!.map((device) {
|
||||
return PopupMenuItem<MediaDevice>(
|
||||
value: device,
|
||||
child: ListTile(
|
||||
leading: (device.deviceId ==
|
||||
Hardware
|
||||
.instance.selectedAudioOutput?.deviceId)
|
||||
? const Icon(
|
||||
EvaIcons.checkmarkSquare,
|
||||
color: Colors.white,
|
||||
)
|
||||
: const Icon(
|
||||
EvaIcons.square,
|
||||
color: Colors.white,
|
||||
),
|
||||
title: Text(device.label),
|
||||
),
|
||||
onTap: () => _selectAudioOutput(device),
|
||||
);
|
||||
}).toList()
|
||||
];
|
||||
},
|
||||
),
|
||||
),
|
||||
if (_audioOutputs != null)
|
||||
..._audioOutputs!.map((device) {
|
||||
return PopupMenuItem<MediaDevice>(
|
||||
value: device,
|
||||
child: ListTile(
|
||||
leading: (device.deviceId ==
|
||||
widget.room.selectedAudioOutputDeviceId)
|
||||
? const Icon(
|
||||
EvaIcons.checkmarkSquare,
|
||||
color: Colors.white,
|
||||
)
|
||||
: const Icon(
|
||||
EvaIcons.square,
|
||||
color: Colors.white,
|
||||
),
|
||||
title: Text(device.label),
|
||||
),
|
||||
onTap: () => _selectAudioOutput(device),
|
||||
);
|
||||
}).toList()
|
||||
];
|
||||
},
|
||||
),
|
||||
if (participant.isCameraEnabled())
|
||||
PopupMenuButton<MediaDevice>(
|
||||
icon: const Icon(EvaIcons.video),
|
||||
@@ -377,16 +367,16 @@ class _ControlsWidgetState extends State<ControlsWidget> {
|
||||
return PopupMenuItem<MediaDevice>(
|
||||
value: device,
|
||||
child: ListTile(
|
||||
leading:
|
||||
(device.deviceId == _selectedVideoInput?.deviceId)
|
||||
? const Icon(
|
||||
EvaIcons.checkmarkSquare,
|
||||
color: Colors.white,
|
||||
)
|
||||
: const Icon(
|
||||
EvaIcons.square,
|
||||
color: Colors.white,
|
||||
),
|
||||
leading: (device.deviceId ==
|
||||
widget.room.selectedVideoInputDeviceId)
|
||||
? const Icon(
|
||||
EvaIcons.checkmarkSquare,
|
||||
color: Colors.white,
|
||||
)
|
||||
: const Icon(
|
||||
EvaIcons.square,
|
||||
color: Colors.white,
|
||||
),
|
||||
title: Text(device.label),
|
||||
),
|
||||
onTap: () => _selectVideoInput(device),
|
||||
|
||||
@@ -82,20 +82,12 @@ abstract class _ParticipantWidgetState<T extends ParticipantWidget>
|
||||
VideoTrack? get activeVideoTrack;
|
||||
TrackPublication? get videoPublication;
|
||||
TrackPublication? get firstAudioPublication;
|
||||
List<MediaDevice>? _audioOutputs;
|
||||
MediaDevice? _selectedAudioDevice;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
widget.participant.addListener(_onParticipantChanged);
|
||||
_onParticipantChanged();
|
||||
Hardware.instance.audioOutputs().then((value) {
|
||||
setState(() {
|
||||
_audioOutputs = value;
|
||||
_selectedAudioDevice = _audioOutputs?.firstOrNull;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
@@ -116,14 +108,6 @@ abstract class _ParticipantWidgetState<T extends ParticipantWidget>
|
||||
// since the updated values are computed properties.
|
||||
void _onParticipantChanged() => setState(() {});
|
||||
|
||||
void _onSelectAudioOutput(MediaDevice device) {
|
||||
var audioTrack = firstAudioPublication?.track as RemoteAudioTrack;
|
||||
audioTrack.setAudioOutput(device.deviceId);
|
||||
setState(() {
|
||||
_selectedAudioDevice = device;
|
||||
});
|
||||
}
|
||||
|
||||
// Widgets to show above the info bar
|
||||
List<Widget> extraWidgets(bool isScreenShare) => [];
|
||||
|
||||
@@ -146,8 +130,10 @@ abstract class _ParticipantWidgetState<T extends ParticipantWidget>
|
||||
InkWell(
|
||||
onTap: () => setState(() => _visible = !_visible),
|
||||
child: activeVideoTrack != null && !activeVideoTrack!.muted
|
||||
? VideoTrackRenderer(activeVideoTrack!,
|
||||
fit: RTCVideoViewObjectFit.RTCVideoViewObjectFitContain)
|
||||
? VideoTrackRenderer(
|
||||
activeVideoTrack!,
|
||||
fit: RTCVideoViewObjectFit.RTCVideoViewObjectFitContain,
|
||||
)
|
||||
: const NoVideoWidget(),
|
||||
),
|
||||
|
||||
@@ -158,9 +144,7 @@ abstract class _ParticipantWidgetState<T extends ParticipantWidget>
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
...extraWidgets(
|
||||
widget.isScreenShare,
|
||||
),
|
||||
...extraWidgets(widget.isScreenShare),
|
||||
ParticipantInfoWidget(
|
||||
title: widget.participant.name.isNotEmpty
|
||||
? '${widget.participant.name} (${widget.participant.identity})'
|
||||
@@ -227,13 +211,6 @@ class _RemoteParticipantWidgetState
|
||||
pub: firstAudioPublication!,
|
||||
icon: EvaIcons.volumeUp,
|
||||
),
|
||||
if (lkPlatformIs(PlatformType.web))
|
||||
RemoteTrackAudioOutputSelectMenuWidget(
|
||||
audioOutputs: _audioOutputs ?? [],
|
||||
selected: _selectedAudioDevice,
|
||||
onSelected: _onSelectAudioOutput,
|
||||
icon: EvaIcons.speaker,
|
||||
),
|
||||
],
|
||||
),
|
||||
];
|
||||
@@ -276,40 +253,3 @@ class RemoteTrackPublicationMenuWidget extends StatelessWidget {
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class RemoteTrackAudioOutputSelectMenuWidget extends StatelessWidget {
|
||||
final IconData icon;
|
||||
final List<MediaDevice> audioOutputs;
|
||||
final MediaDevice? selected;
|
||||
final Function(MediaDevice) onSelected;
|
||||
const RemoteTrackAudioOutputSelectMenuWidget({
|
||||
required this.audioOutputs,
|
||||
required this.onSelected,
|
||||
required this.selected,
|
||||
required this.icon,
|
||||
Key? key,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Material(
|
||||
color: Colors.black.withOpacity(0.3),
|
||||
child: PopupMenuButton<Function>(
|
||||
tooltip: 'Select AudioOutput',
|
||||
icon: Icon(icon),
|
||||
onSelected: (value) => value(),
|
||||
itemBuilder: (BuildContext context) => <PopupMenuEntry<Function>>[
|
||||
...audioOutputs
|
||||
.map((e) => PopupMenuItem(
|
||||
child: ListTile(
|
||||
trailing: (e.deviceId == selected?.deviceId)
|
||||
? const Icon(Icons.check, color: Colors.white)
|
||||
: null,
|
||||
title: Text(e.label),
|
||||
),
|
||||
value: () => onSelected(e),
|
||||
))
|
||||
.toList(),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user