Overview

It's finally time to bring everything together and display live streaming video in our app. Don't worry, it's easier than you think.

Here's what you need to do:

Create an HMSVideoView object in your view hierarchy. This is a subclass of UIView, so add it to your UI just like any other view, using Storyboard, XIB or in-code.
Get a reference to a video track object, specifically an HMSVideoTrack or one of its subclasses (for example HMSLocalVideoTrack). For example, the local peer's video track can be accessed like this:


let track = hmsSDK.localPeer?.videoTrack

Connect the video track to the video view using the setVideoTrack method of HMSVideoView:


let videoView = HMSVideoView()
videoView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
...

videoView.setVideoTrack(track) // videoView is HMSVideoView, track is HMSVideoTrack

That's it. The video transmitted by the peer will now be displayed and start playing in your video view. 🥳

Remember, it's all about connecting the Video Track to the Video View. You'll be doing this often.

Create HMSVideoTrackView object and pass a peer model instance to show/render its video track.


HMSVideoTrackView(peer: /* pass an instance of HMSPeerModel*/)

Code in context


//  Render local peer's video tile
import HMSRoomModels
struct MeetingView: View {

@ObservedObject var roomModel = HMSRoomModel(roomCode: "qdr-mik-seb")

var body: some View {
    
    switch roomModel.roomState {
    case .notJoined, .leftMeeting:
        // Button to join the room
        ...
    case .inMeeting:
        VStack {
            // Render local peer's video tile
            if let localPeer = roomModel.localPeerModel {
                HMSVideoTrackView(peer: localPeer)
                    .frame(height: 200)
            }
            // Button to leave the room
            ...
        }
    }
}
}


//  Simple Meeting View to render each peer's video in a list
import HMSRoomModels
struct MeetingView: View {
    
    @ObservedObject var roomModel = HMSRoomModel(roomCode: "qdr-mik-seb")
    
    var body: some View {
        
        switch roomModel.roomState {
        case .notJoined, .leftMeeting:
            // Button to join the room
            ...
        case .inMeeting:
            VStack {
                // Render video of each peer in the call
                List {
                    ForEach(roomModel.peerModels) { peerModel in
                        VStack {
                            Text(peerModel.name)
                            HMSVideoTrackView(peer: peerModel)
                                .frame(height: 200)
                        }
                    }
                }

                // Button to leave the room
                ...
            }
        }
    }
}

Preview Adaptive Bitrate (Simulcast)

Have a suggestion? Recommend changes ->