Agora is showing black screen at the audience side but the voice is working

I'm using the following code to join to some agora channel as an audience:

  options = ChannelMediaOptions( 
          clientRoleType: ClientRoleType.clientRoleAudience,
           channelProfile: ChannelProfileType.channelProfileLiveBroadcasting, 
          token: widget.config.token,
       ); 
await agoraEngine.joinChannel( 
      token: widget.config.token,   
    channelId: widget.config.channel,     
  options: options,      
 uid: widget.config.userId,     
); 

but unfortunately I can't see the host video but I can hear host's voice BTW I'm joining as host and initialization using like that

@override
void initState() {
super.initState();
setupVideoSDKEngine();
}


@override
Widget build(BuildContext context) {
return Scaffold(
body: !_isJoined
? Center(
child: Text("loading"),
)
:Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(border: Border.all()),
child: Center(child: _videoPanel()),
)
);
}

Widget _videoPanel() {
if (widget.config.isHost) {
// Show local video preview
return AgoraVideoView(
controller: VideoViewController(
rtcEngine: agoraEngine,
canvas: VideoCanvas(uid: 0),
),
);
} else {
return AgoraVideoView(
controller: VideoViewController.remote(
rtcEngine: agoraEngine,
canvas: VideoCanvas(uid: widget.config.userId),
connection: RtcConnection(channelId: widget.config.channel),
),
);
}
}



void setupVideoSDKEngine() async {
agoraEngine = createAgoraRtcEngine);
await agoraEngine
.initialize(const RtcEngineContext(appId: AgoraUtils.agoraAppId));
// if (widget.config.isHost) {
await [Permission.microphone, Permission.camera].request();
// }
// if (widget.config.isHost) {
//create an instance of the Agora engine`
await agoraEngine.enableVideo();
// }`
// Register the event handler
agoraEngine.registerEventHandler(
RtcEngineEventHandler(
onJoinChannelSuccess: (RtcConnection connection, int elapsed) {
// showMessage("Local user uid:${connection.localUid} joined the channel");
print("onJoinChannelSuccess");
setState(() {
_isJoined = true;
});
},
onUserJoined: (RtcConnection connection, int remoteUid, int elapsed) {
// showMessage("Remote user uid:$remoteUid joined the channel");
print("onUserJoined");
},
onUserOffline: (RtcConnection connection, int remoteUid,
UserOfflineReasonType reason) {
// showMessage("Remote user uid:$remoteUid left the channel");
print("onUserOffline");
},
onError: (err, msg) {
print("onError $msg");
},
),
);
join();
}
void join() async {
// Set channel options
ChannelMediaOptions options;// Set channel profile and client role
if (widget.config.isHost) {
  options = ChannelMediaOptions(
      clientRoleType: ClientRoleType.clientRoleBroadcaster,
      channelProfile: ChannelProfileType.channelProfileLiveBroadcasting,
      token: widget.config.token,
  );
  await agoraEngine.startPreview();
} else {
  options = ChannelMediaOptions(
      clientRoleType: ClientRoleType.clientRoleAudience,
      channelProfile: ChannelProfileType.channelProfileLiveBroadcasting,
      token: widget.config.token,
  );
}

await agoraEngine.joinChannel(
  token: widget.config.token,
  channelId: widget.config.channel,
  options: options,
  uid: widget.config.userId,
);

}

how to fix that issue know that I'm using agora_rtc_engine 6.1.0 I it on web using https://webdemo.agora.io/basicVideoCall/index.html and it worked correctly but on mobile I can't see the video

I was expecting to see host's video and voice

Just noticed that the agora_rtc_engine is not currently working on the audience side but fortunately agora_uikit is working for the audience side here are the steps I followed to make it work for the audience side:

1- I added agora_uikit to pubspec.yaml

  agora_uikit: ^1.3.1

2- for the audience side I changed the code to be as follow:

    late AgoraClient client;
await [Permission.microphone, Permission.camera].request();//important
    client = AgoraClient(
            agoraChannelData: AgoraChannelData(
            clientRoleType: ClientRoleType.clientRoleAudience,
              channelProfileType: ChannelProfileType.channelProfileLiveBroadcasting,
          ),
            agoraConnectionData: AgoraConnectionData(
              appId: AgoraUtils.agoraAppId,
              channelName: widget.config.channel,
              uid: widget.config.userId,
              tempToken: widget.config.token
            ),
          );
          await client.initialize();
          setState(() {
            _isJoined = true;
          });

    void build(BuildContext context){
return Scaffold(
    body: SafeArea(
            child: Stack(
              children: [
                AgoraVideoViewer(client: client),
              ],
            ),
          )

);
}

then everything worked as expected