@daily-co/react-native-daily-js 0.45.0 → 0.47.0

package/README.md

@@ -6,7 +6,7 @@ The Daily JavaScript library for React Native.
 
 This package introduces some constraints on what OS/SDK versions your project can support:
 
-- **iOS**: Deployment target >= 11.0
+- **iOS**: Deployment target >= 12.0
 - **Android**: `minSdkVersion` >= 24
 
 ## Installation
@@ -24,12 +24,14 @@ Then, follow the below steps to set up your native project on each platform. **N
 
 ### iOS
 
-Update the `platform` in your `Podfile`, since `@daily-co/react-native-webrtc` only works on iOS 11 and above:
+Update the `platform` in your `Podfile`, since `@daily-co/react-native-webrtc` only works on iOS 12 and above:
 
 ```ruby
-platform :ios, '11.0'
+platform :ios, '12.0'
 ```
 
+> If you wish to **send screen share** from iOS, it only works on **iOS 14** and above. Therefore, in this case, please switch to using iOS 14.0 instead of iOS 12.0.
+
 Then run:
 
 ```bash
@@ -72,6 +74,11 @@ If you view the raw file contents of `Info.plist`, it should look like this:
 </dict>
 ```
 
+#### Screen sharing on iOS
+
+To use the screen sharing functionality on iOS, you'll need to do a few manual steps to set up Daily's [React Native Screen Share Extension framework](https://github.com/daily-co/rn-screen-share-extension/) (already included in `react-native-daily-js`). 
+Please refer to its README for a detailed walkthrough.
+
 ### Android
 
 Add the following to `AndroidManifest.xml`:
@@ -90,10 +97,12 @@ Add the following to `AndroidManifest.xml`:
 
 <application>
   // ...
-  <service android:name="com.daily.reactlibrary.DailyOngoingMeetingForegroundService"/>
+  <service android:name="com.daily.reactlibrary.DailyOngoingMeetingForegroundService" android:foregroundServiceType="mediaProjection"/>
 </application>
 ```
 
+> Note: above, `foregroundServiceType` is only needed if you wish to do screen sharing.
+
 Update your `minSdkVersion` in your top-level `build.gradle` file:
 
 ```groovy

package/dist/index.js

@@ -39,10 +39,13 @@ var react_native_background_timer_1 = __importDefault(require("react-native-back
 var react_native_1 = require("react-native");
 var DailyNativeUtils = react_native_1.NativeModules.DailyNativeUtils, WebRTCModule = react_native_1.NativeModules.WebRTCModule;
 var webRTCEventEmitter = new react_native_1.NativeEventEmitter(WebRTCModule);
+var dailyNativeUtilsEventEmitter = new react_native_1.NativeEventEmitter(DailyNativeUtils);
 var hasAudioFocus;
 var appState;
 var audioFocusChangeListeners = new Set();
 var appActiveStateChangeListeners = new Set();
+var systemScreenCaptureStopListeners = new Set();
+var systemScreenCaptureStartCallback;
 function setupEventListeners() {
     // audio focus: used by daily-js to auto-mute mic, for instance
     if (react_native_1.Platform.OS === 'android') {
@@ -71,6 +74,22 @@ function setupEventListeners() {
             appActiveStateChangeListeners.forEach(function (listener) { return listener(isActive); });
         }
     });
+    if (react_native_1.Platform.OS === 'ios') {
+        // screen capture stop: used to synchronize JS screen sharing state with iOS
+        // system screen capture state, which can be controlled outside the app via
+        // the control center or by tapping the notification in the corner.
+        dailyNativeUtilsEventEmitter.addListener('EventSystemScreenCaptureStop', function () {
+            systemScreenCaptureStopListeners.forEach(function (listener) { return listener(); });
+        });
+        // when we invoke to start the screen share, we first invoke to start the screen capture
+        // and add the listener, so we are only going to start the screen share if the capture has started
+        // that is why we just need a single callback
+        dailyNativeUtilsEventEmitter.addListener('EventSystemScreenCaptureStart', function () {
+            if (systemScreenCaptureStartCallback) {
+                systemScreenCaptureStartCallback();
+            }
+        });
+    }
 }
 function setupGlobals() {
     // WebRTC APIs + global `window` object
@@ -96,7 +115,7 @@ function setupGlobals() {
             return react_native_background_timer_1.default.setTimeout(fn, ms);
         };
     }
-    global.DailyNativeUtils = __assign(__assign({}, DailyNativeUtils), { setAudioMode: WebRTCModule.setDailyAudioMode, setAudioDevice: WebRTCModule.setAudioDevice, getAudioDevice: WebRTCModule.getAudioDevice, enableNoOpRecordingEnsuringBackgroundContinuity: WebRTCModule.enableNoOpRecordingEnsuringBackgroundContinuity, addAudioFocusChangeListener: function (listener) {
+    global.DailyNativeUtils = __assign(__assign({}, DailyNativeUtils), { isIOS: react_native_1.Platform.OS === 'ios', isAndroid: react_native_1.Platform.OS === 'android', setAudioMode: WebRTCModule.setDailyAudioMode, setAudioDevice: WebRTCModule.setAudioDevice, getAudioDevice: WebRTCModule.getAudioDevice, enableNoOpRecordingEnsuringBackgroundContinuity: WebRTCModule.enableNoOpRecordingEnsuringBackgroundContinuity, addAudioFocusChangeListener: function (listener) {
             audioFocusChangeListeners.add(listener);
         }, removeAudioFocusChangeListener: function (listener) {
             audioFocusChangeListeners.delete(listener);
@@ -104,6 +123,12 @@ function setupGlobals() {
             appActiveStateChangeListeners.add(listener);
         }, removeAppActiveStateChangeListener: function (listener) {
             appActiveStateChangeListeners.delete(listener);
+        }, addSystemScreenCaptureStopListener: function (listener) {
+            systemScreenCaptureStopListeners.add(listener);
+        }, removeSystemScreenCaptureStopListener: function (listener) {
+            systemScreenCaptureStopListeners.delete(listener);
+        }, setSystemScreenCaptureStartCallback: function (listener) {
+            systemScreenCaptureStartCallback = listener;
         }, platform: react_native_1.Platform });
 }
 setupEventListeners();

package/ios/DailyNativeUtils.h

@@ -1,5 +1,5 @@
-#import <React/RCTBridgeModule.h>
+#import <React/RCTEventEmitter.h>
 
-@interface DailyNativeUtils : NSObject <RCTBridgeModule>
+@interface DailyNativeUtils : RCTEventEmitter
 
 @end

package/ios/DailyNativeUtils.m

@@ -1,6 +1,16 @@
 #import "DailyNativeUtils.h"
 #import <AVFoundation/AVFoundation.h>
 #import <sys/utsname.h>
+#import <ReplayKit/RPBroadcast.h>
+#import <React/RCTUtils.h>
+#import <React/RCTLog.h>
+
+// Notification from extension
+static NSString *const NotificationScreenCaptureStoppedBySystemUIOrError = @"ScreenCaptureStoppedBySystemUIOrError";
+static NSString *const NotificationScreenCaptureExtensionStarted = @"ScreenCaptureExtensionStarted";
+// Event to JS layer
+static NSString *const EventSystemScreenCaptureStop = @"EventSystemScreenCaptureStop";
+static NSString *const EventSystemScreenCaptureStart = @"EventSystemScreenCaptureStart";
 
 @interface DailyNativeUtils()
 
@@ -17,6 +27,32 @@ RCT_EXPORT_MODULE()
 {
   if (self = [super init]) {
     _requestersKeepingDeviceAwake = [NSMutableSet set];
+
+    // The “Darwin” notification center distributes notifications across the whole system!
+    // This means you can send and receive notifications between different apps, and/or an app and its extensions.
+    // Register for screen capture stopped notification.
+    CFNotificationCenterRef notificationCenter = CFNotificationCenterGetDarwinNotifyCenter();
+    CFNotificationCenterAddObserver(notificationCenter,
+                                    (__bridge const void *)(self),
+                                    handleDarwinNotification,
+                                    (__bridge CFStringRef)(NotificationScreenCaptureStoppedBySystemUIOrError),
+                                    NULL,
+                                    CFNotificationSuspensionBehaviorDeliverImmediately);
+    [[NSNotificationCenter defaultCenter] addObserver:self
+                                             selector:@selector(handleNotificationScreenCaptureStoppedBySystemUIOrError)
+                                                 name:NotificationScreenCaptureStoppedBySystemUIOrError
+                                               object:nil];
+    // Adding observer so we can be aware when the screen capture has started
+      CFNotificationCenterAddObserver(notificationCenter,
+                                  (__bridge const void *)(self),
+                                  handleDarwinNotification,
+                                  (__bridge CFStringRef)(NotificationScreenCaptureExtensionStarted),
+                                  NULL,
+                                  CFNotificationSuspensionBehaviorDeliverImmediately);
+    [[NSNotificationCenter defaultCenter] addObserver:self
+                                           selector:@selector(handleNotificationScreenCaptureExtensionStarted)
+                                               name:NotificationScreenCaptureExtensionStarted
+                                             object:nil];
   }
   return self;
 }
@@ -26,6 +62,12 @@ RCT_EXPORT_MODULE()
   return NO;
 }
 
+
+- (NSArray<NSString *> *)supportedEvents
+{
+  return @[EventSystemScreenCaptureStop, EventSystemScreenCaptureStart];
+}
+
 #pragma mark Public
 
 RCT_EXPORT_METHOD(setKeepDeviceAwake:(BOOL)keepDeviceAwake onBehalfOfRequester:(nonnull NSString *)requesterId)
@@ -50,6 +92,66 @@ RCT_REMAP_METHOD(getDeviceCode,
                              encoding:NSUTF8StringEncoding]);
 }
 
+//We are implementing here basically the same approach that react-native-webrtc did:
+//https://github.com/daily-co/react-native-webrtc/blob/main/ios/RCTWebRTC/ScreenCapturePickerViewManager.m
+//The difference is, with this approach, we don't need the user to create a screen and add in the app somewhere
+//we are only invoking this method and creating the screen whe the user invokes to startScreenShare.
+RCT_EXPORT_METHOD(presentSystemScreenCapturePrompt)
+{
+  dispatch_async(dispatch_get_main_queue(), ^{
+    NSDictionary *infoDictionary = [[NSBundle mainBundle] infoDictionary];
+    NSString *screenCaptureExtensionBundleIdentifier = infoDictionary[@"DailyScreenCaptureExtensionBundleIdentifier"];
+
+    // Simulate a click on a RPSystemBroadcastPickerView. This is ugly, but it's
+    // the only way to programmatically trigger the system screen capture
+    // prompt (RPBroadcastActivityViewController doesn't do what I expected it
+    // to: https://stackoverflow.com/questions/65658319/replaykit-broadcast-upload-extension-service-not-found)
+
+    RPSystemBroadcastPickerView *screenCaptureButton = [[RPSystemBroadcastPickerView alloc] init];
+    screenCaptureButton.preferredExtension = screenCaptureExtensionBundleIdentifier;
+    screenCaptureButton.showsMicrophoneButton = false;
+    screenCaptureButton.userInteractionEnabled = false;
+
+    // Code taken from ScreenCapturePickerViewManager
+    // Simulate a click
+    UIButton *btn = nil;
+
+    for (UIView *subview in ((RPSystemBroadcastPickerView *)screenCaptureButton).subviews) {
+      if ([subview isKindOfClass:[UIButton class]]) {
+        btn = (UIButton *)subview;
+      }
+    }
+    if (btn != nil) {
+      [btn sendActionsForControlEvents:UIControlEventTouchUpInside];
+    }
+    else {
+      RCTLogError(@"RPSystemBroadcastPickerView button not found");
+    }
+  });
+}
+
+RCT_EXPORT_METHOD(requestStopSystemScreenCapture)
+{
+  dispatch_async(dispatch_get_main_queue(), ^{
+      // The “Darwin” notification center distributes notifications across the whole system!
+      // This means you can send and receive notifications between different apps, and/or an app and its extensions.
+      // Register for screen capture stopped notification.
+      CFNotificationCenterRef notification = CFNotificationCenterGetDarwinNotifyCenter ();
+      CFNotificationCenterPostNotification(notification, (__bridge CFStringRef)(@"MustStopScreenCapture"), NULL, NULL, YES);
+  });
+}
+
+RCT_REMAP_METHOD(isScreenBeingCaptured,
+                 withResolver:(RCTPromiseResolveBlock)resolve
+                 withRejecter:(RCTPromiseRejectBlock)reject)
+{
+  if (@available(iOS 11.0, *)) {
+    resolve(@(UIScreen.mainScreen.isCaptured));
+  } else {
+    resolve(false);
+  }
+}
+
 #pragma mark Private
 
 + (void)dispatchSyncOnMain:(void (^)(void))block
@@ -68,4 +170,29 @@ RCT_REMAP_METHOD(getDeviceCode,
   [[UIApplication sharedApplication] setIdleTimerDisabled:disableIdleTimer];
 }
 
+// Translate Darwin notification to NSNotification so it can be used in
+// Objective-C class. Based on approach taken by MMWormhole and others.
+void handleDarwinNotification(CFNotificationCenterRef center,
+                              void * observer,
+                              CFStringRef name,
+                              void const * object,
+                              CFDictionaryRef userInfo) {
+  NSString *identifier = (__bridge NSString *)name;
+  [[NSNotificationCenter defaultCenter] postNotificationName:identifier
+                                                      object:nil
+                                                    userInfo:nil];
+}
+
+// Technically this notification tells us that the screen capture stopped
+// *either* via the system UI or due to an error, but here let's collapse these
+// cases into one event, so that the JS client can "sync" to the fact that the
+// screen capture occurred outside of its control.
+- (void)handleNotificationScreenCaptureStoppedBySystemUIOrError {
+  [self sendEventWithName:EventSystemScreenCaptureStop body:nil];
+}
+
+- (void)handleNotificationScreenCaptureExtensionStarted {
+  [self sendEventWithName:EventSystemScreenCaptureStart body:nil];
+}
+
 @end

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@daily-co/react-native-daily-js",
-  "version": "0.45.0",
+  "version": "0.47.0",
   "description": "React Native library for making video calls using Daily",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -26,7 +26,7 @@
     "baseUrl": "https://github.com/daily-co/react-native-daily-js"
   },
   "dependencies": {
-    "@daily-co/daily-js": "^0.47.0",
+    "@daily-co/daily-js": "^0.49.1",
     "@types/react-native-background-timer": "^2.0.0",
     "react-native-url-polyfill": "^1.1.2"
   },

package/react-native-daily-js.podspec

@@ -15,13 +15,14 @@ Pod::Spec.new do |s|
   # optional - use expanded license entry instead:
   # s.license    = { :type => "MIT", :file => "LICENSE" }
   s.authors      = { "Paul Kompfner" => "paul@daily.co" }
-  s.platforms    = { :ios => "9.0" }
+  s.platforms    = { :ios => "12.0" }
   s.source       = { :git => "https://github.com/daily-co/react-native-daily-js.git", :tag => "#{s.version}" }
 
   s.source_files = "ios/**/*.{h,c,m,swift}"
   s.requires_arc = true
 
   s.dependency "React-Core"
+  s.dependency "ReactNativeDailyJSScreenShareExtension", "0.0.1"
   # ...
   # s.dependency "..."
 end

package/type-overrides/@daily-co/daily-js/index.d.ts

@@ -10,6 +10,7 @@ import {
   MediaStreamTrack,
   MediaDeviceInfo,
   MediaTrackConstraints,
+  MediaStream,
 } from '@daily-co/react-native-webrtc';
 
 import RTCRtpEncodingParameters from '@daily-co/react-native-webrtc/lib/typescript/RTCRtpEncodingParameters';
@@ -61,6 +62,8 @@ export type DailyEvent =
   | 'transcription-stopped'
   | 'transcription-error'
   | 'app-message'
+  | 'local-screen-share-started'
+  | 'local-screen-share-stopped'
   | 'active-speaker-change'
   | 'network-quality-change'
   | 'network-connection'
@@ -114,6 +117,7 @@ export type DailyFatalErrorType =
   | 'connection-error';
 
 export type DailyNonFatalErrorType =
+  | 'screen-share-error'
   | 'remote-media-player-error'
   | 'live-streaming-warning'
   | 'meeting-session-data-error';
@@ -164,6 +168,22 @@ export interface CamSimulcastEncoding {
   scaleResolutionDownBy?: number;
 }
 
+/* These types are not defined inside react-native-webrtc, so we need to define them here in order to use */
+type RTCIceTransportPolicy = 'all' | 'relay';
+type RTCIceCredentialType = 'password';
+interface RTCIceServer {
+  credential?: string;
+  credentialType?: RTCIceCredentialType;
+  urls: string | string[];
+  username?: string;
+}
+
+export interface DailyIceConfig {
+  iceServers?: RTCIceServer[];
+  placement?: 'front' | 'back' | 'replace';
+  iceTransportPolicy?: RTCIceTransportPolicy;
+}
+
 export interface DailyAdvancedConfig {
   camSimulcastEncodings?: CamSimulcastEncoding[];
   v2CamAndMic?: boolean;
@@ -173,6 +193,8 @@ export interface DailyAdvancedConfig {
   userMediaVideoConstraints?: MediaTrackConstraints;
   preferH264ForCam?: boolean;
   h264Profile?: string;
+  proxyUrl?: string;
+  iceConfig?: DailyIceConfig;
 }
 
 export interface DailyReactNativeConfig {
@@ -217,22 +239,35 @@ export interface DailyTrackState {
   persistentTrack?: MediaStreamTrack;
 }
 
+export type DailyParticipantPermissionsCanSendValues =
+  | 'video'
+  | 'audio'
+  | 'screenVideo'
+  | 'screenAudio'
+  | 'customVideo'
+  | 'customAudio';
+
+export type DailyParticipantPermissionsCanAdminValues =
+  | 'participants'
+  | 'streaming'
+  | 'transcription';
+
 export interface DailyParticipantPermissions {
   hasPresence: boolean;
-  canSend:
-    | Set<
-        | 'video'
-        | 'audio'
-        | 'screenVideo'
-        | 'screenAudio'
-        | 'customVideo'
-        | 'customAudio'
-      >
-    | boolean;
+  canSend: Set<DailyParticipantPermissionsCanSendValues> | boolean;
+  canAdmin: Set<DailyParticipantPermissionsCanAdminValues> | boolean;
 }
 
 export type DailyParticipantPermissionsUpdate = {
-  [Property in keyof DailyParticipantPermissions]+?: DailyParticipantPermissions[Property];
+  hasPresence?: boolean;
+  canSend?:
+    | Array<DailyParticipantPermissionsCanSendValues>
+    | Set<DailyParticipantPermissionsCanSendValues>
+    | boolean;
+  canAdmin?:
+    | Array<DailyParticipantPermissionsCanAdminValues>
+    | Set<DailyParticipantPermissionsCanAdminValues>
+    | boolean;
 };
 
 export interface DailyParticipant {
@@ -287,7 +322,13 @@ export interface DailyParticipant {
   record: boolean;
 
   // video element info (iframe-based calls using standard UI only)
+  /**
+   * @deprecated This property will be removed. Refer to tracks.video instead.
+   */
   cam_info: {} | DailyVideoElementInfo;
+  /**
+   * @deprecated This property will be removed. Refer to tracks.screenVideo instead.
+   */
   screen_info: {} | DailyVideoElementInfo;
 }
 
@@ -330,6 +371,12 @@ export interface DailyWaitingParticipantUpdateOptions {
   grantRequestedAccess?: boolean;
 }
 
+/**
+ * @deprecated
+ * All properties will be removed as cam_info and screen_info are also deprecated.
+ * Use the participants() object's tracks property to retrieve track information instead.
+ * e.g. call.participants()['participant-id'].tracks.video.persistentTrack.getSettings()
+ */
 export interface DailyVideoElementInfo {
   width: number;
   height: number;
@@ -345,22 +392,35 @@ export interface DailyDeviceInfos {
   speaker: {} | MediaDeviceInfo;
 }
 
+export interface DailyStartScreenShare {
+  //RN does not support any displayMediaOptions, that is why we have not added the definition here
+  screenVideoSendSettings?:
+    | DailyVideoSendSettings
+    | DailyScreenVideoSendSettingsPreset;
+}
+
 export interface DailyNetworkStats {
   quality: number;
   stats: {
     latest: {
-      recvBitsPerSecond: number;
-      sendBitsPerSecond: number;
       timestamp: number;
-      videoRecvBitsPerSecond: number;
-      videoRecvPacketLoss: number;
-      videoSendBitsPerSecond: number;
-      videoSendPacketLoss: number;
-      totalSendPacketLoss: number;
-      totalRecvPacketLoss: number;
+      recvBitsPerSecond: number | null;
+      sendBitsPerSecond: number | null;
+      videoRecvBitsPerSecond: number | null;
+      videoRecvPacketLoss: number | null;
+      videoSendBitsPerSecond: number | null;
+      videoSendPacketLoss: number | null;
+      audioRecvBitsPerSecond: number | null;
+      audioRecvPacketLoss: number | null;
+      audioSendBitsPerSecond: number | null;
+      audioSendPacketLoss: number | null;
+      totalSendPacketLoss: number | null;
+      totalRecvPacketLoss: number | null;
     };
     worstVideoRecvPacketLoss: number;
     worstVideoSendPacketLoss: number;
+    worstAudioRecvPacketLoss: number;
+    worstAudioSendPacketLoss: number;
   };
   threshold: 'good' | 'low' | 'very-low';
 }
@@ -418,6 +478,12 @@ interface DailyVideoSendSettings {
   };
 }
 
+export type DailyScreenVideoSendSettingsPreset =
+  | 'default-screen-video'
+  | 'detail-optimized'
+  | 'motion-optimized'
+  | 'motion-and-detail-balanced';
+
 export interface DailyPendingRoomInfo {
   roomUrlPendingJoin: string;
 }
@@ -479,7 +545,7 @@ export interface DailyRoomInfo {
   };
   tokenConfig: {
     eject_at_token_exp?: boolean;
-    eject_after_elapsed?: boolean;
+    eject_after_elapsed?: number;
     nbf?: number;
     exp?: number;
     is_owner?: boolean;
@@ -1160,6 +1226,8 @@ export interface DailyCall {
   stopTranscription(): void;
   preAuth(properties?: DailyCallOptions): Promise<{ access: DailyAccess }>;
   load(properties?: DailyLoadOptions): Promise<void>;
+  startScreenShare(properties?: DailyStartScreenShare): void;
+  stopScreenShare(): void;
   getNetworkStats(): Promise<DailyNetworkStats>;
   getCpuLoadStats(): Promise<DailyCpuLoadStats>;
   updateSendSettings(settings: DailySendSettings): Promise<DailySendSettings>;
@@ -1168,6 +1236,8 @@ export interface DailyCall {
   setSubscribeToTracksAutomatically(enabled: boolean): DailyCall;
   enumerateDevices(): Promise<{ devices: MediaDeviceInfo[] }>;
   sendAppMessage(data: any, to?: string): DailyCall;
+  setProxyUrl(proxyUrl?: string): DailyCall;
+  setIceConfig(iceConfig?: DailyIceConfig): DailyCall;
   meetingSessionState(): DailyMeetingSessionState;
   setMeetingSessionData(
     data: unknown,