Integrate Video for iOS
This tutorial guides how to add video features to a conference.
Start the video
Add UI for starting video in ViewController.swift.
1. In ViewController.swift, add some variables to the ViewController class to refer to the user interface elements that will be created in step 2.
Set the ViewContoller instance as the conference delegate. The delegate will be called when video streams are added to the conference.
class ViewController: UIViewController {
...
// Conference UI.
...
var startVideoButton: UIButton!
// Videos views.
var videosView1: VTVideoView!
var videosView2: VTVideoView!
...
override func viewDidLoad() {
...
// Conference delegate.
VoxeetSDK.shared.conference.delegate = self
}
...
}
2. Modify initConferenceUI to extend the user interface and enable and disable the startVideoButton as appropriate.
...
func initConferenceUI() {
...
// Start video button.
startVideoButton = UIButton(type: .system) as UIButton
startVideoButton.frame = CGRect(
x: margin,
y: startButton.frame.origin.y + startButton.frame.height + margin,
width: buttonWidth,
height: buttonHeight
)
startVideoButton.backgroundColor = startVideoButton.tintColor
startVideoButton.layer.cornerRadius = 5
startVideoButton.isEnabled = false
startVideoButton.isSelected = true
startVideoButton.setTitle("START VIDEO", for: .normal)
startVideoButton.addTarget(self, action: #selector(startVideoButtonAction), for: .touchUpInside)
self.view.addSubview(startVideoButton)
// Video views.
videosView1 = VTVideoView(
frame: CGRect(
x: margin,
y: startVideoButton.frame.origin.y + startVideoButton.frame.height + margin,
width: buttonWidth,
height: buttonWidth
)
)
videosView1.backgroundColor = .black
self.view.addSubview(videosView1)
videosView2 = VTVideoView(
frame: CGRect(
x: startVideoButton.frame.origin.x + startVideoButton.frame.width + margin,
y: videosView1.frame.origin.y,
width: buttonWidth,
height: buttonWidth
)
)
videosView2.backgroundColor = .black
self.view.addSubview(videosView2)
}
...
@objc func startButtonAction(sender: UIButton!) {
...
// Join the conference with its id.
VoxeetSDK.shared.conference.join(conference: conference, success: { response in
...
self.startVideoButton.isEnabled = true /* Update startVideo button state */
}, fail: { error in })
}, fail: { error in })
}
@objc func leaveButtonAction(sender: UIButton!) {
VoxeetSDK.shared.conference.leave { error in
...
self.startVideoButton.isEnabled = false /* Update startVideo button state */
}
}
...
3. Add a method to start video.
...
@objc func startVideoButtonAction(sender: UIButton!) {
VoxeetSDK.shared.conference.startVideo { error in
if error == nil {
self.startVideoButton.isEnabled = false
}
}
}
4. Extend ViewController as a VTConferenceDelegate. This allows the controller to act when video streams are added or removed from the conference.
extension ViewController: VTConferenceDelegate {
func streamAdded(participant: VTParticipant, stream: MediaStream) {
streamUpdated(participant: participant, stream: stream)
}
func streamUpdated(participant: VTParticipant, stream: MediaStream) {
switch stream.type {
case .Camera:
if participant.id == VoxeetSDK.shared.session.participant?.id {
if !stream.videoTracks.isEmpty {
videosView1.attach(participant: participant, stream: stream)
} else {
videosView1.unattach() /* Optional */
}
} else {
if !stream.videoTracks.isEmpty {
videosView2.attach(participant: participant, stream: stream)
} else {
videosView2.unattach() /* Optional */
}
}
case .ScreenShare: break
default: break
}
}
func streamRemoved(participant: VTParticipant, stream: MediaStream) {}
func statusUpdated(status: VTConferenceStatus) {}
func permissionsUpdated(permissions: [Int]) {}
func participantAdded(participant: VTParticipant) {}
func participantUpdated(participant: VTParticipant) {}
}
Stop the video
Add UI for stopping video in ViewController.swift.
1. In ViewController.swift, add a variable to the ViewController class to refer to the user interface element that will be created in step 2.
class ViewController: UIViewController {
...
// Conference UI.
...
var stopVideoButton: UIButton!
...
}
2. Modify initConferenceUI to extend the user interface and enable & disable the stopVideoButton as appropriate.
...
func initConferenceUI() {
...
// Stop video button.
stopVideoButton = UIButton(type: .system) as UIButton
stopVideoButton.frame = CGRect(
x: startButton.frame.origin.x + startButton.frame.width + margin,
y: startVideoButton.frame.origin.y,
width: buttonWidth,
height: buttonHeight
)
stopVideoButton.backgroundColor = stopVideoButton.tintColor
stopVideoButton.layer.cornerRadius = 5
stopVideoButton.isEnabled = false
stopVideoButton.isSelected = true
stopVideoButton.setTitle("STOP VIDEO", for: .normal)
stopVideoButton.addTarget(self, action: #selector(stopVideoButtonAction), for: .touchUpInside)
self.view.addSubview(stopVideoButton)
// Video views.
...
}
...
@objc func leaveButtonAction(sender: UIButton!) {
VoxeetSDK.shared.conference.leave { error in
...
self.stopVideoButton.isEnabled = false /* Update stopVideo button state */
}
}
@objc func startVideoButtonAction(sender: UIButton!) {
VoxeetSDK.shared.video.local.start { error in
if error == nil {
...
self.stopVideoButton.isEnabled = true /* Update stopVideo button state */
}
}
}
...
3. Add a method to stop the video.
...
@objc func stopVideoButtonAction(sender: UIButton!) {
VoxeetSDK.shared.video.local.stop { error in
if error == nil {
self.startVideoButton.isEnabled = true
self.stopVideoButton.isEnabled = false
}
}
}
Updated 8 months ago