Support for screenshare on ios and android

Example/index.js

@@ -55,10 +55,13 @@ const Example = (props) => {
   };
 
   const _onShareButtonPressed = () => {
-    twilioVideo.current.toggleScreenSharing(!isSharing);
-    setIsSharing(!isSharing);
+    twilioVideo.current.setScreenShareEnabled(!isScreenShareEnabled);
   };
 
+  const _onScreenShareChanged = ({screenShareEnabled = false}) => {
+    setIsScreenShareEnabled(screenShareEnabled);
+  }
+
   const _onFlipButtonPress = () => {
     twilioVideo.current.flipCamera();
   };
@@ -205,7 +208,7 @@ const Example = (props) => {
               onPress={_onShareButtonPressed}
             >
               <Text style={{ fontSize: 12 }}>
-                {isSharing ? "Stop Sharing" : "Start Sharing"}
+                {isScreenShareEnabled ? "Stop Screen Sharing" : "Start Screen Sharing"}
               </Text>
             </TouchableOpacity>
             <TwilioVideoLocalView enabled={true} style={styles.localVideo} />
@@ -217,6 +220,7 @@ const Example = (props) => {
         ref={twilioVideo}
         onRoomDidConnect={_onRoomDidConnect}
         onRoomDidDisconnect={_onRoomDidDisconnect}
+        onScreenShareChanged={_onScreenShareChanged}
         onRoomDidFailToConnect={_onRoomDidFailToConnect}
         onParticipantAddedVideoTrack={_onParticipantAddedVideoTrack}
         onParticipantRemovedVideoTrack={_onParticipantRemovedVideoTrack}

README.md

@@ -245,8 +245,8 @@ import {
 
 Here you can see a complete example of a simple application that uses almost all the apis:
 
-```javascript
-import React, { Component, useRef } from "react";
+````javascript
+import React, { useState, useRef } from 'react';
 import {
   TwilioVideoLocalView,
   TwilioVideoParticipantView,
@@ -256,16 +256,17 @@ import {
 const Example = (props) => {
   const [isAudioEnabled, setIsAudioEnabled] = useState(true);
   const [isVideoEnabled, setIsVideoEnabled] = useState(true);
-  const [status, setStatus] = useState("disconnected");
+  const [isScreenShareEnabled, setIsScreenShareEnabled] = useState(false);
+  const [status, setStatus] = useState('disconnected');
   const [participants, setParticipants] = useState(new Map());
   const [videoTracks, setVideoTracks] = useState(new Map());
   const [token, setToken] = useState("");
   const twilioRef = useRef(null);
 
   const _onConnectButtonPress = () => {
     twilioRef.current.connect({ accessToken: token });
-    setStatus("connecting");
-  };
+    setStatus('connecting');
+  }
 
   const _onEndButtonPress = () => {
     twilioRef.current.disconnect();
@@ -277,6 +278,14 @@ const Example = (props) => {
       .then((isEnabled) => setIsAudioEnabled(isEnabled));
   };
 
+  const _onShareButtonPressed = () => {
+    twilioRef.current.setScreenShareEnabled(!isScreenShareEnabled);
+  };
+
+  const _onScreenShareChanged = ({screenShareEnabled = false}) => {
+    setIsScreenShareEnabled(screenShareEnabled);
+  }
+
   const _onFlipButtonPress = () => {
     twilioRef.current.flipCamera();
   };
@@ -341,6 +350,7 @@ const Example = (props) => {
         </View>
       )}
 
+
       {(status === "connected" || status === "connecting") && (
         <View style={styles.callContainer}>
           {status === "connected" && (
@@ -377,18 +387,29 @@ const Example = (props) => {
             >
               <Text style={{ fontSize: 12 }}>Flip</Text>
             </TouchableOpacity>
-            <TwilioVideoLocalView enabled={true} style={styles.localVideo} />
+            <TouchableOpacity
+              style={styles.optionButton}
+              onPress={_onShareButtonPressed}>
+              <Text style={{ fontSize: 12 }}>
+                {isScreenShareEnabled ? "Stop Screen Sharing" : "Start Screen Sharing"}
+              </Text>
+            </TouchableOpacity>
+            <TwilioVideoLocalView
+              enabled={true}
+              style={styles.localVideo}
+              />
           </View>
         </View>
       )}
 
       <TwilioVideo
-        ref={twilioRef}
-        onRoomDidConnect={_onRoomDidConnect}
-        onRoomDidDisconnect={_onRoomDidDisconnect}
-        onRoomDidFailToConnect={_onRoomDidFailToConnect}
-        onParticipantAddedVideoTrack={_onParticipantAddedVideoTrack}
-        onParticipantRemovedVideoTrack={_onParticipantRemovedVideoTrack}
+        ref={ twilioRef }
+        onRoomDidConnect={ _onRoomDidConnect }
+        onRoomDidDisconnect={ _onRoomDidDisconnect }
+        onScreenShareChanged={ _onScreenShareChanged}
+        onRoomDidFailToConnect= { _onRoomDidFailToConnect }
+        onParticipantAddedVideoTrack={ _onParticipantAddedVideoTrack }
+        onParticipantRemovedVideoTrack= { _onParticipantRemovedVideoTrack }
       />
     </View>
   );

android/build.gradle

@@ -3,7 +3,8 @@ apply plugin: 'com.android.library'
 def DEFAULT_COMPILE_SDK_VERSION             = 30
 def DEFAULT_BUILD_TOOLS_VERSION             = "27.0.3"
 def DEFAULT_TARGET_SDK_VERSION              = 30
-def DEFAULT_ANDROID_SUPPORT_VERSION         = "27.1.0"
+// def DEFAULT_ANDROID_SUPPORT_VERSION         = "27.1.0"
+def DEFAULT_ANDROID_CORE_VERSION         = "1.6.0"
 def DEFAULT_ANDROID_MIN_SDK_VERSION         = 21
 
 android {
@@ -46,10 +47,12 @@ android {
 }
 
 dependencies {
-    def androidSupportVersion = rootProject.hasProperty("androidSupportVersion")  ? rootProject.androidSupportVersion : DEFAULT_ANDROID_SUPPORT_VERSION
+    // def androidSupportVersion = rootProject.hasProperty("androidSupportVersion")  ? rootProject.androidSupportVersion : DEFAULT_ANDROID_SUPPORT_VERSION
+    def coreVersion = rootProject.hasProperty("coreVersion")  ? rootProject.coreVersion : DEFAULT_ANDROID_CORE_VERSION
 
     implementation fileTree(dir: 'libs', include: ['*.jar'])
-    implementation "com.android.support:appcompat-v7:$androidSupportVersion"
-    implementation "com.twilio:video-android:7.6.1"
+    // implementation "com.android.support:appcompat-v7:$androidSupportVersion"
+    implementation "androidx.core:core:$coreVersion"
+    implementation "com.twilio:video-android:7.3.1"
     implementation "com.facebook.react:react-native:+"  // From node_modules
 }

android/src/main/AndroidManifest.xml

@@ -16,4 +16,13 @@
     <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
     <uses-permission android:name="android.permission.BLUETOOTH_ADMIN"/>
     <uses-permission android:name="android.permission.BLUETOOTH"/>
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
+
+    <application>
+        <service
+            android:enabled="true"
+            android:name=".ScreenCapturerService"
+            android:foregroundServiceType="mediaProjection">
+        </service>
+    </application>
 </manifest>