Cannot initialize agora video on flutter web

[JasonHoku]

Version of the agora_rtc_engine

6.3.0

Platforms affected

• Android
• iOS
• macOS
• Windows
• Web

Steps to reproduce

Install agora, add script tag, confirm script is loading, start video session

Expected results

Video session starts on web

Actual results

Video canvas displays loading animation indefinitely.

[1:53:21 PM:165][Iris warning]:RtcEngine_enableWebSdkInteroperability_5039d15 not supported in this platform!

Code sample

Code sample

import 'dart:async';
import 'package:agora_rtc_engine/agora_rtc_engine.dart';
import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:http/http.dart' as http;

class CallPage extends StatefulWidget {
  final String channelName;
  final int agoraUid;
  final String? question;

  const CallPage({
    Key? key,
    required this.channelName,
    required this.agoraUid,
    required this.question,
  }) : super(key: key);

  @override
  State<CallPage> createState() => _CallPageState();
}

class _CallPageState extends State<CallPage> {
  int? _remoteUid;
  bool _localUserJoined = false;
  late RtcEngine _engine;
  late RtcEngine createIrisApiEngine;

  static const appId = "x";

  String _currentStep = 'Introduction';
  int _currentSpeaker = 1;
  Timer? _timer;

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

    print("Starting Call Page");
    print(widget.agoraUid);
    print(widget.channelName);

    Future.microtask(() {
      initAgora();
    });
  }

  Future<void> initializeMobile() async {
    await [Permission.microphone, Permission.camera].request();

    _engine = createAgoraRtcEngine();
    await _engine.initialize(const RtcEngineContext(appId: appId));

    await _engine.enableWebSdkInteroperability(true);
    await _engine.enableVideo();

    _engine.registerEventHandler(
      RtcEngineEventHandler(
        onJoinChannelSuccess: (RtcConnection connection, int elapsed) {
          debugPrint("local user ${connection.localUid} joined");
          setState(() {
            _localUserJoined = true;
          });
          startIntroduction();
        },
        onUserJoined: (RtcConnection connection, int remoteUid, int elapsed) {
          debugPrint("remote user $remoteUid joined");
          setState(() {
            _remoteUid = remoteUid;
          });
        },
        onUserOffline: (RtcConnection connection, int remoteUid,
            UserOfflineReasonType reason) {
          debugPrint("remote user $remoteUid left channel");
          setState(() {
            _remoteUid = null;
          });
        },
        onTokenPrivilegeWillExpire: (RtcConnection connection, String token) {
          debugPrint(
              '[onTokenPrivilegeWillExpire] connection: ${connection.toJson()}, token: ${Null}');
        },
      ),
    );

    await _engine.setClientRole(role: ClientRoleType.clientRoleBroadcaster);
    await _engine.startPreview();

    await _engine.joinChannel(
      token: "null",
      channelId: widget.channelName,
      uid: widget.agoraUid,
      options: const ChannelMediaOptions(),
    );
  }

  Future<void> initAgora() async {
    await [Permission.microphone, Permission.camera].request();
    initializeMobile();
  }

  @override
  void dispose() {
    super.dispose();
    _dispose();
  }

  Future<void> _dispose() async {
    await _engine.leaveChannel();
    await _engine.release();
  }

  void startIntroduction() {
    setState(() {
      _currentStep = 'Introduction';
      _currentSpeaker = 1;
    });

    _timer = Timer(const Duration(seconds: 10), () {
      setState(() {
        _currentSpeaker = 2;
      });

      _timer = Timer(const Duration(seconds: 10), () {
        startRecording();
      });
    });
  }

  Future<void> startRecording() async {
    await http.post(
      Uri.parse('/start-recording?channelName=${widget.channelName}'),
      body: {'uuid': widget.agoraUid.toString()},
    );

    setState(() {
      _currentStep = 'Question';
      _currentSpeaker = 1;
    });

    _timer = Timer(const Duration(seconds: 20), () {
      setState(() {
        _currentSpeaker = 2;
      });

      _timer = Timer(const Duration(seconds: 20), () {
        stopRecording();
      });
    });
  }

  Future<void> stopRecording() async {
    await http.post(
      Uri.parse('/stop-recording?channelName=${widget.channelName}'),
      body: {'uuid': widget.agoraUid.toString()},
    );

    setState(() {
      _currentStep = 'Discussion';
    });

    _timer = Timer(const Duration(seconds: 60), () {
      Navigator.pop(context);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Positioned(
            top: 20,
            right: 20,
            child: SizedBox(
              width: 150,
              height: 200,
              child: _localUserJoined
                  ? AgoraVideoView(
                      controller: VideoViewController(
                        rtcEngine: _engine,
                        canvas: VideoCanvas(uid: 0),
                      ),
                    )
                  : const CircularProgressIndicator(),
            ),
          ),
          Positioned(
            bottom: 20,
            right: 20,
            child: SizedBox(
              width: 150,
              height: 200,
              child: _remoteVideo(),
            ),
          ),
          Positioned(
            top: 50,
            left: 20,
            child: Text(
              _currentStep == 'Introduction'
                  ? 'User $_currentSpeaker Introduce Yourself'
                  : _currentStep == 'Question'
                      ? 'User $_currentSpeaker Talk about ${widget.question}'
                      : 'Open Discussion',
              style: const TextStyle(fontSize: 20, color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }

  Widget _remoteVideo() {
    if (_remoteUid != null) {
      return AgoraVideoView(
        controller: VideoViewController.remote(
          rtcEngine: _engine,
          canvas: VideoCanvas(uid: _remoteUid),
          connection: RtcConnection(channelId: widget.channelName),
        ),
      );
    } else {
      return const Text(
        'Please wait for remote user to join',
        textAlign: TextAlign.center,
      );
    }
  }
}

Screenshots or Video

Screenshots / Video demonstration

Logs

Logs

The platformViewRegistry getter is deprecated and will be removed in a future release. Please import it from `dart:ui_web` instead.
[1:53:21 PM:053][Iris log]:[callIrisApiAsync][start]
{"event":"RtcEngine_initialize_0320339","data":"{\"context\":{\"appId\":\"3fe738c682f64246a43f735718b3b446\"}}","data_size":56,"result":"","length":[],"buffer_count":0}
[1:53:21 PM:057][Iris warning]:input Unknown areaCode
13:53:21:58 %cAgora-SDK [DEBUG]:
13:53:21:60 %cAgora-SDK [INFO]:
13:53:21:61 %cAgora-SDK [DEBUG]:
13:53:21:135 %cAgora-SDK [DEBUG]:
13:53:21:136 %cAgora-SDK [INFO]:
13:53:21:136 %cAgora-SDK [DEBUG]:
13:53:21:157 %cAgora-SDK [INFO]:
13:53:21:157 %cAgora-SDK [DEBUG]:
13:53:21:158 %cAgora-SDK [DEBUG]:
13:53:21:158 %cAgora-SDK [INFO]:
13:53:21:159 %cAgora-SDK [DEBUG]:
13:53:21:159 %cAgora-SDK [DEBUG]:
[1:53:21 PM:160][Iris log]:[callIrisApiAsync][result] RtcEngine_initialize_0320339 ret 0
[1:53:21 PM:161][Iris log]:[callIrisApiAsync][start]
{"event":"RtcEngine_setAppType","data":"{\"appType\":4}","data_size":13,"result":"","length":[],"buffer_count":0}
13:53:21:162 %cAgora-SDK [DEBUG]:
[1:53:21 PM:162][Iris log]:[callIrisApiAsync][result] RtcEngine_setAppType ret 0
[1:53:21 PM:163][Iris log]:[callIrisApiAsync][start]
{"event":"RtcEngine_enableVideo","data":"{}","data_size":2,"result":"","length":[],"buffer_count":0}
[1:53:21 PM:165][Iris log]:[callIrisApiAsync][start]
{"event":"RtcEngine_enableWebSdkInteroperability_5039d15","data":"{\"enabled\":true}","data_size":16,"result":"","length":[],"buffer_count":0}
[1:53:21 PM:165][Iris warning]:RtcEngine_enableWebSdkInteroperability_5039d15 not supported in this platform!
[1:53:21 PM:166][Iris log]:[callIrisApiAsync][result] RtcEngine_enableWebSdkInteroperability_5039d15 ret -4
[1:53:21 PM:167][Iris log]:[callIrisApiAsync][result] RtcEngine_enableVideo ret 0
Error: AgoraRtcException(-4, null)
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 297:3  throw_
packages/agora_rtc_engine/src/binding/agora_rtc_engine_impl.dart 4262:7      enableWebSdkInteroperability
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50           <fn>
dart-sdk/lib/async/zone.dart 1661:54                                         runUnary
dart-sdk/lib/async/future_impl.dart 162:18                                   handleValue
dart-sdk/lib/async/future_impl.dart 838:44                                   handleValueCallback
dart-sdk/lib/async/future_impl.dart 867:13                                   _propagateToListeners
dart-sdk/lib/async/future_impl.dart 643:5                                    [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 713:7                                    callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                             _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                              _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7           <fn>

Flutter Doctor output

Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.19.6, on Microsoft Windows [Version 10.0.19045.4291], locale en-US)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[√] Chrome - develop for the web
[!] Visual Studio - develop Windows apps (Visual Studio Build Tools 2017 15.9.26)
    X Visual Studio 2019 or later is required.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[!] Android Studio (not installed)
[√] VS Code (version 1.88.1)
[√] Connected device (3 available)
[√] Network resources

! Doctor found issues in 3 categories.

[littleGnAl]

The function enableWebSdkInteroperability is not supported on the web, you should add a platform check for this function. e.g.,

if (!kIsWeb) {
  await _engine.enableWebSdkInteroperability(true);
}

[JasonHoku]

That actually did seem to help!

Though now I'm met with a couple of new error messages but only in the web implementation (working on Android and iOS):

[client-c2244] join number: 1, Joining channel failed, rollback AgoraRTCException: AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: flag: 4096, message: AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: invalid vendor key, can not find appid

[Iris error]:data: {"retry":false,"csIp":"[ip redacted]","desc":["invalid vendor key, can not find appid"]}
AgoraRTCException: AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: flag: 4096, message: AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: invalid vendor key, can not find appid

[littleGnAl]

[Iris error]:data: {"retry":false,"csIp":"[ip redacted]","desc":["invalid vendor key, can not find appid"]}
AgoraRTCException: AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: flag: 4096, message: AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: invalid vendor key, can not find appid

It is most likely there's an issue with your appid, I think you need to raise a ticket to Agora Support to see what's gone wrong.

[JasonHoku]

I found in another issue post that the error message can also mean that the token was invalid.

Consulting our backend developer and setting the appropriate token & appId was sufficient to remedy the error. Though it may be prudent to add to the error message that it could also be an invalid token.

Thank you for the guidance!

[JasonHoku]

I'm happy to close this issue. Thanks for the help.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please raise a new issue.