Videocall loading Agora Uikit (Flutter)

Question

I am trying to add video calling functionality to my flutter app and have chosen Agora. Everything seems to work perfect, but the moment I start the video call it keeps loading. Even if I try to get two users to join the same channel, nothing seems to work. I have tried variations of the widget, but nothing.

This is the code I am using.

import 'dart:convert';
import 'package:agora_uikit/agora_uikit.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart';

class VideoCall extends StatefulWidget {
  String channelName = "test";

  VideoCall({required this.channelName});
  @override
  _VideoCallState createState() => _VideoCallState();
}

class _VideoCallState extends State<VideoCall> {
  late final AgoraClient _client;
  bool _loading = true;
  String tempToken = "token";

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

  Future<void> getToken() async {
    String link =
        "http://agora-node-tokenserver-1.dianagil2.repl.co/access_token?channelName=${widget.channelName}";

    Response _response = await get(Uri.parse(link));
    Map data = jsonDecode(_response.body);
    setState(() {
      tempToken = data["token"];
    });
    _client = AgoraClient(
        agoraConnectionData: AgoraConnectionData(
          appId: "a936e47b75744dbf892ff34345001530",
          tempToken: tempToken,
          channelName: widget.channelName,

        ),
        enabledPermission: [Permission.camera, Permission.microphone]);
    Future.delayed(Duration(seconds: 1)).then(
          (value) => setState(() => _loading = false),
    );

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: _loading
            ? Center(
          child: CircularProgressIndicator(),
        )
            : Stack(
          children: [
            AgoraVideoViewer(
              client: _client,
            ),
            AgoraVideoButtons(client: _client)
          ],
        ),
      ),
    );
  }
}

Answer 1

EDIT: You might have some issues in Android Emulator. Try in real device.

You could try this.

Add this in pubspec.yaml

permission_handler: ^10.2.0
agora_uikit: ^1.2.1

Create a new dart file and paste the below code.

import 'package:flutter/material.dart';
import 'package:agora_uikit/agora_uikit.dart';

class Videocall extends StatefulWidget {
  String channelName = "test";

  Videocall({Key? key, required this.channelName}) : super(key: key);

  @override
  State<Videocall> createState() => _VideocallState();
}

class _VideocallState extends State<Videocall> {
  String appId = 'add your appId here';
  late String tempToken;
  late final AgoraClient client;
  bool showUI = false;
  @override
  void initState() {
    super.initState();
    getToken();
  }

  Future<void> getToken() async {
     String link =
        "http://agora-node-tokenserver-1.dianagil2.repl.co/access_token?channelName=${widget.channelName}";

    Response _response = await get(Uri.parse(link));
    Map data = jsonDecode(_response.body);
    
     //NOTE: DO NOT CALL setState here
      tempToken = data["token"];

    client = AgoraClient(
      agoraConnectionData: AgoraConnectionData(
        appId: appId,
        channelName: widget.channelName,
        tempToken: tempToken,
        uid: 0,
      ),
    );
    initAgora();
  }

  void initAgora() async {
    await client.initialize();
    showUI = true;
    //Add setState here to update UI
    setState(() {});
  }

  @override
  void dispose() async {
    await client.release();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: showUI
            ? Stack(
                children: [
                  AgoraVideoViewer(client: client),
                  AgoraVideoButtons(client: client),
                ],
              )
            : const Center(
                child: CircularProgressIndicator(),
              ),
      ),
    );
  }
}

Open the new Page from your desired page:

GestureDetector(
    onTap: () async {
       await [
          Permission.camera,
          Permission.microphone
       ].request();
  Navigator.of(context).push(
      MaterialPageRoute(
         builder: (context) =>
             const Videocall(channelName:'channel01'),
      ),
 );
},

child: const Icon(
    Icons.video_camera_front_outlined,
    color: Colors.white,
    size: 32,
    ),
)

Answer 2

Initialise agora client like this

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

  void initAgora() async {
    await _client.initialize();
  }

if it does not work even after this then check the following

1. Check your manifest file for permission
2. check application level build.gradle and add jitpack
3. Try without temptoken