androidflutterlive-streamingagora.io

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


Solution

  • 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