feat: desktop screensharing (#865)

* feat: screen sharing for desktops

* feat: Add localizations

* docs: Add documentation and custom example

* feat: add melos command for gen-l10n

* fix: remove delay for _getSources

Author: renefloor

dogfooding/lib/app/app_content.dart

@@ -5,12 +5,14 @@ import 'package:firebase_core/firebase_core.dart';
 import 'package:firebase_messaging/firebase_messaging.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_dogfooding/app/custom_video_localizations.dart';
 import 'package:flutter_dogfooding/core/repos/token_service.dart';
 import 'package:flutter_dogfooding/router/routes.dart';
 import 'package:flutter_dogfooding/theme/app_palette.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:rxdart/rxdart.dart';
 import 'package:stream_video_flutter/stream_video_flutter.dart';
+import 'package:stream_video_flutter/stream_video_flutter_l10n.dart';
 
 import '../core/repos/app_preferences.dart';
 import '../di/injector.dart';
@@ -262,6 +264,11 @@ class _StreamDogFoodingAppContentState
       title: kAppName,
       routerConfig: _router,
       theme: _buildTheme(Brightness.dark),
+      supportedLocales: const [Locale('en'), Locale('nl')],
+      localizationsDelegates: [
+        CustomVideoLocalizationsNL.delegate,
+        ...StreamVideoFlutterLocalizations.localizationsDelegates,
+      ],
       builder: (context, child) {
         return child!;
       },

dogfooding/lib/app/custom_video_localizations.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/widgets.dart';
+import 'package:stream_video_flutter/stream_video_flutter_l10n.dart';
+
+class CustomVideoLocalizationsNL extends StreamVideoFlutterLocalizationsNl {
+  static LocalizationsDelegate<StreamVideoFlutterLocalizations> get delegate =>
+      CustomVideoLocalizationsDelegate('nl', CustomVideoLocalizationsNL());
+
+  @override
+  String get desktopScreenShareEntireScreen => 'Scherm';
+}

dogfooding/lib/screens/call_screen.dart

@@ -23,6 +23,8 @@ import '../app/user_auth_controller.dart';
 import '../di/injector.dart';
 import '../widgets/closed_captions_widget.dart';
 
+const _useCustomDesktopScreenShareOption = false;
+
 class CallScreen extends StatefulWidget {
   const CallScreen({
     super.key,
@@ -264,6 +266,10 @@ class _CallScreenState extends State<CallScreen> {
                         enabledScreenShareBackgroundColor:
                             AppColorPalette.primary,
                         disabledScreenShareIcon: Icons.screen_share,
+                        desktopScreenSelectorBuilder:
+                            _useCustomDesktopScreenShareOption
+                                ? _customDesktopScreenShareSelector
+                                : null,
                       ),
                       ToggleMicrophoneOption(
                         call: call,
@@ -330,3 +336,30 @@ class ChatBottomSheet extends StatelessWidget {
     );
   }
 }
+
+// This is an example of a bottom sheet that only allows the selection of a screen.
+// After tapping a screen the bottom sheet is directly closed and the screen is shared.
+Future<DesktopCapturerSource?> _customDesktopScreenShareSelector(
+    BuildContext context) {
+  final ScreenSelectorStateNotifier stateNotifier =
+      ScreenSelectorStateNotifier(sourceTypes: [SourceType.Screen]);
+
+  return showModalBottomSheet<DesktopCapturerSource?>(
+    context: context,
+    builder: (BuildContext context) {
+      return ValueListenableBuilder(
+        valueListenable: stateNotifier,
+        builder:
+            (BuildContext context, ScreenSelectorState value, Widget? child) =>
+                Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16.0),
+          child: ThumbnailGrid(
+            sources: value.sources.values.toList(),
+            selectedSource: value.selectedSource,
+            onSelectSource: (source) => Navigator.pop(context, source),
+          ),
+        ),
+      );
+    },
+  );
+}

melos.yaml

@@ -95,6 +95,10 @@ scripts:
     run: melos exec -c 1 --depends-on="build_runner" --flutter -- "flutter pub run build_runner build --delete-conflicting-outputs"
     description: Build all generated files for Flutter packages in this project.
 
+  gen-l10n: >
+    melos exec -c 1 --fail-fast --depends-on=flutter_localizations -- \
+     "flutter gen-l10n && dart format ."
+
   test:all:
     run: melos run test:dart --no-select && melos run test:flutter --no-select
     description: Run all Dart & Flutter tests in this project.

packages/stream_video/lib/src/webrtc/rtc_track/rtc_local_track.dart

@@ -369,6 +369,7 @@ extension RtcLocalScreenShareTrackExt on RtcLocalScreenShareTrack {
     }
 
     return mediaConstraints.useiOSBroadcastExtension ==
-        constraints.useiOSBroadcastExtension;
+            constraints.useiOSBroadcastExtension &&
+        mediaConstraints.deviceId == constraints.deviceId;
   }
 }

packages/stream_video/pubspec.yaml

@@ -23,7 +23,7 @@ dependencies:
     sdk: flutter
   http: ^1.1.0
   internet_connection_checker_plus: ^2.5.2
-  intl: ">=0.18.1 <=0.19.0"
+  intl: ">=0.18.1 <=0.21.0"
   jose: ^0.3.4
   meta: ^1.9.1
   package_info_plus: ^8.2.1

packages/stream_video_flutter/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme

@@ -48,6 +48,7 @@
       ignoresPersistentStateOnLaunch = "NO"
       debugDocumentVersioning = "YES"
       debugServiceExtension = "internal"
+      enableGPUValidationMode = "1"
       allowLocationSimulation = "YES">
       <BuildableProductRunnable
          runnableDebuggingMode = "0">

packages/stream_video_flutter/l10n.yaml

@@ -0,0 +1,6 @@
+synthetic-package: false
+arb-dir: lib/src/l10n/arb
+output-dir: lib/src/l10n/localizations
+template-arb-file: stream_video_flutter_en.arb
+output-localization-file: stream_video_flutter_localizations.dart
+output-class: StreamVideoFlutterLocalizations

packages/stream_video_flutter/lib/src/call_controls/controls/toggle_screen_sharing_option.dart

@@ -17,6 +17,7 @@ class ToggleScreenShareOption extends StatelessWidget {
     this.disabledScreenShareIconColor,
     this.enabledScreenShareBackgroundColor,
     this.disabledScreenShareBackgroundColor,
+    this.desktopScreenSelectorBuilder,
   });
 
   /// Represents a call.
@@ -48,9 +49,12 @@ class ToggleScreenShareOption extends StatelessWidget {
 
   final NotificationOptionsBuilder? screenSharingNotificationOptionsBuilder;
 
+  final DesktopScreenSelectorBuilder? desktopScreenSelectorBuilder;
+
   @override
   Widget build(BuildContext context) {
     final enabled = localParticipant.isScreenShareEnabled;
+    var screenShareConstraints = this.screenShareConstraints;
 
     return CallControlOption(
       icon: enabled
@@ -64,6 +68,19 @@ class ToggleScreenShareOption extends StatelessWidget {
       onPressed: () async {
         final toggledEnabled = !enabled;
 
+        if (CurrentPlatform.isDesktop && toggledEnabled) {
+          final source = await (desktopScreenSelectorBuilder?.call(context) ??
+              showDefaultScreenSelectionDialog(context));
+
+          if (source != null) {
+            screenShareConstraints =
+                (screenShareConstraints ?? const ScreenShareConstraints())
+                    .copyWith(deviceId: source.id);
+          } else {
+            return;
+          }
+        }
+
         if (CurrentPlatform.isAndroid) {
           if (toggledEnabled) {
             if (!await call.requestScreenSharePermission()) {

packages/stream_video_flutter/lib/src/l10n/arb/stream_video_flutter_en.arb

@@ -0,0 +1,22 @@
+{
+  "desktopScreenShareChooseDialogTitle": "Choose what to share",
+  "@desktopScreenShareChooseDialogTitle": {
+    "description": "Title for dialog to choose for a window or screen to share"
+  },
+  "desktopScreenShareChooseDialogShare": "Share",
+  "@desktopScreenShareChooseDialogShare": {
+    "description": "Share action to start sharing"
+  },
+  "desktopScreenShareChooseDialogCancel": "Cancel",
+  "@desktopScreenShareChooseDialogCancel": {
+    "description": "Cancel action to go back without sharing"
+  },
+  "desktopScreenShareEntireScreen": "Entire Screen",
+  "@desktopScreenShareEntireScreen": {
+    "description": "Tab to select a screen to share"
+  },
+  "desktopScreenShareWindow": "Window",
+  "@desktopScreenShareWindow": {
+    "description": "Tab to select a single window to share"
+  }
+}