Send and receive real-time video from an iOS application

curl https://api.mux.com/video/v1/spaces \
  -H "Content-Type: application/json" \
  -X POST \
  -u ${MUX_TOKEN_ID}:${MUX_TOKEN_SECRET}

https://github.com/muxinc/mux-spaces-sdk-swift-distribution

/// Paste in a token generated in the same way as you did in the
    /// Web SDK Getting Started Guide
    static var token: String = ""

    /// Initialize a Space using the defined token
    static var space: Space = {

        precondition(
            !token.isEmpty,
            "Please set a valid JWT token before initializing a space"
        )

        return try! Space(token: token)
    }()

import Combine
import UIKit

import MuxSpaces

class SpaceViewController: UIViewController {

    // MARK: IBOutlets for Storyboard
    @IBOutlet var participantsView: UICollectionView!

    @IBOutlet var joinSpaceButton: UIButton!

    // MARK: IBAction for Storyboard
    @IBAction @objc func joinSpaceButtonDidTouchUpInside(
        _ sender: UIButton
    ) {
        guard joinSpaceButton == sender else {
            print("Unexpected sender received by join space handler. This should be the join space UIButton.")
            return
        }

        joinSpaceButton.isEnabled = false
    }

    // MARK: Subscription related state
    var cancellables: Set<AnyCancellable> = []
}

// MARK: - Trigger button to call to join Space

extension SpaceViewController {
    func joinSpace() {
        // Setup event handlers for joining the space
        // successfully

        // When the space is successfully joined,
        // hide the join space button
        AppDelegate.space
            .events
            .joinSuccess
            .map { _ in return true }
            .assign(
                to: \.isHidden,
                on: joinSpaceButton
            )
            .store(in: &cancellables)

        // When the space is successfully joined,
        // unhide the participants view
        AppDelegate.space
            .events
            .joinSuccess
            .map { _ in return false }
            .assign(
                to: \.isHidden,
                on: participantsView
            )
            .store(in: &cancellables)

        AppDelegate.space.join()
    }
}

import UIKit

import MuxSpaces

// MARK: - Section

/// The UI we're building will only display participants and
/// their videos so there is only one section defined here
enum Section: Int {
    case participants
}

// MARK: - Typealiases

/// To help readibility, we'll use a typealias to refer to
/// the data source
typealias ParticipantsDataSource = UICollectionViewDiffableDataSource<
    Section,
        String
>

/// We'll also use a typealias to refer to the snapshot
typealias ParticipantsSnapshot = NSDiffableDataSourceSnapshot<
    Section,
        String
>

extension ParticipantsSnapshot {

    /// Creates a snapshot with an empty participants section
    static func makeEmpty() -> ParticipantsSnapshot {
        var snapshot = ParticipantsSnapshot()

        snapshot.appendSections(
            [.participants]
        )

        return snapshot
    }

    // MARK: Update or Insert Participant

    /// Updates an existing cell by removing or adding a UIView
    /// displaying the participants video.
    ///
    /// If no cell corresponding to the participant is found
    /// then adds participant along with their video if applicable.
    ///
    mutating func upsertParticipant(
        _ participantID: Participant.ID
    ) {
        let items = itemIdentifiers
            .filter { (checkedItem: Participant.ID) in
                return checkedItem == participantID
            }

        if items.isEmpty {
            self.appendItems(
                [
                    participantID
                ],
                toSection: .participants
            )
        } else {
            self.reloadItems(
                [
                    participantID
                ]
            )
        }
    }

    // MARK: Remove Participant

    /// Removes a participant from the snapshot and
    /// causes the collection view to delete the cell
    /// that corresponds to that participant's video
    mutating func removeParticipant(
        _ participantID: Participant.ID
    ) {
        let deletedItems = itemIdentifiers
            .filter {
                return $0 == participantID
            }

        deleteItems(deletedItems)
    }
}

import UIKit

import MuxSpaces

class SpaceParticipantVideoCell: UICollectionViewCell {
    // SpacesVideoView gets recycled with collection view cells.
    lazy var videoView = SpacesVideoView()
    lazy var placeholderView = UILabel()
    // Display a placeholder view if no video track
    var showsPlaceholder: Bool {
        videoView.track == nil
    }

    override func prepareForReuse() {
        super.prepareForReuse()
        // clear participant data when
        // collection view cell is reused
        placeholderView.text = ""
        // clear the video view track when
        // collection view cell is reused
        videoView.track = nil
    }

    func setupPlaceholderViewIfNeeded() {
        if !contentView.subviews.contains(
            placeholderView
        ) {
            placeholderView.textColor = .white

            placeholderView
                .translatesAutoresizingMaskIntoConstraints = false
            contentView.addSubview(
                placeholderView
            )
            addConstraints([
                placeholderView.centerXAnchor.constraint(
                    equalTo: contentView.centerXAnchor
                ),
                placeholderView.centerYAnchor.constraint(
                    equalTo: contentView.centerYAnchor
                ),
            ])
            placeholderView.backgroundColor = .black
        }
    }

    func setupVideoViewIfNeeded() {
        if !contentView.subviews.contains(videoView) {
            videoView.translatesAutoresizingMaskIntoConstraints = false
            videoView.clipsToBounds = true
            videoView.layer.cornerRadius = 8.0

            contentView.insertSubview(
                videoView,
                belowSubview: placeholderView
            )
            addConstraints([
                videoView.centerXAnchor.constraint(
                    equalTo: contentView.centerXAnchor
                ),
                videoView.centerYAnchor.constraint(
                    equalTo: contentView.centerYAnchor
                ),
                videoView.widthAnchor.constraint(
                    equalTo: contentView.widthAnchor
                ),
                videoView.heightAnchor.constraint(
                    equalTo: contentView.heightAnchor
                ),
            ])

            videoView.translatesAutoresizingMaskIntoConstraints = false
        }
    }

    func setup() {
        backgroundView?.layer.cornerRadius = 8.0
        contentView.layer.cornerRadius = 8.0
        contentView.clipsToBounds = true
        contentView.backgroundColor = .black

        setupPlaceholderViewIfNeeded()

        setupVideoViewIfNeeded()
    }

    func update(
        participantID: String,
        videoTrack: VideoTrack? = nil
    ) {
        videoView.track = videoTrack
        setup() // Add this!

        if showsPlaceholder {
            /// Show black background with participant ID
            /// displayed inside a centered label
            placeholderView.text = participantID
            contentView.bringSubviewToFront(placeholderView)
            contentView.sendSubviewToBack(videoView)
        } else {
            /// Show SpacesVideoView
            placeholderView.text = ""
            contentView.bringSubviewToFront(videoView)
            contentView.sendSubviewToBack(placeholderView)
        }
    }
}

import Combine
import UIKit

import MuxSpaces

// MARK: - Space View Model

class SpaceViewModel {
    /// For more about the @Published property wrapper
    /// see [here](https://developer.apple.com/documentation/combine/published)

    // MARK: Join Button
    @Published var isJoinSpaceButtonHidden: Bool = false

    // MARK: Participants Snapshot
    @Published var snapshot: ParticipantsSnapshot

    // MARK: Participants View
    @Published var isParticipantsViewHidden: Bool = true

    // MARK: Display Error
    @Published var shouldDisplayError: Error? = nil

    // MARK: Space
    /// The space the app is joining
    var space: Space

    // MARK: Published Tracks
    /// If the app publishes audio or video tracks,
    /// they will be set here
    var publishedAudioTrack: AudioTrack?
    var publishedVideoTrack: VideoTrack?

    // MARK: Initialization
    init(space: Space) {
        self.space = space
        self.snapshot = ParticipantsSnapshot.makeEmpty()
    }

    // MARK: Setup Snapshot Updates
    func setupSnapshotUpdates(
        for dataSource: ParticipantsDataSource
    ) -> AnyCancellable {
        return $snapshot
            .sink { dataSource.apply($0) }
    }

    // MARK: Fetch Most Recent Participant State
    func participant(
        from participantID: Participant.ID
    ) -> Participant? {
        if let localParticipant = space.localParticipant {
            return (
                [localParticipant] + space.remoteParticipants
            ).filter { $0.id == participantID }.first
        } else {
            return space.remoteParticipants
                .filter { $0.id == participantID }.first
        }
    }

    // MARK: Update Participant Cell
    func configureSpaceParticipantVideo(
        _ cell: SpaceParticipantVideoCell,
        indexPath: IndexPath,
        participantID: Participant.ID
    ) {
        guard let participant = participant(
            from: participantID
        ) else {
            print("No Participant!")
            return
        }

        cell.update(
            participantID: participant.id,
            videoTrack: participant.videoTracks.values.first
        )
    }
    
}

extension SpaceViewModel {
    var audioCaptureOptions: MuxSpaces.AudioCaptureOptions? {
        return AudioCaptureOptions()
    }

    var cameraCaptureOptions: MuxSpaces.CameraCaptureOptions? {
        return CameraCaptureOptions()
    }

    // MARK: - Setup Observers on Space State Updates

    func setupEventHandlers() -> Set<AnyCancellable> {

        var cancellables: Set<AnyCancellable> = []

        /// Setup observers that will update your views state
        /// based on events that are produced by the space
        space
            .events
            .joinSuccess.map { _ in return false }
            .assign(to: \.isParticipantsViewHidden, on: self)
            .store(in: &cancellables)

        space
            .events
            .joinSuccess.map { _ in return true }
            .assign(to: \.isJoinSpaceButtonHidden, on: self)
            .store(in: &cancellables)

        space
            .events
            .joinFailure
            .map { _ in return nil }
            .assign(to: \.shouldDisplayError, on: self)
            .store(in: &cancellables)

        space
            .events
            .joinSuccess
            .sink { [weak self] _ in
                guard let self = self else {
                    return
                }

                self.handleJoinSuccess()
            }
            .store(in: &cancellables)

        Combine.Publishers.Merge6(
            /// Joining a space successfully triggers a
            /// placeholder cell to be added for the local participant
            space.events
                .joinSuccess
                .map(\.localParticipant.id),
            /// Participant joined events trigger a new
            /// cell to be added for each new participant
            space.events
                .participantJoined
                .map(\.participant.id),
            /// When the SDK subscribes to a new video track,
            /// the participants video becomes available to display
            space.events
                .videoTrackSubscribed
                .map(\.participant.id),
            /// When the SDK unsubscribes from a video track,
            /// the participants video should be taken down
            /// this update is handled in ParticipantsViewModel
            space.events
                .videoTrackUnsubscribed
                .map(\.participant.id),
            // We only want to know when our own tracks are
            // published
            space.events
                .videoTrackPublished
                .filter { $0.participant.isLocal }
                .map(\.participant.id),
            // We only want to know when our own tracks are
            // published
            space.events
                .videoTrackUnpublished
                .filter { $0.participant.isLocal }
                .map(\.participant.id)
        )
        .sink(receiveValue: { [weak self] (id: Participant.ID) in
            guard let self = self else { return }

            self.upsertParticipant(
                id
            )
        })
        .store(in: &cancellables)

        /// Each participant leaving will cause the applicable cell
        /// to be removed.
        space.events
            .participantLeft
            .map(\.participant.id)
            .sink(receiveValue: { [weak self] (id: Participant.ID) in
                guard let self = self else { return }

                self.removeParticipant(
                    id
                )
            })
            .store(in: &cancellables)

        return cancellables
    }

    func joinSpace() -> Set<AnyCancellable> {
        let cancellables = setupEventHandlers()

        space.join()

        return cancellables
    }

    func handleJoinSuccess() {
        #if !targetEnvironment(simulator)
        publishAudio()
        publishVideo()
        #endif
    }

    func publishAudio() {
        // Unimplemented for now
    }

    func publishVideo() {
        // Unimplemented for now
    }

    func upsertParticipant(
        _ participantID: Participant.ID
    ) {
        self.snapshot.upsertParticipant(
            participantID
        )
    }

    func removeParticipant(
        _ participantID: Participant.ID
    ) {
        self.snapshot.removeParticipant(
            participantID
        )
    }

    func resetSnapshot() {
        self.snapshot = ParticipantsSnapshot.makeEmpty()
    }
}

class SpaceViewController {

    // See Create SpaceViewController.swift above

    // MARK: View Model
    lazy var viewModel = SpaceViewModel(
        space: AppDelegate.space
    )

    // MARK: View Lifecycle
    override func viewDidLoad() {
        super.viewDidLoad()
        /// Setup participants view with a custom layout and
        /// configure its backing data source
        setupParticipantsView()
    }

    override func viewWillDisappear(_ animated: Bool) {
        /// Tear down
        cancellables.forEach { $0.cancel() }
        super.viewWillDisappear(animated)
    }

    // MARK: UI Setup
    lazy var dataSource: ParticipantsDataSource = setupParticipantsDataSource()

    func setupParticipantsDataSource() -> ParticipantsDataSource {
        let participantVideoCellRegistration = UICollectionView
            .CellRegistration<
                SpaceParticipantVideoCell,
                    Participant.ID
        >(
            handler: viewModel.configureSpaceParticipantVideo(_:indexPath:participantID:)
        )

        let dataSource = ParticipantsDataSource(
            collectionView: participantsView
        ) { (collectionView: UICollectionView, indexPath: IndexPath, item: Participant.ID) -> UICollectionViewCell? in
            return collectionView.dequeueConfiguredReusableCell(
                using: participantVideoCellRegistration,
                for: indexPath,
                item: item
            )
        }

        participantsView.dataSource = dataSource

        viewModel
            .setupSnapshotUpdates(for: dataSource)
            .store(in: &cancellables)

        return dataSource
    }

    func setupParticipantsView() {
        participantsView.isHidden = true
        self.dataSource = setupParticipantsDataSource()
    }
}

func joinSpace() {
    // Setup an event handler for joining the space
    // successfully
    viewModel.$isParticipantsViewHidden
        .assign(
            to: \.isHidden,
            on: participantsView
        )
        .store(in: &cancellables)

    viewModel.$isJoinSpaceButtonHidden
        .assign(
            to: \.isHidden,
            on: joinSpaceButton
        )
        .store(in: &cancellables)

    // Setup an event handler in case there is an error
    // when joining the space
    viewModel.$shouldDisplayError
        .compactMap { $0 }
        .sink { [weak self] joinError in

            guard let self = self else { return }

            // Handle join space error here
        }
        .store(in: &cancellables)

    // We're all setup, lets join the space!
    let dataSourceCancellables = viewModel.joinSpace()

    cancellables.formUnion(dataSourceCancellables)
}

/// A publisher whose stream only includes events triggered by a remote participant
/// joining the space
let participantJoinedPublisher = space.events.participantJoined

space.events
        .participantJoined
        .map(\.participant.id)

import AVFoundation
import UIKit

class ParticipantLayout: UICollectionViewCompositionalLayout {

    static func make() -> UICollectionViewCompositionalLayout {
        return UICollectionViewCompositionalLayout { (sectionIdentifier: Int, env: NSCollectionLayoutEnvironment) in

            switch sectionIdentifier {
            case Section.participants.rawValue:
                /// Total size our collection view has to work with
                let contentSize = env.container.effectiveContentSize

                /// Split into content area into quarters
                let contentSizeSplitIntoQuarters = contentSize.applying(
                    CGAffineTransform(
                        scaleX: 0.5,
                        y: 0.5
                    )
                )

                let aspectRatio = CGSize(
                    width: 16,
                    height: 9
                )

                let rectRespectingAspectRatio = AVMakeRect(
                    aspectRatio: aspectRatio,
                    insideRect: CGRect(
                        origin: .zero,
                        size: contentSizeSplitIntoQuarters
                    ).inset(
                        by: UIEdgeInsets(
                            top: 5, left: 5, bottom: 5, right: 5
                        )
                    )
                )

                let itemSize = NSCollectionLayoutSize(
                    widthDimension: .absolute(
                        rectRespectingAspectRatio.width
                    ),
                    heightDimension: .absolute(
                        rectRespectingAspectRatio.height
                    )
                )
                let item = NSCollectionLayoutItem(
                    layoutSize: itemSize
                )
                item.contentInsets = NSDirectionalEdgeInsets(
                    top: 5,
                    leading: 5,
                    bottom: 5,
                    trailing: 5
                )

                let groupSize = NSCollectionLayoutSize(
                    widthDimension: .fractionalWidth(1.0),
                    heightDimension: .absolute(
                        (rectRespectingAspectRatio.height)
                    )
                )
                let group = NSCollectionLayoutGroup.horizontal(
                    layoutSize: groupSize,
                    subitems: [item]
                )
                group.contentInsets = NSDirectionalEdgeInsets(
                    top: 10,
                    leading: 10,
                    bottom: 10,
                    trailing: 10
                )
                return NSCollectionLayoutSection(group: group)
            default:
                return nil
            }
        }
    }
}

func setupParticipantsView() {
  // We'll calculate the layout by sizing the cells to fit an aspect ratio
  //   see the implementation of `ParticipantLayout.make()` for details.
  participantsView.isHidden = true
  participantsView.setCollectionViewLayout(
          ParticipantLayout.make(),
          animated: false
      )
  self.dataSource = setupParticipantsDataSource()
}

func publishAudio() {

    /// We'll use the default options to setup
    /// audio capture from the device mic
    let options = AudioCaptureOptions()

    /// Construct an audio track
    let micTrack = space.makeMicrophoneCaptureAudioTrack(
        options: options
    )

    /// Publish the audio track
    space.publishTrack(
        micTrack
    ) { [weak self] (error: AudioTrack.PublishError?) in
        guard error == nil else { return }

        guard let self = self else { return }

        self.publishedAudioTrack = micTrack
    }
}

func publishVideo() {

    /// We'll use the default options to setup
    /// camera capture from the device's front camera
    let options = CameraCaptureOptions()

    /// Publish the camera track
    let cameraTrack = space.makeCameraCaptureVideoTrack(
        options: options
    )

    /// Publish the video track
    space.publishTrack(
        cameraTrack
    ) { [weak self] (error: VideoTrack.PublishError?) in
        guard error == nil else { return }

        guard let self = self else { return }

        self.publishedVideoTrack = cameraTrack
    }
}