JioMeet Template UI Quickstart

Introduction

In this documentation, we'll guide you through the process of installation, enabling you to enhance your iOS app with Jiomeet's real-time communication capabilities swiftly and efficiently. Let's get started on your journey to creating seamless communication experiences with Jiomeet Template UI!

Features

In Jiomeet Template UI, you'll find a range of powerful features designed to enhance your iOS application's communication and collaboration capabilities. These features include:

Voice and Video Calling: Enjoy high-quality, real-time audio and video calls with your contacts.
Participant Panel: Manage and monitor participants in real-time meetings or video calls for a seamless user experience.
Group Conversation: Easily engage in text-based conversations with multiple participants in one chat group.
Virtual Background: Customize your video conferencing environment with various background options .
Whiteboard/Screen Share: Collaborate seamlessly with screen sharing and digital whiteboard capabilities.
Watermark: JioMeet watermark to be present in all meetings. However, it is configurable.
Livestream: It will enable users to broadcast their meetings and presentations in real time.
Reactions: It will provide users with a non-verbal means of expressing emotions and feedback during meetings.

Prerequisites

Before getting started with this example app, please ensure you have the following software installed on your machine:

Xcode 14.2 or later.
Swift 5.0 or later.
An iOS device or emulator running iOS 13.0 or later.

Setup

Register on JioMeet Platform:

You need to first register on Jiomeet platform. Click here to sign up

Get your application keys:

Create a new app. Please follow the steps provided in the Documentation guide to create apps before you proceed.

Get your Jiomeet meeting id and pin

Use the create meeting api to get your room id and password

Project Settings

Info.plist Changes

Please add below permissions keys to your Info.plist file with proper description.

<key>NSCameraUsageDescription</key>
<string>Allow access to camera for meetings</string>
<key>NSMicrophoneUsageDescription</key>
<string>Allow access to mic for meetings</string>

Enable Background Mode

Please enable Background Modes in your project Signing & Capibilities tab. After enabling please check box with option Audio, Airplay, and Pictures in Pictures. If you don't enables this setting, your mic will be muted when your app goes to background.

Enable Audio Video Permissons

Before joining the meeting please check audio video permissons are enabled or not. If not please throw an error to enable both audio and video permissons

Orientation

Currently SDK support portarait orientation for the iPhone and landscape for the iPad. If your app supports multiple orientation, please lock down orientation when you show the SDK View.

Integration Steps

Add SDK

Please add below pod to your Podfile and run command pod install --repo-update --verbose.

pod 'JioMeetUIKit_iOS', '~>4.0.5'

Participant Panel, Chat View, Virtualbackground and Reactions are additional seperate frameworks. If you want to include them in your app, please enable below flags and add respective pods in podfile

For Participant Panel View

JMUIKit.isParticipantPanelEnabled = true
pod 'JioMeetParticipantPanelSDK_iOS', '~>4.0.5'

For Chat View

JMUIKit.isChatViewEnabled = true
pod 'JioMeetChatUIKit_iOS', '~>4.0.5'

For Virtual Background

JMUIKit.isVirtualBackgroundEnabled = true
pod 'JioMeetVBGUIKit_iOS', '~>4.0.5'

For Reactions

JMUIKit.isReactionsEnabled = true
pod 'JioMeetReactions_iOS', '~>4.0.5'

Note: Please add below post install script in podfile before installing pods

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '13.0'
      config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
    end
  end
end

JioMeetUIKit has many optional features which you can enable according to your requirement. Please check below snippet.

// Enable White Board feature. You can ignore it if you don't want to use Whiteboard

JMUIKit.isWhiteboardEnabled = true

// Enable Start and Stop Recording option. You can ignore if you don't want to handle recording from app side

JMUIKit.isRecordingEnabled = true

// Enable More Settings (Hand raise, Share, Audio only mode etc). You can ignore if you don't want more settings 

JMUIKit.isMoreFeaturesEnabled = true

// Enable Audio only mode feature. You can ignore if you don't want audio only mode feature 

JMUIKit.isAudioOnlyModeFeatureEnabled = true

// Enable Reactions feature. You can ignore if you don't want reactions feature 

JMUIKit.isReactionsEnabled = true

// Enable Live stream feature. You can ignore if you don't want live stream feature 

JMUIKit.isLiveStreamEnabled = true

// Enable below flag to leave the meeting once other user left the call 

JMUIKit.exitMeetingOnRemoteUserLeft = true

// Enable below flag to leave the meeting if recording is not started automatically 

JMUIKit.exitMeetingIfRecordingNotStarted = true


// Enable Entry/Exit Chime. You can ignore if you don't want to use this feature. Please provide path for Entry/Exit Chime audio files if you enable this feature

JMUIKit.isEntryExitChimeEnabled = true

JMUIKit.entryChimeSoundPath = Bundle.main.path(forResource: "LOCAL_FILE_NAME", ofType: "mp3") ?? ""

JMUIKit.exitChimeSoundPath = Bundle.main.path(forResource: "LOCAL_FILE_NAME", ofType: "mp3") ?? ""

JioMeetUIKit also have some other configuration settings to disable existing features according to your requirement. Please check below snippet.

// You can disable meeting title label by using below flag 

JMUIKit.showMeetingTitle = false

// You can disable meeting duration label by using below flag 

JMUIKit.showMeetingTimer = false

// You can disable meeting info icon by using below flag 

JMUIKit.showMeetingInfo = false

// You can disable switching audio mode option (Speaker, Earphones, Bluetooth etc) by using below flag 

JMUIKit.showAudioOptions = false

// You can disable flip camera option by using below flag 

JMUIKit.enableFlipCamera = false

// You can disable network indicator option by using below flag 

JMUIKit.showConnectionStateIndicator = false

// You can disable thank you screen by using below flag 

JMUIKit.showThankYouScreen = false

Import SDK

Please use below import statements

import JioMeetUIKit
import JioMeetCoreSDK

Integrate Meeting View

Create instance of JMMeetingView.

private var meetingView = JMMeetingView()

Add it to your viewController view.

meetingView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(meetingView)

NSLayoutConstraint.activate([
    meetingView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    meetingView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    meetingView.topAnchor.constraint(equalTo: view.topAnchor),
    meetingView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
])

Join Meeting

Create Meeting Data

First create JMJoinMeetingData type object. Following are the properties of this object.

Property Name	Type	Description
meetingId	String	Meeting ID of the meeting user is going to join.
meetingPin	String	Meeting PIN of the meeting user is going to join.
displayName	String	Display Name with which user is going to join the meeting.

let joinMeetingData = JMJoinMeetingData(
    meetingId: "9680763133",
    meetingPin: "1tKzt",
    displayName: "John Appleased"
)

Create Meeting Configuration

Create a JMJoinMeetingConfig type object. Following are the properties of this object.

Property Name	Type	Description
userRole	JMUserRole	Role of the user in the meeting. Possible values are `.host`, `.speaker`, `.audience`. If you are assigning `.host` value, please pass the token in its argument.
isInitialAudioOn	Bool	Initial Audio State of the user when user joins the meeting. If meeting is hard muted by a host, initial audio state will be muted and this setting will not take place.
isInitialVideoOn	Bool	Initial Video State of the user when user joins the meeting.

let joinMeetingConfig = JMJoinMeetingConfig(
    userRole: .host(hostToken: "MD5hQxGAwjW2"),
    isInitialAudioOn: false,
    isInitialVideoOn: false
)

Join Meeting with data and config

After creating JMJoinMeetingData and JMJoinMeetingConfig objects, call joinMeeting method of JMClient instance.

Following are the arguments of joinMeeting method.

Argument Name	Type	Description
meetingData	JMJoinMeetingData	Meeting Data which include meeting id, pin and user display name.
config	JMJoinMeetingConfig	Meeting Configuration which include user role, mic and camera initial states.
delegate	JMClientDelegate?	A class conforming to `JMClientDelegate` protocol.

meetingView.joinMeeting(
    meetingData: joinMeetingData,
    config: joinMeetingConfig,
    delegate: self
)

Note: Host Token can be nil.

Implement JMMeetingViewDelegate methods

Confirm your class with JMMeetingViewDelegate protocol and implement its methods

// Local User has left the meeting
func didLocalUserExitsMeetingView() {
    navigationController?.popViewController(animated: true)
}

// Local User failed to joined the meeting. Please use errorMessage to show any error.
func didLocalUserFailedToJoinMeeting(errorMessage: String) {
    showMeetingJoinError(message: errorMessage)
}

// UI SDK has requested to share meeting. Use meetingID and meetingPin to show any UI you want. For e.g. `UIActivityViewController`
func didRequestToShareMeetingView(meetingID: String, meetingPin: String) {
    showMeetingShareView(meetingID: meetingID, meetingPin: meetingPin)
}

// UI SDK has requested to create meeting share Link.
func didRequestToBuildMeetingShareLink(meetingID: String, meetingPin: String, completion: @escaping ((String) -> Void)) {
    var components = URLComponents()
    components.scheme = "https"
    components.host = "jiomeetpro.jio.com"
    components.path = "/shortener"
    components.queryItems = [
        URLQueryItem(name: "meetingId", value: meetingID),
        URLQueryItem(name: "pwd", value: meetingPin)
    ]
    
    guard let urlString = components.string else { return }
    completion(urlString)
}

Run Project

Run pod install --repo-update command. Open JioMeetCoreUIDemo.xcworkspace file.

Reference Classes

Please check MeetingScreenViewController class for integration reference.

Screen Share Integration

Add Broadcast Upload Extension

You need to create a Broadcast Upload Extension to enable the screen sharing process. To do that,

open your project, go to Xcode -> File -> Target... ->

Select Broadcast Upload Extension and click on Next

Fill the Product name and other info, uncheck Include UI Extension, and click Finish.

Activate the Extension

Xcode automatically creates the Extension folder, which contains the SampleHandler.swift file.

NOTE: Please set deployment target for Broadcast Upload Extension same as of your main app.

Add JioMeet Screen Share SDK

Before installing pod please enable below flag to get screen share option in more settings

JMUIKit.isScreenShareEnabled = true

Go to your Podfile. Add JioMeetScreenShareSDK_iOS pod for your newly created broadcast upload extension and run pod install --repo-update --verbose command to install the SDK.

target 'ScreenShareExtension' do
    use_frameworks!
    pod 'JioMeetScreenShareSDK_iOS', '~>4.0.5'
end

NOTE: ScreenShareExtension is name of target you fill while creating Broadcast Upload Extension

Enable App Groups

You need to enable app groups for your main app and screenshare extension. Please follow guide from below link. https://developer.apple.com/documentation/xcode/configuring-app-groups

https://www.appcoda.com/app-group-macos-ios-communication/

Edit `SampleHandler` file.

Go to your SampleHandler.swift file. Replace the whole file content with content below.

NOTE: Please change YOUR_APP_GROUP_NAME_IDENTIFIER with app group you created in above step.

import ReplayKit
import JioMeetScreenShareSDK

class SampleHandler: JMScreenShareHandler {

    override func getAppGroupsIdentifier() -> String {
        return "YOUR_APP_GROUP_NAME_IDENTIFIER"
    }
}

Main App Changes

You need to provide both your app-group and screen share extension bundle identifier to JioMeet UI SDK. Please use JMUIKit class appGroupName and screenShareExtensionBundleIdentifier static variables to provide this info.

JMUIKit.appGroupName = "YOUR_APP_GROUP_NAME_IDENTIFIER"
JMUIKit.screenShareExtensionBundleIdentifier = "BROADCAST_UPLOAD_EXTENSION_IDENTIFIER"

Troubleshooting

Facing any issues while integrating or installing the JioMeet Template UI Kit please connect with us via real time support present in [email protected] or https://jiomeetpro.jio.com/contact-us

Name		Name	Last commit message	Last commit date
Latest commit History 61 Commits
JioMeetCoreUIDemo.xcodeproj		JioMeetCoreUIDemo.xcodeproj
JioMeetCoreUIDemo.xcworkspace		JioMeetCoreUIDemo.xcworkspace
JioMeetCoreUIDemo		JioMeetCoreUIDemo
SPMSource		SPMSource
ScreenShareExtension		ScreenShareExtension
XCFrameworks		XCFrameworks
.gitignore		.gitignore
Package.swift		Package.swift
Podfile		Podfile
README.md		README.md
ScreenShare_README.md		ScreenShare_README.md

JioMeet/JioMeetCoreTemplateSDK_iOS

Folders and files

Latest commit

History

Repository files navigation