100ms SDK iOS Quickstart

Prerequisites

Familiarity with Xcode and iOS SDK, Knowledge about either Swift Package Manager or Cocoapods

Select "Storyboard" for interface and "Swift" for language

You can either use Swift Package Manager or Cocoapods to add 100ms iOS SDK to your project.

Use Swift Package Manager

Add 100ms iOS SDK through Swift Package Manager in Xcode. Use https://github.com/100mslive/100ms-ios-sdk.git as the package source.

Use Cocoapods

Assuming your project name is "basicvideocall", create "Podfile" in the project folder with the following contents then run pod install

platform :ios, '13.0'

target 'basicvideocall' do
  use_frameworks!
  pod 'HMSSDK'

end

Open .xcworkspace

Add the entitlements for video, audio and network access to your Info.plist

<key>NSCameraUsageDescription</key>
<string>Please allow access to Camera to enable video conferencing.</string>
<key>NSLocalNetworkUsageDescription</key>
<string>Please allow access to network usage to enable video conferencing.</string>
<key>NSMicrophoneUsageDescription</key>
<string>Please allow access to Microphone to enable video conferencing.</string>

Initialising The SDK

Open ViewController.swift

Add HMSSDK import

import HMSSDK

Conform to HMSUpdateListener and add stubs when Xcode offers to

extension ViewController: HMSUpdateListener {
}

Create an instance of HMSSDK

class ViewController: UIViewController {
var hmsSDK = HMSSDK.build()
...
}

Room Code Setup

Before we proceed we need to obtain the room-code for your room. In case you are not sure how to do this here is a quick guide about room-codes: Get Room Code From Dashboard. For more information about room-code check out Room Code Setup Guide

Join Room

Alright with the room-code we are ready to proceed.

Add joinRoom() function with room-code that you obtained in previous steps. Then call joinRoom() from viewDidLoad()

func joinRoom() {

    hmsSDK.getAuthTokenByRoomCode("room-code") { token, error in
        if let token = token {
            let config = HMSConfig(userName: "John Doe", authToken: token)
            hmsSDK.join(config: config, delegate: self)
        }
    }
}

override func viewDidLoad() {
    super.viewDidLoad()
    joinRoom()
}

Note: You can have a text-field in your app where user enters the room-code. Then you can use the room-code entered by the user in joinRoom method above.

Congratulations! You have an audio conference app.

Build and launch on device, then join same room on web app to try a call between web and iOS. (To join from the web, use one of the role URL links from your room Room in Dashboard)

Adding Video

Lets create and add a lazily initialized UIStackView that will hold our video views

class ViewController: UIViewController {
    var hmsSDK = HMSSDK.build()

    lazy var stackView: UIStackView = {
        let result = UIStackView()
        result.axis = .vertical

        view.addSubview(result)
        result.translatesAutoresizingMaskIntoConstraints = false
        result.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        result.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        result.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        let heightConstraint =  result.heightAnchor.constraint(equalToConstant: 0)
        heightConstraint.isActive = true
        heightConstraint.priority = .defaultLow

        return result
    }()

Next step is to listen for trackAdded update so that we get notified when someone has published a video track.

In the handler we will create an instance of HMSVideoView that allows us to render the HMSVideoTrack

extension ViewController: HMSUpdateListener {
    ...

    func on(track: HMSTrack, update: HMSTrackUpdate, for peer: HMSPeer) {
        switch update {
        case .trackAdded:
            if let videoTrack = track as? HMSVideoTrack {
                addVideoView(for: videoTrack)
            }
        default:
            break
        }
    }

    func addVideoView(for track: HMSVideoTrack) {
        let videoView = HMSVideoView()
        videoView.translatesAutoresizingMaskIntoConstraints = false
        videoView.setVideoTrack(track)
        videoView.heightAnchor.constraint(equalTo: videoView.widthAnchor, multiplier: 9.0/16.0).isActive = true
        stackView.addArrangedSubview(videoView)
    }

Build and run the app. Congratulations you have an a/v call running!

Cleanup

A peer can decide to stop publishing any of his tracks at any time (most frequent case is start/stop screen share), also peer may choose to leave a room. In any of these events we want to remove the corresponding video view to release resources.

To start we will introduce a map of track to video view so that we can figure out which video view to remove

class ViewController: UIViewController {
    var hmsSDK = HMSSDK.build()

    var trackViewMap = [HMSTrack: HMSVideoView]()

...

Next we want to add a map entry as a last step in our addVideoView function

func addVideoView(for track: HMSVideoTrack) {
    let videoView = HMSVideoView()
    videoView.translatesAutoresizingMaskIntoConstraints = false
    videoView.setVideoTrack(track)
    videoView.heightAnchor.constraint(equalTo: videoView.widthAnchor, multiplier: 9.0/16.0).isActive = true
    stackView.addArrangedSubview(videoView)
    trackViewMap[track] = videoView
}

Now we will create a helper function that will remove the view for given track

func removeVideoView(for track: HMSVideoTrack) {
    trackViewMap[track]?.removeFromSuperview()
}

With this we are ready to add handlers for trackRemoved and peerLeft events as follows:

func on(peer: HMSPeer, update: HMSPeerUpdate) {
    switch update {
    case .peerLeft:
        if let videoTrack = peer.videoTrack {
            removeVideoView(for: videoTrack)
        }
    default:
        break
    }
}

func on(track: HMSTrack, update: HMSTrackUpdate, for peer: HMSPeer) {
    switch update {
    case .trackAdded:
        if let videoTrack = track as? HMSVideoTrack {
            addVideoView(for: videoTrack)
        }
    case .trackRemoved:
        if let videoTrack = track as? HMSVideoTrack {
            removeVideoView(for: videoTrack)
        }
    default:
        break
    }
}

And that's how you handle most common use case with the 100ms SDK!

Final Points

To control mute/unmute state of local video and audio tracks use

hmsSDK.localPeer?.localAudioTrack()?.setMute(true)
hmsSDK.localPeer?.localVideoTrack()?.setMute(true)

After you are done with the call it is a good idea to call

hmsSDK.leave()

Ways to go from here

Checkout complete project code on github: https://github.com/100mslive/100ms-ios-sdk/tree/main/BasicExample

Checkout a sample code for a full featured conferencing app:

https://github.com/100mslive/100ms-ios-sdk/tree/main/Example

Prerequisites

1. Xcode 14 or higher
2. iOS 15 or higher

Select SwiftUI for interface and "Swift" for language

Integration

You can integrate RoomModels SDK into your project using Swift Package Manager (SPM). Follow these steps:

1. Open your Xcode project.
2. Navigate to File > Add Package Dependency.
3. In the dialog that appears, enter the following URL as the package source: https://github.com/100mslive/100ms-roomkit-models-ios
4. Click Next and follow the prompts to add the package to your project.

Add the entitlements for video, audio and network access to your Info.plist

<key>NSCameraUsageDescription</key>
<string>Please allow access to Camera to enable video conferencing.</string>
<key>NSMicrophoneUsageDescription</key>
<string>Please allow access to Microphone to enable video conferencing.</string>

Import SDK

You import the RoomModels SDK with following import statement

import HMSRoomModels

Create an instance of HMSRoomModel

You can create a reactive model of the room with either a room-code or an auth-token like below:

// Initialize with room-code
let roomModel = HMSRoomModel(roomCode: /*pass room code as string here*/)

// Initialize with auth-token
let roomModel = HMSRoomModel(token: /*pass role's auth token as string here*/)

Room Code Setup

Before we proceed we need to obtain the room-code for your room. In case you are not sure how to do this here is a quick guide about room-codes: Get Room Code From Dashboard. For more information about room-code check out Room Code Setup Guide

Join Room

Alright with the room-code we are ready to proceed.

Pass room-code that you obtained in previous steps in HMSRoomModel initializer then call joinSession() method on roomModel instance.

struct MeetingView: View {
    
    @ObservedObject var roomModel = HMSRoomModel(roomCode: "qdr-mik-seb")
    
    var body: some View {

      VStack {
        switch roomModel.roomState {
        case .notJoined, .leftMeeting:
            // Button to join the room
            Button {
                Task {
                    try await roomModel.joinSession(userName: "iOS User")
                }
            } label: {
                Text("Join")
            }
        case .inMeeting:
            ...
        }
      }
      .environmentObject(roomModel)
    }
}

Note that we have marked roomModel instance above with @ObservedObject because we are using it's published property roomState to drive the UI.

Note: You can have a text-field in your app where user enters the room-code. Then you can use the room-code entered by the user in to initialize HMSRoomModel instance.

Congratulations! You have an audio conference app.

Build and launch on device, then join same room on web app to try a call between web and iOS. (To join from the web, use one of the role URL links from your room Room in Dashboard)

Adding Video

Let's iterate through all the peers in the room using peerModels property in HMSRoomModel. And use HMSVideoTrackView to render each peer's video track in a vertical list.

struct MeetingView: View {
    
    @ObservedObject var roomModel = HMSRoomModel(roomCode: "qdr-mik-seb")
    
    var body: some View {

      VStack {
        switch roomModel.roomState {
        case .notJoined, .leftMeeting:
            // Button to join the room
            ...
        case .inMeeting:
            VStack {
                // Render video of each peer in the call
                List {
                    ForEach(roomModel.peerModels) { peerModel in
                        VStack {
                            Text(peerModel.name)
                            HMSVideoTrackView(peer: peerModel)
                                .frame(height: 200)
                        }
                    }
                }
            }
        }
      }
      .environmentObject(roomModel)
    }
}

Build and run the app. Congratulations you have an audio-video call running!

Final Points

To control mute/unmute state of local video and audio tracks use

// Toggle local user's mic
roomModel.toggleMic()
// Toggle local user's camera
roomModel.toggleCamera()
// check if local user's mic is mute
roomModel.isMicMute
// check if local user's camera is mute
roomModel.isCameraMute

After you are done with the call it is a good idea to call leave to leave the call.

roomModel.leaveSession()

import SwiftUI
import HMSRoomModels

struct MeetingView: View {
    
    @ObservedObject var roomModel = HMSRoomModel(roomCode: "qdr-mik-seb")
    
    var body: some View {

      VStack {
        switch roomModel.roomState {
        case .notJoined, .leftMeeting:
            // Button to join the room
            Button {
                Task {
                    try await roomModel.joinSession(userName: "iOS User")
                }
            } label: {
                Text("Join")
            }
        case .inMeeting:
            VStack {
                List {
                    
                    // If a participant is sharing their screen, show their screen at the top of the list
                    if roomModel.peersSharingScreen.count > 0 {
                        TabView {
                            ForEach(roomModel.peersSharingScreen) { screenSharingPeer in
                                HMSScreenTrackView(peer: screenSharingPeer)
                            }
                        }
                        .tabViewStyle(.page(indexDisplayMode: .never))
                        .frame(height: 200)
                    }
                    
                    // Render video of each peer in the call
                    ForEach(roomModel.peerModels) { peerModel in
                        
                        VStack {
                            Text(peerModel.name)
                            HMSVideoTrackView(peer: peerModel)
                                .frame(height: 200)
                        }
                    }
                }
                
                HStack {
                    
                    // Toggle local user's mic
                    Image(systemName: roomModel.isMicMute ? "mic.slash" : "mic")
                        .onTapGesture {
                            roomModel.toggleMic()
                        }
                    
                    // Toggle local user's camera
                    Image(systemName: roomModel.isCameraMute ? "video.slash" : "video")
                        .onTapGesture {
                            roomModel.toggleCamera()
                        }
                    
                    // Button to leave the room
                    Image(systemName: "phone.down.fill")
                        .onTapGesture {
                            Task {
                                try await roomModel.leaveSession()
                            }
                        }
                }
            }
        }
      }
      .environmentObject(roomModel)
    }
}

Ways to go from here

Checkout the HMSRoomModels SDK in detail: https://github.com/100mslive/100ms-roomkit-models-ios

Checkout a sample code for a full featured conferencing app:

https://github.com/100mslive/100ms-roomkit-ios/tree/main/HMSRoomKitExample