preface

Continuation of a few, describes anyRTC RTC combat and some common API usage. AnyRTC audio and video communication, all technologies: Android, IOS, Web, UNIApp, mini app, Windows SDK, and then a few days ago packaged the Flutter SDK, today we can talk about the use of the Flutter SDK.

Developer’s Official website

Introduction to the

As requested by our customers, the SDK of Flutter is also packaged. The SDK will be more and more perfect. You can check out the Flutter site first. Fully inheriting the advantages of Flutter, it is more convenient to use:

  • Powerful performance, smooth

  • Excellent Routing design

  • The singleton pattern

  • UI cross-platform stability

  • Optional static language, excellent language features

  • Reduce development costs across multiple platforms; Plugins are supported to access native system calls

Making the address

GitHub:github.com/anyRTC/Flut…

Flutter SDK

The following describes video communication using the Flutter SDK.

1. Create an Engine instance

//* AppID * anyRTC specifies the AppID issued by the App developer. Each project should have a unique App ID. If you do not have an App ID in Your developer kit, please apply for a new App ID engine = await rtcengine. create("Your APPID") from anyRTC official website (https://www.anyrtc.io);Copy the code

2. Set RTC callback

Engine. setEventHandler(RtcEngineEventHandler(joinChannelSuccess: (String channel, String uid, int elapsed) { print('joinChannelSuccess ${channel} ${uid}'); setState(() { _joined = true; }); }, userJoined: (String uid, int elapsed) { print('userJoined ${uid}'); setState(() { _remoteUid = uid; }); }, userOffline: (String uid, UserOfflineReason reason) { print('userOffline ${uid}'); setState(() { _remoteUid = null; }); }, remoteAudioStateChanged: (String uid,AudioRemoteState state, AudioRemoteStateReason reason, int elapsed){ print('remoteAudioStateChanged zhao ${uid} -${state} - ${reason} -${elapsed}'); }, remoteVideoStateChanged: (String uid,VideoRemoteState state, VideoRemoteStateReason reason, int elapsed){ print('remoteVideoStateChanged zhao ${uid} -${state} - ${reason} -${elapsed}'); }, localAudioStateChanged: (AudioLocalState state, AudioLocalError error){ print('localAudioStateChanged zhao ${state} - ${error} '); }, localVideoStateChanged: (LocalVideoStreamState localVideoState, LocalVideoStreamError error){ print('localVideoStateChanged zhao ${localVideoState} - ${error} '); }, remoteAudioStats: (RemoteAudioStats stats){ print('RemoteAudioStats zhao ${stats.audioLossRate}'); }, remoteVideoStats: (RemoteVideoStats stats){ print('RemoteVideoStats zhao ${stats.decoderOutputFrameRate} ==${stats.rendererOutputFrameRate}'); }, rtcStats:(RtcStats stats) { print('RtcStats zhao ${stats.totalDuration} ==${stats.rxBytes}'); }, networkTypeChanged: (NetworkType type){ print('networktype zhao ${NetworkType.WIFI} '); }));Copy the code

Above is the RTC callback, list the more commonly used, you can add their own needs according to the needs of the callback, in which logic processing.

3. Start the video

await engine.enableVideo();
Copy the code

4. Turn on external amplifier (speaker)

await engine.setEnableSpeakerphone(true);
Copy the code

Can according to their own needs, optional.

5. Join the room

In this case I set the user UID to a random 6 digit number.

Note: The user UID cannot be 0, and the UID of two users who join the same holiday cannot be the same; otherwise, they cannot communicate with each other.

_randomBit(int len) {// UID random number String scopeF = '123456789'; // first String scopeC = '0123456789'; String result = "; for (int i = 0; i < len; i++) { if (i == 0) { result = scopeF[Random().nextInt(scopeF.length)]; } else { result = result + scopeC[Random().nextInt(scopeC.length)]; } } return result; }Copy the code

Join the room:

var userId = _randomBit(6);
await engine.joinChannel(null, 'ChannelID', userId);
Copy the code
  • Token: null
  • ChannelID: Set by yourself
  • UserId: random number

From here you can make a basic voice call, requiring two devices and entering the same room

Implement render video in build method

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Stack(
          children: [
            Center(
              child: _switch ? _renderRemoteVideo() : _renderLocalPreview(),
            ),
            Align(
              alignment: Alignment.topLeft,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
                child: GestureDetector(
                  onTap: () {
                    setState(() {
                      _switch = !_switch;
                    });
                  },
                  child: Center(
                    child:
                    _switch ? _renderLocalPreview() : _renderRemoteVideo(),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
Copy the code

Switch between remote and local preview boxes

  Widget _renderLocalPreview() {
    if (_joined) {
      return RtcLocalView.TextureView();
    } else {
      return Text(
        'Please join channel first',
        textAlign: TextAlign.center,
      );
    }
  }

  Widget _renderRemoteVideo() {
    if (_remoteUid != "") {
      return RtcRemoteView.TextureView(uid: _remoteUid);
    } else {
      return Text(
        'Please wait remote user join',
        textAlign: TextAlign.center,
      );
    }
  }
Copy the code

conclusion

There is a demo on Github. If you are interested in the Flutter SDK, you are welcome to check out the improvements that need to be made. Your support is our biggest motivation!