100ms Logo

100ms

Docs

Search docs
/

100ms SDK iOS Quickstart Guide

Prerequisites

Familiarity with Xcode and iOS SDK, Cocoapods installed

Xcode Project Setup

Create an Xcode project and select "iOS" for platform and "App" for application

Xcode

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

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() ... }

Get Auth Token

Before we proceed we need to obtain a room id and a token. In case you are not sure how to do this here is a quick guide:

Token Setup Guide

Join Room

Alright with the token and room id we are ready to proceed.

Add joinRoom() function with room id and token you obtained in previous steps. Then call joinRoom() from viewDidLoad()

func joinRoom() { let config = HMSConfig(userID: UUID().uuidString, roomID: "replace with room id", authToken: "replace with token") hmsSDK.join(config: config, delegate: self) } override func viewDidLoad() { super.viewDidLoad() joinRoom() }

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 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