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