Agora local view showing blank screen on Flutter

Question

I'm trying to integrate the Agora SDK, i've been able to set it up to function but the only problem is that the local view is blank until i do a hot restart, after hot restart everything fucntions fine, remote view is working perefectly, I've been trying to debug this issue to no avail, below is my code.

    import 'dart:async';
    import 'package:flutter/material.dart';
    import 'package:permission_handler/permission_handler.dart';
    
    import 'package:agora_rtc_engine/rtc_engine.dart';
    import 'package:agora_rtc_engine/rtc_local_view.dart' as RtcLocalView;
    import 'package:agora_rtc_engine/rtc_remote_view.dart' as RtcRemoteView;
    
    const appId = "e660ebb529e34d838fedc01ed1a1b5e4";
    const token =
        "006e660ebb529e34d838fedc01ed1a1b5e4IABB69OL6buUPHAgM4dq+hpsHKMLCooStMhXyvSdauF2eNzDPrsAAAAAEADHF4BY49MwYQEAAQDi0zBh";
    
    void main() => runApp(MaterialApp(home: MyApp()));
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State {
      int _remoteUid;
      RtcEngine _engine;
    
      @override
      void initState() {
        super.initState();
        initAgora();
      }
    
      Future initAgora() async {
        // retrieve permissions
        await [Permission.microphone, Permission.camera].request();
    
        //create the engine
        _engine = await RtcEngine.create(appId);
        await _engine.enableVideo();
        _engine.setEventHandler(
          RtcEngineEventHandler(
            joinChannelSuccess: (String channel, int uid, int elapsed) {
              print("local user $uid joined");
            },
            userJoined: (int uid, int elapsed) {
              print("remote user $uid joined");
              setState(() {
                _remoteUid = uid;
              });
            },
            userOffline: (int uid, UserOfflineReason reason) {
              print("remote user $uid left channel");
              setState(() {
                _remoteUid = null;
              });
            },
          ),
        );
    
        await _engine.joinChannel(token, "firstchannel", null, 0);
      }
    
      // Create UI with local view and remote view
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('Agora Video Call'),
          ),
          body: Stack(
            children: [
              Center(
                child: _remoteVideo(),
              ),
              Align(
                alignment: Alignment.topLeft,
                child: Container(
                  width: 100,
                  height: 100,
                  child: Center(
                    child: RtcLocalView.SurfaceView(),
                  ),
                ),
              ),
            ],
          ),
        );
      }
    
      Widget _renderLocalPreview() {
        return RtcLocalView.SurfaceView();
      }
    
      // Display remote user's video
      Widget _remoteVideo() {
        if (_remoteUid != null) {
          return RtcRemoteView.SurfaceView(uid: _remoteUid);
        } else {
          return Text(
            'Please wait for remote user to join',
            textAlign: TextAlign.center,
          );
        }
      }
    }

   

Answer 1

Make sure the Uid in Rtc remote view is the same with the user went live and the user joined to live

RtcRemoteView.SurfaceView( uid: , channelId:, )

Answer 2

After struggling with this issue for a while i realised where the problem was coming from. I needed to included a boolean variable to check if local user has joined the channel before trying to show the local preview. Apparaently the Agora SDK is designed to show local preview only when user has joined channel.

Widget _renderLocalPreview() {
    if (_localUserJoined) {
      return RtcLocalView.SurfaceView();
    } else {
      return Text(
        'Joining Channel, Please wait.....',
        textAlign: TextAlign.center,
      );
    }
  }