d

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567
ouroffice@aware.com

 

KMF

Build a Video Streaming App With Screen Sharing

Screen sharing is a powerful way to foster immediate collaboration in a real-time meeting. It can speed things up while making sure that everyone is on the same page. 

This post explains how to build a video streaming app with a screen sharing feature in the Flutter iOS and Android application using the EnableX Flutter development toolkit.

If you feel enabling the screen sharing feature is not that simple, you will be surprised!

Let’s get started.  

What You’ll Need

To start screen sharing in the Flutter iOS app using EnableX-Flutter toolkit, users need to add “enx_flutter_plugin,” “replay_kit_launcher,” and “shared_preference_app_group” as a dependency in your pubspec.yaml.

pubspec.yaml

The purpose of the enx_flutter_plugin toolkit is to help enable real-time communication channels in your Flutter application.

The replay_kit_launcher opens RPSystemBroadcastPickerView in the Flutter iOS app.

 ReplayKitLauncher.launchReplayKitBroadcast('BroadCastExtension');

Here it is to be noted that “BroadCastExtension,” a free tool that allows to share or save content from anywhere on the web, is added through Xcode. 

How to Add Broadcast Extension 

You can do it easily by following the steps given below: 

  • Open your flutter project with iOS native workspace (Runner.xcworkspace)
  •  Select Xcode -> File -> New -> Target. Now, create a new broadcast upload extension target.

Selecting Broadcast Upload Extension

[Note: Ensure that your app target and broadcast extension target start with the same iOS version.]

Creating new broadcast extension

Naming broadcast extension

Once you’re done with adding the broadcast extension; make sure that you have used the correct bundle ID for the broadcast extension and app.

Your broadcast is now ready to start. And you’ll start receiving sample buffer (the buffer frame of your image) in the broadcast class SampleHandler invoking a delegate method. The SampleHandler is the default class for broadcast extension, which helps update the state of current activity to the extension target: 

//To start getting the sample buffer frame of screen.

(void)processSampleBuffer:(CMSampleBufferRef)sampleBuffer withType:(RPSampleBufferType)sampleBufferType; get buffer frame

Here are three additional broadcast delegate methods as given below:

  • If the broadcast stops 
    • (void)broadcastFinished; 
  • If the broadcast pauses
  • If the broadcast resumes

 *shared_preference_app_group helps to share data from one target to another one. 

How to Add App Group 

Here is how it can be done: 

Go to App Target -> Signing & Capabilities -> Click + icon on Capability -> App Groups. 

Selecting app groups

Once the app group is added, you can set a common name for it. 

*App group should be added in another app target as well as in the extension target while making sure that the name of the app group remains the same in both targets. 

After adding the shared_preference_app_groupa user needs to share their roomID and clientID to the broadcast extension via the app group. It makes sure that the broadcast extension also joins the same room and the screen frame is published. 

The sample code for sharing data from the Flutter to iOS Native app is below: 

await SharedPreferenceAppGroup.setAppGroup('group.vcxsample');
await SharedPreferenceAppGroup.setString('clientID', clientID);
await SharedPreferenceAppGroup.setString('RoomID', roomID);

How to Get Shared Data in Shared_Preference_App_Group to Native App

NSUserDefaults *userDefault = [[NSUserDefaults alloc] initWithSuiteName:@"appGroup_Name"];

  NSString *roomID   [userDefault objectForKey”@" roomID"];

NSString *roomID  = [userDefault objectForKey:@" clientID"];

After you get the roomID and clientID, a user needs to pass the same Client ID to SDK via APIs using the Broadcast Extension target.

[[EnxUtilityManager shareInstance] " withUserKey:@"clientID"];

You can use this roomID to create a new token using a broadcast extension and EnableX.  

For joining the room through Broadcast Extension, the user needs to add a new broadcast target in the POD file and EnableX iOS SDKs given below:

target 'BroadCastExtension' do

 use_frameworks!

  pod 'EnxRTCiOS'

  pod 'Socket.IO-Client-Swift', '~> 15.0.0'

  # Pods for BroadCastExtension

end

Also, add the following in the POD file:

post_install do |installer|

  installer.pods_project.targets.each do |target|

  flutter_additional_ios_build_settings(target)|

  installer.pods_project.build_configurations.each         do |config|    

config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64'

config.build_settings['ENABLE_BITCODE'] = 'NO'

config.build_settings['APPLICATION_EXTENSION_API_ONLY'] with‘ 'No'

    end

  end

end

Once you join the meeting room via the broadcast extension successfully, the broadcast target starts receiving callbacks from EnableX iOS SDKs. 

However, you also need to consider some additional scenarios:

  • If the broadcast connection establishes successfully: (void)broadCastConnected
  • If the broadcast connection fails: (void)failedToConnectWithBroadCast:(NSArray *)reason
  • If the broadcast starts successfully: (void)didStartBroadCast:(NSArray *)data
  • If the broadcast stops successfully: (void)didStoppedBroadCast:(NSArray *)data
  • If the user from the main app stops screen sharing: (void)didRequestedExitRoom:(NSArray *_Nullable)Data
  • If the user disconnects from the meeting room: (void)broadCastDisconnected
  • If the user sharing the screen suddenly disconnects from the room: (void)disconnectedByOwner
  • Once the broadcast connection is established: (void)sendVideoBuffer:(CVPixelBufferRef _Nonnull )sampleBuffer withTimeStamp:(int64_t)timeStampNs

To enable screen sharing with the EnableX and Flutter plugin in an Android app, add “enx_flutter_plugin” and “flutter_foreground_task” as a dependency in your pubspec.yaml.

pubspec.yaml

Here enx_flutter_plugin toolkit activates the real-time communication channel in a Flutter application. 

For an Android platform, we use the Flutter foreground task plugin to implement the foreground service. 

Before a user starts screen sharing, we need to init foreground service:

init foreground service part 1

init foreground service part 2

To start foreground service, you’ll need to add permission in mainifest.xml:

<uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
 <uses-permission android:name="android.permission.REQUEST_IGNORE_BATTERY_OPTIMIZATIONS" />

Also, you’ll need to register service in the Mainifest:

Registering service

To stop, you’ll need to stop the Foreground Service.

Stopping foreground service part 1

Stopping foreground service part 2

When screen sharing starts and stops successfully, the publisher receives acknowledgments of these events: 

EnxRtc.onStartScreenShareACK=(Map<dynamic, dynamic> map){
   isScreenShare=true;

// Publisher receives acknowledgement

};
EnxRtc.onStoppedScreenShareACK=(Map<dynamic, dynamic> map){
   isScreenShare=false;

// Publisher receives acknowledgement that Screen Share stopped

 };

At the same time, other participants also receive a notification that screen sharing is now available:  

EnxRtc.onScreenSharedStarted=(Map<dynamic, dynamic> map){

// A new Screen Share Stream is available, receive Information

};
EnxRtc.onScreenSharedStopped=(Map<dynamic, dynamic> map){

// Screen Share has stopped. Receive Information

  };

You can set up a video chat with a remote participant. Once you join the room, hit the share the screen button and start sharing your screen.   

We hope you have enjoyed the post. Using the above method, you can easily build a powerful video calling app and enable the screen sharing feature using the EnableX-Flutter toolkit.   

Build something exciting!

Credit: Source link

Previous Next
Close
Test Caption
Test Description goes like this