Issue rendering TVILocalVideoTrack in UICollectionViewCell

[louiss98]

Hello,
I am building a group video chat application using the programmable video api, and I'm noticing some strange behavior when connecting to a room.

My goal was to render each room participant in a UICollectionViewCell as opposed to creating a UIView for each participant.

The following best describes my approach.

At the View Controller:

Initialize both the TVILocalVideoTrack & TVILocalAudioTrack

    func prepareLocalMedia() {
        
        // Create an audio track.
        if (localAudioTrack == nil) {
            localAudioTrack = TVILocalAudioTrack.init()
            
            if (localAudioTrack == nil) {
                print("audio track failed to initialize")
            }
        }
        
        // Create a video track which captures from the camera.
        if (localVideoTrack == nil) {
            let videoConstraints = TVIVideoConstraints { (constraints) in
                constraints.aspectRatio = TVIAspectRatio16x9
                constraints.maxFrameRate = 30
                constraints.minFrameRate = TVIVideoConstraintsFrameRateNone
            }
            
            camera = TVICameraCapturer(source: .frontCamera, delegate: self)
            localVideoTrack = TVILocalVideoTrack.init(capturer: camera!, enabled: true, constraints: videoConstraints)
            
            createRoom()
        }
    }

Connect to a room.

    func createRoom() {
        
        if (accessToken == "TWILIO_ACCESS_TOKEN") {
            do {
                accessToken = try TokenUtils.fetchToken(url: tokenUrl)
            } catch {
                print("Failed to fetch access token")
                return
            }
        }
        
        let connectOptions = TVIConnectOptions.init(token: accessToken) { (builder) in
            builder.audioTracks = [self.localAudioTrack!]
            builder.videoTracks = [self.localVideoTrack!]
            builder.roomName = "Test"
        }
        room = TwilioVideo.connect(with: connectOptions, delegate: self)
        print("attempting to connect to room Test")
        
        DispatchQueue.main.async(execute: {
            self.collectionView?.reloadData()
        })
    } 

At the UICollectionViewCell:

    func startPreview() {
        let videoConstraints = TVIVideoConstraints { (constraints) in
            constraints.aspectRatio = TVIAspectRatio16x9
            constraints.maxFrameRate = 30
            constraints.minFrameRate = TVIVideoConstraintsFrameRateNone
        }
        
        camera = TVICameraCapturer(source: .frontCamera, delegate: nil)
        
        localVideoTrack = TVILocalVideoTrack.init(capturer: camera!, enabled: true, constraints: videoConstraints)
        if (localVideoTrack == nil) {
            print("Video track in cell is nil")
        } else {
            localVideoTrack!.addRenderer(previewView)
            print("Video track added to previewView in Cell")
        }
    }

At cellForItemAt indexPath:

//Here I set the delegate for the TVICameraCapturer and TVIVideoView for the cell
                memberCell.previewView.delegate = self
                memberCell.camera.delegate = self

Currently what I expect is for a preview to render in the cell and also on the other participants screen.

What's actually happening is, as if by random, the preview either renders solely on the device and no video data is sent to the room or video is sent to the room but doesn't render on the device.

Currently I am using TwilioVideo 1.3.2

Any suggestions?

[piyushtank]

@louiss98 I apologize for responding late to you question.

An app should not create more than one local video track with camera as source. From the code snippet you have posted, it seems like two localVideoTracks are created : the one while connecting to a Room and another oneUICollectionViewCell's startPreview method. Can you try creating a local video track and share it in your application?

Here is the modified methods :

    func prepareLocalMedia() {
        
        // Create an audio track.
        if (localAudioTrack == nil) {
            localAudioTrack = TVILocalAudioTrack.init()
            
            if (localAudioTrack == nil) {
                print("audio track failed to initialize")
            }
        }
        
        // Create a video track which captures from the camera.
        if (localVideoTrack == nil) {
            let videoConstraints = TVIVideoConstraints { (constraints) in
                constraints.aspectRatio = TVIAspectRatio16x9
                constraints.maxFrameRate = 30
                constraints.minFrameRate = TVIVideoConstraintsFrameRateNone
            }
            
            camera = TVICameraCapturer(source: .frontCamera, delegate: self)
            localVideoTrack = TVILocalVideoTrack.init(capturer: camera!, enabled: true, constraints: videoConstraints)
        }

        createRoom()
    }

    func startPreview() {
        
        // Create a local video track if it it is not created yet
        if (localVideoTrack == nil) {
            let videoConstraints = TVIVideoConstraints { (constraints) in
                constraints.aspectRatio = TVIAspectRatio16x9
                constraints.maxFrameRate = 30
                constraints.minFrameRate = TVIVideoConstraintsFrameRateNone
            }
        
            camera = TVICameraCapturer(source: .frontCamera, delegate: nil)
        
            localVideoTrack = TVILocalVideoTrack.init(capturer: camera!, enabled: true, constraints: videoConstraints)
        }

        // Add renderer on the local video track
        if (localVideoTrack == nil) {
            print("Video track in cell is nil")
        } else {
            localVideoTrack!.addRenderer(previewView)
            print("Video track added to previewView in Cell")
        }
    }

Let me know if you have any questions.

[piyushtank]

@louiss98 Hoping the problem is resolved at your end. I am closing the ticket but feel free to re-open if you observer the issue again.