Introduction
Creating a live streaming app for iOS involves a structured process to ensure its functionality and appeal to users. Initially, developers need to select suitable streaming protocols, such as HLS (HTTP Live Streaming), to ensure compatibility with iOS devices. User interface design is crucial, incorporating features like live chat, reactions, and notifications for enhanced engagement. It's essential to evaluate factors like performance, reliability, ease of integration, and platform support.
And here VideoSDK stands out as a comprehensive solution, offering SDKs for iOS, Android, Flutter, and React Native. Its key advantage lies in providing an intuitive and easy-to-integrate SDK specifically tailored for live-streaming apps. VideoSDK ensures seamless performance, robust features, and excellent support across multiple platforms.
Benefits of iOS live streaming app:
- Real-Time Engagement: Live streaming allows for instant interaction and engagement with the audience, fostering a sense of connection and community.
- Increased Reach: With live streaming, you can reach a wider audience, as viewers can tune in from anywhere in the world.
- Cost-Effective Marketing: Compared to traditional marketing methods, live streaming can be a cost-effective way to promote your brand, as it requires minimal equipment and can be done from anywhere.
- Builds Trust and Authenticity: Live streaming provides an authentic and transparent way to connect with your audience, helping to build trust and credibility.
Use Cases of iOS live streaming app:
- Live Events and Webinars: Host live events or webinars to engage with your audience in real-time, share knowledge, and provide valuable information on specific topics. You can create a QR code to allow quick access to the event link or resources.
- Product Launches: Live stream product launches to showcase new products or services, demonstrate features, and answer audience questions in real time.
- Q&A Sessions: Host live Q&A sessions to interact with your audience, address their questions, and provide valuable insights or advice.
How to Develop a Live Streaming App with VideoSDK
Getting Started with VideoSDK
VideoSDK enables the opportunity to integrate video & audio calling into Web, Android, and iOS applications with so many different frameworks. It is the best infrastructure solution that provides programmable SDKs and REST APIs to build scalable video conferencing applications. This guide will get you running with the VideoSDK video & audio calling in minutes.
Create a VideoSDK Account
Go to your VideoSDK dashboard and sign up if you don't have an account. This account gives you access to the required Video SDK token, which acts as an authentication key that allows your application to interact with VideoSDK functionality.
Generate your Auth Token
Visit your VideoSDK dashboard and navigate to the "API Key" section to generate your auth token. This token is crucial in authorizing your application to use VideoSDK features. For a more visual understanding of the account creation and token generation process, consider referring to the provided tutorial.
Prerequisites and Setup
- iOS 11.0+
- Xcode 12.0+
- Swift 5.0+
This App will contain two screens:
Join Screen: This screen allows the user to either create a meeting or join the predefined meeting.
Meeting Screen: This screen basically contains local and remote participant views and some meeting controls such as Enable/Disable the mic & Camera and Leave meeting.
Integrate VideoSDK
To install VideoSDK, you must initialize the pod on the project by running the following command:
pod init
It will create the pod file in your project folder, Open that file and add the dependency for the VideoSDK, like below:
pod 'VideoSDKRTC', :git => 'https://github.com/videosdk-live/videosdk-rtc-ios-sdk.git'
then run the below code to install the pod:
pod install
then declare the permissions in Info.plist :
<key>NSCameraUsageDescription</key>
<string>Camera permission description</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone permission description</string>
Project Structure
iOSQuickStartDemo
├── Models
├── RoomStruct.swift
└── MeetingData.swift
├── ViewControllers
├── StartMeetingViewController.swift
└── MeetingViewController.swift
├── AppDelegate.swift // Default
├── SceneDelegate.swift // Default
└── APIService
└── APIService.swift
├── Main.storyboard // Default
├── LaunchScreen.storyboard // Default
└── Info.plist // Default
Pods
└── Podfile
Create models
Create a swift file for MeetingData
and RoomStruct
class model for setting data in object pattern.
Essential Steps for Building the Video Calling
This guide is designed to walk you through the process of integrating Chat with VideoSDK. We'll cover everything from setting up the SDK to incorporating the visual cues into your app's interface, ensuring a smooth and efficient implementation process.
Step 1: Get started with APIClient
Before jumping to anything else, we have to write an API to generate a unique meetingId
. You will require an authentication token; you can generate it either using videosdk-server-api-example or from the VideoSDK Dashboard for developers.
Step 2: Implement Join Screen
The Join Screen will work as a medium to either schedule a new meeting or join an existing meeting.
Step 3: Initialize and Join Meeting
Using the provided token
and meetingId
, we will configure and initialize the meeting in viewDidLoad()
.
Then, we'll add @IBOutlet for localParticipantVideoView
and remoteParticipantVideoView
, which can render local and remote participant media, respectively.
Step 4: Implement Controls
After initializing the meeting in the previous step, we will now add @IBOutlet for btnLeave
, btnToggleVideo
and btnToggleMic
which can control the media in the meeting.
Along with that we'll add one more @IBOutlet button btnToggleHLS
using which we will start/stop HLS.
Added a button to toggle HLS and code for the same, please check for grammar or typos.
Step 5: Implementing MeetingEventListener
MeetingEventListener
In this step, we'll create an extension for the MeetingViewController
that implements the MeetingEventListener, which implements the onMeetingJoined
, onMeetingLeft
, onParticipantJoined
, onParticipantLeft
, onParticipantChanged
, onHlsStateChanged
etc. methods.
When HLS is started, it triggers the onHlsStateChanged
event of the MeetingEventListener.
Removed onspeakerchanged event and added onhlsstatechanged event and code for the same
Step 6: Implementing ParticipantEventListener
ParticipantEventListener
In this stage, we'll add an extension for the MeetingViewController
that implements the ParticipantEventListener, which implements the onStreamEnabled
and onStreamDisabled
methods for the audio and video of MediaStreams enabled or disabled.
The function update UI is frequently used to control or modify the user interface (enable/disable camera & mic) by the MediaStream state.
class MeetingViewController: UIViewController {
...
extension MeetingViewController: ParticipantEventListener {
/// Participant has enabled mic, video or screenshare
/// - Parameters:
/// - stream: enabled stream object
/// - participant: participant object
func onStreamEnabled(_ stream: MediaStream, forParticipant participant: Participant) {
updateUI(participant: participant, forStream: stream, enabled: true)
}
/// Participant has disabled mic, video or screenshare
/// - Parameters:
/// - stream: disabled stream object
/// - participant: participant object
func onStreamDisabled(_ stream: MediaStream,
forParticipant participant: Participant) {
updateUI(participant: participant, forStream: stream, enabled: false)
}
}
private extension MeetingViewController {
func updateUI(participant: Participant, forStream stream: MediaStream, enabled: Bool) { // true
switch stream.kind {
case .state(value: .video):
if let videotrack = stream.track as? RTCVideoTrack {
if enabled {
DispatchQueue.main.async {
UIView.animate(withDuration: 0.5){
if(participant.isLocal) {
self.localParticipantViewContainer.isHidden = false
self.localParticipantVideoView.isHidden = false
self.localParticipantVideoView.videoContentMode = .scaleAspectFill self.localParticipantViewContainer.bringSubviewToFront(self.localParticipantVideoView)
videotrack.add(self.localParticipantVideoView)
self.lblLocalParticipantNoMedia.isHidden = true
} else {
self.remoteParticipantViewContainer.isHidden = false
self.remoteParticipantVideoView.isHidden = false
self.remoteParticipantVideoView.videoContentMode = .scaleAspectFill
self.remoteParticipantViewContainer.bringSubviewToFront(self.remoteParticipantVideoView)
videotrack.add(self.remoteParticipantVideoView)
self.lblRemoteParticipantNoMedia.isHidden = true
}
}
}
} else {
UIView.animate(withDuration: 0.5){
if(participant.isLocal){
self.localParticipantViewContainer.isHidden = false
self.localParticipantVideoView.isHidden = true
self.lblLocalParticipantNoMedia.isHidden = false
videotrack.remove(self.localParticipantVideoView)
} else {
self.remoteParticipantViewContainer.isHidden = false
self.remoteParticipantVideoView.isHidden = true
self.lblRemoteParticipantNoMedia.isHidden = false
videotrack.remove(self.remoteParticipantVideoView)
}
}
}
}
case .state(value: .audio):
if participant.isLocal {
localParticipantViewContainer.layer.borderWidth = 4.0
localParticipantViewContainer.layer.borderColor = enabled ? UIColor.clear.cgColor : UIColor.red.cgColor
} else {
remoteParticipantViewContainer.layer.borderWidth = 4.0
remoteParticipantViewContainer.layer.borderColor = enabled ? UIColor.clear.cgColor : UIColor.red.cgColor
}
default:
break
}
}
}
...
Known Issue
Please add the following line to the MeetingViewController.swift
file's viewDidLoad
method If you get your video out of the container, view like below image.
TIP:
Stuck anywhere? Check out this example code on GitHub
Now you have successfully created an iOS Live Streaming Application with the VideoSDK.
Conclusion
VideoSDK offers a seamless solution for building iOS live-streaming applications. With its user-friendly interface and robust features, developers can efficiently create high-quality streaming experiences for users. With an iOS development agency like Simpalm can further enhance the development process, ensuring top-notch results.
Unlock the full potential of VideoSDK today and craft seamless video experiences! Sign up now to receive 10,000 free minutes and take your video app to new heights.