From c1445677f5138f0ea0cb0b971629e4bd6b0c6c49 Mon Sep 17 00:00:00 2001 From: CloudWebRTC Date: Thu, 18 Aug 2022 14:29:28 +0800 Subject: [PATCH] Fixed UI stuck when get thumbnails on screen sharing. (#149) * fix: get thumbnails stuck. * update. --- example/macos/Podfile.lock | 12 +- example/pubspec.lock | 2 +- lib/src/widgets/screen_select_dialog.dart | 235 +++++++++++----------- macos/livekit_client.podspec | 2 +- pubspec.lock | 2 +- pubspec.yaml | 2 +- 6 files changed, 122 insertions(+), 133 deletions(-) diff --git a/example/macos/Podfile.lock b/example/macos/Podfile.lock index da21406..8d40d26 100644 --- a/example/macos/Podfile.lock +++ b/example/macos/Podfile.lock @@ -3,16 +3,16 @@ PODS: - FlutterMacOS - flutter_webrtc (0.9.2): - FlutterMacOS - - WebRTC-SDK (= 104.5112.02) + - WebRTC-SDK (= 104.5112.03) - FlutterMacOS (1.0.0) - livekit_client (1.1.0): - FlutterMacOS - - WebRTC-SDK (~> 104.5112.02) + - WebRTC-SDK (~> 104.5112.03) - path_provider_macos (0.0.1): - FlutterMacOS - shared_preferences_macos (0.0.1): - FlutterMacOS - - WebRTC-SDK (104.5112.02) + - WebRTC-SDK (104.5112.03) DEPENDENCIES: - device_info_plus_macos (from `Flutter/ephemeral/.symlinks/plugins/device_info_plus_macos/macos`) @@ -42,12 +42,12 @@ EXTERNAL SOURCES: SPEC CHECKSUMS: device_info_plus_macos: 1ad388a1ef433505c4038e7dd9605aadd1e2e9c7 - flutter_webrtc: e4c5ac172da404d18f31d46ca8144ddd871551ea + flutter_webrtc: 335c834280a69d6db648228ab9bd0f855886f776 FlutterMacOS: 57701585bf7de1b3fc2bb61f6378d73bbdea8424 - livekit_client: d3f90a194a0102e5987dc80dcc3ccb5890c17a43 + livekit_client: 1076d27c06480d4abdda77641f6586309bc2dd3f path_provider_macos: 3c0c3b4b0d4a76d2bf989a913c2de869c5641a19 shared_preferences_macos: a64dc611287ed6cbe28fd1297898db1336975727 - WebRTC-SDK: e0589abeb63db07a4ca1f45c82ba0f1a72e61622 + WebRTC-SDK: 9f50fb5a410edc38e6fbb865fe940e3010bc8e7e PODFILE CHECKSUM: 6eac6b3292e5142cfc23bdeb71848a40ec51c14c diff --git a/example/pubspec.lock b/example/pubspec.lock index 45b6bf0..045523b 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -176,7 +176,7 @@ packages: name: flutter_webrtc url: "https://pub.dartlang.org" source: hosted - version: "0.9.2" + version: "0.9.3" google_fonts: dependency: "direct main" description: diff --git a/lib/src/widgets/screen_select_dialog.dart b/lib/src/widgets/screen_select_dialog.dart index c1d0ab1..2246c27 100644 --- a/lib/src/widgets/screen_select_dialog.dart +++ b/lib/src/widgets/screen_select_dialog.dart @@ -1,9 +1,84 @@ import 'dart:async'; +import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_webrtc/flutter_webrtc.dart' as rtc; -import '../logger.dart'; +class ThumbnailWidget extends StatefulWidget { + const ThumbnailWidget( + {Key? key, + required this.source, + required this.selected, + required this.onTap}) + : super(key: key); + final rtc.DesktopCapturerSource source; + final bool selected; + final Function(rtc.DesktopCapturerSource) onTap; + + @override + ThumbnailWidgetState createState() => ThumbnailWidgetState(); +} + +class ThumbnailWidgetState extends State { + final List _subscriptions = []; + + @override + void initState() { + super.initState(); + _subscriptions.add(widget.source.onThumbnailChanged.stream.listen((event) { + setState(() {}); + })); + _subscriptions.add(widget.source.onNameChanged.stream.listen((event) { + setState(() {}); + })); + } + + @override + void deactivate() { + for (var element in _subscriptions) { + element.cancel(); + } + super.deactivate(); + } + + @override + Widget build(BuildContext context) { + return Column( + children: [ + Expanded( + child: Container( + decoration: widget.selected + ? BoxDecoration( + border: Border.all(width: 2, color: Colors.blueAccent)) + : null, + child: InkWell( + onTap: () { + if (kDebugMode) { + print('Selected source id => ${widget.source.id}'); + } + widget.onTap(widget.source); + }, + child: widget.source.thumbnail != null + ? Image.memory( + widget.source.thumbnail!, + gaplessPlayback: true, + alignment: Alignment.center, + ) + : Container(), + ), + )), + Text( + widget.source.name, + style: TextStyle( + fontSize: 12, + color: Colors.black87, + fontWeight: + widget.selected ? FontWeight.bold : FontWeight.normal), + ), + ], + ); + } +} // ignore: must_be_immutable class ScreenSelectDialog extends Dialog { @@ -21,15 +96,8 @@ class ScreenSelectDialog extends Dialog { _stateSetter?.call(() {}); })); - _subscriptions - .add(rtc.desktopCapturer.onNameChanged.stream.listen((source) { - _sources[source.id] = source; - _stateSetter?.call(() {}); - })); - _subscriptions .add(rtc.desktopCapturer.onThumbnailChanged.stream.listen((source) { - _sources[source.id] = source; _stateSetter?.call(() {}); })); } @@ -42,16 +110,16 @@ class ScreenSelectDialog extends Dialog { void _ok(BuildContext context) { _timer?.cancel(); - for (var item in _subscriptions) { - item.cancel(); + for (var element in _subscriptions) { + element.cancel(); } Navigator.pop(context, _selectedSource); } void _cancel(BuildContext context) { _timer?.cancel(); - for (var item in _subscriptions) { - item.cancel(); + for (var element in _subscriptions) { + element.cancel(); } Navigator.pop(context, null); } @@ -59,21 +127,26 @@ class ScreenSelectDialog extends Dialog { Future _getSources() async { try { var sources = await rtc.desktopCapturer.getSources(types: [_sourceType]); - for (var item in sources) { - logger.info('name: ${item.name}, id: ${item.id}, type: ${item.type}'); - } - _stateSetter?.call(() { - for (var item in sources) { - _sources[item.id] = item; + for (var element in sources) { + if (kDebugMode) { + print( + 'name: ${element.name}, id: ${element.id}, type: ${element.type}'); } - }); + } _timer?.cancel(); - _timer = Timer.periodic(const Duration(seconds: 2), (timer) { + _timer = Timer.periodic(const Duration(seconds: 3), (timer) { rtc.desktopCapturer.updateSources(types: [_sourceType]); }); + _sources.clear(); + for (var element in sources) { + _sources[element.id] = element; + } + _stateSetter?.call(() {}); return; } catch (e) { - logger.warning(e.toString()); + if (kDebugMode) { + print(e.toString()); + } } } @@ -159,57 +232,15 @@ class ScreenSelectDialog extends Dialog { .where((element) => element.value.type == rtc.SourceType.Screen) - .map((e) => Column( - children: [ - Expanded( - child: Container( - decoration: (_selectedSource != - null && - _selectedSource!.id == - e.value.id) - ? BoxDecoration( - border: Border.all( - width: 2, - color: Colors - .blueAccent)) - : null, - child: InkWell( - onTap: () { - logger.info( - 'Selected screen id => ${e.value.id}'); - setState(() { - _selectedSource = - e.value; - }); - }, - child: e.value.thumbnail != - null - ? Image.memory( - e.value.thumbnail!, - scale: 1.0, - repeat: ImageRepeat - .noRepeat, - ) - : Container(), - ), - )), - Text( - e.value.name, - style: TextStyle( - fontSize: 12, - color: Colors.black87, - fontWeight: - (_selectedSource != - null && - _selectedSource! - .id == - e.value - .id) - ? FontWeight.bold - : FontWeight - .normal), - ), - ], + .map((e) => ThumbnailWidget( + onTap: (source) { + setState(() { + _selectedSource = source; + }); + }, + source: e.value, + selected: _selectedSource?.id == + e.value.id, )) .toList(), )), @@ -222,57 +253,15 @@ class ScreenSelectDialog extends Dialog { .where((element) => element.value.type == rtc.SourceType.Window) - .map((e) => Column( - children: [ - Expanded( - child: Container( - decoration: (_selectedSource != - null && - _selectedSource!.id == - e.value.id) - ? BoxDecoration( - border: Border.all( - width: 2, - color: Colors - .blueAccent)) - : null, - child: InkWell( - onTap: () { - logger.info( - 'Selected window id => ${e.value.id}'); - setState(() { - _selectedSource = - e.value; - }); - }, - child: e.value.thumbnail! - .isNotEmpty - ? Image.memory( - e.value.thumbnail!, - scale: 1.0, - repeat: ImageRepeat - .noRepeat, - ) - : Container(), - ), - )), - Text( - e.value.name, - style: TextStyle( - fontSize: 12, - color: Colors.black87, - fontWeight: - (_selectedSource != - null && - _selectedSource! - .id == - e.value - .id) - ? FontWeight.bold - : FontWeight - .normal), - ), - ], + .map((e) => ThumbnailWidget( + onTap: (source) { + setState(() { + _selectedSource = source; + }); + }, + source: e.value, + selected: _selectedSource?.id == + e.value.id, )) .toList(), )), diff --git a/macos/livekit_client.podspec b/macos/livekit_client.podspec index d9031ba..395f1c2 100644 --- a/macos/livekit_client.podspec +++ b/macos/livekit_client.podspec @@ -16,5 +16,5 @@ Pod::Spec.new do |s| s.static_framework = true s.dependency 'FlutterMacOS' - s.dependency 'WebRTC-SDK', '~> 104.5112.02' + s.dependency 'WebRTC-SDK', '~> 104.5112.03' end diff --git a/pubspec.lock b/pubspec.lock index dcfe274..adb1c83 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -218,7 +218,7 @@ packages: name: flutter_webrtc url: "https://pub.dartlang.org" source: hosted - version: "0.9.2" + version: "0.9.3" glob: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index 76efb59..90438f7 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -22,7 +22,7 @@ dependencies: uuid: ^3.0.6 synchronized: ^3.0.0 protobuf: ^2.0.1 - flutter_webrtc: ^0.9.2 + flutter_webrtc: ^0.9.3 dart_webrtc: ^1.0.7 device_info_plus: ^3.2.3