Implement Screen Sharing for iOS

This tutorial guides how to implement screen-sharing in a conference application to allow sharing a screen only from this application. To additionally allow sharing a screen at the device level, follow the ScreenShare with iOS guide.

Start sharing a screen

Add UI for starting sharing the application’s screen 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 startScreenShareButton: UIButton!

    ...
}

2. Modify initConferenceUI to extend the user interface and enable and disable the startScreenShareButton as appropriate.

...

func initConferenceUI() {
    ...

    // Start screen share button.
    startScreenShareButton = UIButton(type: .system) as UIButton
    startScreenShareButton.frame = CGRect(
        x: margin,
        y: participantsLabel.frame.origin.y + participantsLabel.frame.height + margin,
        width: buttonWidth,
        height: buttonHeight
    )
    startScreenShareButton.backgroundColor = startScreenShareButton.tintColor
    startScreenShareButton.layer.cornerRadius = 5
    startScreenShareButton.isEnabled = false
    startScreenShareButton.isSelected = true
    startScreenShareButton.setTitle("STARTSCREEN", for: .normal)
    startScreenShareButton.addTarget(self, action: #selector(startScreenShareAction), for: .touchUpInside)
    self.view.addSubview(startScreenShareButton)
}

...

@objc func startButtonAction(sender: UIButton!) {
    ...
        // Join the conference with its id.
        VoxeetSDK.shared.conference.join(conference: conference, success: { response in

            ...
            self.startScreenShareButton.isEnabled = true /* Update startScreenShare button state */

        }, fail: { error in })
    }, fail: { error in })
}

@objc func leaveButtonAction(sender: UIButton!) {
    VoxeetSDK.shared.conference.leave { error in

        ...
        self.startScreenShareButton.isEnabled = false /* Update startScreenShare button state */

    }
}


3. Add a method to start sharing the application’s screen.

...

@objc func startScreenShareAction(sender: UIButton!) {
    if #available(iOS 11.0, *) {
        VoxeetSDK.shared.conference.startScreenShare { error in
            if error == nil {
                self.startScreenShareButton.isEnabled = false
            }
        }
    }
}

4. In ViewController.streamUpdated modify the .ScreenShare case to handle screen share streams.

extension ViewController: VTConferenceDelegate {
    ...

    func streamUpdated(participant: VTParticipant, stream: MediaStream) {
        switch stream.type {
        case .Camera:
            ...
        case .ScreenShare:
            if participant.id == VoxeetSDK.shared.session.participant?.id {
                if !stream.videoTracks.isEmpty {
                    videosView1.attach(participant: participant, stream: stream)
                }
            } else {
                if !stream.videoTracks.isEmpty {
                    videosView2.attach(participant: participant, stream: stream)
                }
            }
        default: break
        }
    }

    ...
}

Stop sharing a screen

Add UI for stopping the sharing of the application’s screen 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 stopScreenShareButton: UIButton!

    ...
}

2. Modify initConferenceUI to extend the user interface and enable & disable the stopScreenShareButton as appropriate.

...

func initConferenceUI() {
    ...

    // Stop screen share button.
    stopScreenShareButton = UIButton(type: .system) as UIButton
    stopScreenShareButton.frame = CGRect(
        x: startScreenShareButton.frame.origin.x + startScreenShareButton.frame.width + margin,
        y: startScreenShareButton.frame.origin.y,
        width: buttonWidth,
        height: buttonHeight
    )
    stopScreenShareButton.backgroundColor = stopScreenShareButton.tintColor
    stopScreenShareButton.layer.cornerRadius = 5
    stopScreenShareButton.isEnabled = false
    stopScreenShareButton.isSelected = true
    stopScreenShareButton.setTitle("STOPSCREEN", for: .normal)
    stopScreenShareButton.addTarget(self, action: #selector(stopScreenShareAction), for: .touchUpInside)
    self.view.addSubview(stopScreenShareButton)
}

...

@objc func leaveButtonAction(sender: UIButton!) {
    VoxeetSDK.shared.conference.leave { error in

        ...
        self.stopScreenShareButton.isEnabled = false /* Update stopScreenShare button state */

    }
}

@objc func startScreenShareAction(sender: UIButton!) {
    if #available(iOS 11.0, *) {
        VoxeetSDK.shared.conference.startScreenShare { error in
            if error == nil {

                ...
                self.stopScreenShareButton.isEnabled = true /* Update stopScreenShare button state */

            }
        }
    }
}

3. Add a method to stop sharing the screen.

...

@objc func stopScreenShareAction(sender: UIButton!) {
    if #available(iOS 11.0, *) {
        VoxeetSDK.shared.conference.stopScreenShare { error in
            if error == nil {
                self.startScreenShareButton.isEnabled = true /* Update startScreenShare button state */
                self.stopScreenShareButton.isEnabled = false /* Update stopScreenShare button state */
            }
        }
    }
}

...