Agora SwiftUI OpenLive Integration issues - swift

Question

I'm trying to implement Agora to my existing SwiftUI app, I used this tutorial to implement it https://github.com/AgoraIO/Basic-Video-Call/tree/master/One-to-One-Video/Agora-iOS-Tutorial-SwiftUI-1to1
My Intention is to have a OpenLive video calls where I have only one Broadcaster and many audience to view it (similar to Instagram Live). unfortunately, I only found documentation on how to make a 1-1 video call and I was not able to let Audience join the channel and preview the live video stream.
This is my code:
import SwiftUI
import AgoraRtcKit
var isCurrentStreamer = true
struct AgoraView : View {
#EnvironmentObject var userDefaultData: UserDefaultDetails
#State var isLocalInSession = true
#State var isLocalAudioMuted = false
#State var isRemoteInSession = true
#State var isRemoteVideoMuted = false
let localCanvas = VideoCanvas()
let remoteCanvas = VideoCanvas()
private let videoEngine = VideoEngine()
private var rtcEngine: AgoraRtcEngineKit {
get {
return videoEngine.agoraEngine
}
}
var body: some View {
ZStack() {
VideoSessionView(
backColor: Color("c2"),
backImage: Image("big_logo"),
hideCanvas: false,
canvas: isCurrentStreamer ? localCanvas:remoteCanvas
).edgesIgnoringSafeArea(.all)
}.onAppear {
self.agoraLive(role: self.userDefaultData.AgoraRole, channelID: self.userDefaultData.currentAuctionId)
}
}
}
fileprivate extension AgoraView {
func agoraLive(role: AgoraClientRole, channelID: String){
// init AgoraRtcEngineKit
videoEngine.AgoraView = self
rtcEngine.enableDualStreamMode(false)
rtcEngine.setVideoEncoderConfiguration(
AgoraVideoEncoderConfiguration(
size: AgoraVideoDimension640x360,
frameRate: .fps15,
bitrate: AgoraVideoBitrateStandard,
orientationMode: .adaptative
)
)
if role == .broadcaster {
rtcEngine.enableVideo()
addLocalSession()
rtcEngine.startPreview()
}else{
addLocalSession()
rtcEngine.startPreview()
}
rtcEngine.joinChannel(byToken: Token, channelId: channelID, info: nil, uid: 0, joinSuccess: nil)
// Step 6, set speaker audio route
rtcEngine.setEnableSpeakerphone(true)
}
func addLocalSession() {
let videoCanvas = AgoraRtcVideoCanvas()
if self.userDefaultData.AgoraRole == .broadcaster {
videoCanvas.view = localCanvas.rendererView
}else {
videoCanvas.view = remoteCanvas.rendererView
}
videoCanvas.renderMode = .hidden
if isCurrentStreamer {
rtcEngine.setupLocalVideo(videoCanvas)
}else{
rtcEngine.setupRemoteVideo(videoCanvas)
}
}
}
Thanks.

Answer 1

It looks like you aren't hooking up the remote video view correctly. In order to see a remote user's video, you need to create a AgoraRtcVideoCanvas with that remote user's UID, and then pass it into setupRemoteVideo. What you're doing is trying to set up a remote view before you've even joined the call, and have no idea who is in it.
You need to implement the remoteVideoStateChangedOfUid callback on the AgoraRtcEngineDelegate in order to get the remote user's UID and hook it up to your canvas correctly.
Something like this:
extension AgoraView: AgoraRtcEngineDelegate {
func rtcEngine(_ engine: AgoraRtcEngineKit, remoteVideoStateChangedOfUid uid: UInt, state: AgoraVideoRemoteState, reason: AgoraVideoRemoteStateReason, elapsed: Int) {
if state == .starting {
let videoCanvas = AgoraRtcVideoCanvas()
videoCanvas.view = remoteCanvas.rendererView
videoCanvas.uid = uid
videoCanvas.renderMode = .hidden
rtcEngine.setupRemoteVideo(videoCanvas)
}
}
}
If you did the above as written, you'd have to set the AgoraView as the rtcEngine's delegate when you initialize it, as well.
If you're using the demo app provided, VideoEngine is currently set up as the delegate, and is doing this in firstRemoteVideoDecodedOfUid (which is now deprecated). It's likely that this code is not correctly hooked up to your SwiftUI views.