【Agorans 征文】RN Flutter RTC SDK

前言

近些年，移动端跨平台框架发展迅猛，国内外科技公司分别推出自己的跨平台框架：

• Alibaba——Weex

• Faceboo——React Native

• Google——Flutter

这些跨平台框架虽然都有着一统天下的野心，但是选取的“武器”不尽相同：

1. Weex 和 ReactNative 分别基于 V8 和 JSCore 引擎来实现JS 与 Native 的通信，渲染层面都是依赖于具体平台原生渲染。

2. 而 Flutter 作为近期的黑马，独树一帜地使用了亲儿子 Dart，通过 Dart 编译为汇编源代码，渲染则通过 Skia 引擎自行绘制，真正做到了跨平台。

不过我们这次并不是深入探讨它们的底层原理，所以点到为止。

Agora 顺应时代潮流，为了方便广大开发者在跨平台框架中快速实现音视频通话，推出了 React Native SDK 和 Flutter SDK，同时这两个 SDK 最新都迎来了一次大的升级，版本号为3.0.1，相较于之前的版本，此次升级主要有以下优势：

1. 全面适配 Native 3.0.1 SDK，支持多频道

2. API 设计与 Native 对齐，并明确了参数和回调类型

3. 全面支持异步编程（Promise / Future）

4. Android 支持 TextureView 渲染

React Native SDK

基础信息

https://github.com/AgoraIO-Community/react-native-agora

API Doc：https://agoraio-community.github.io/react-native-agora/globals.html

相关集成文档，可以查阅README。

示例代码

• 导包

    import RtcEngine, {RtcLocalView, RtcRemoteView, VideoRenderMode} from 'react-native-agora'

• 初始化

    async function init() {
        // 创建引擎实例
        const engine = await RtcEngine.create(appId)
        // 启用视频模块
        await engine.enableVideo()

        // 监听本地用户进入成功
        engine.addListener('JoinChannelSuccess', (channel, uid, elapsed) => {})
        // 监听远端用户加入
        engine.addListener('UserJoined', (uid, elapsed) => {})
        // 监听远端用户离开
        engine.addListener('UserOffline', (uid, reason) => {})
    }

• 加入频道

    engine.joinChannel(token, channelName, null, 0)

• 离开频道

    engine.leaveChannel()

• 渲染本地视频

    <RtcLocalView.SurfaceView
        renderMode={VideoRenderMode.Hidden} />

• 渲染远端视频

    <RtcRemoteView.SurfaceView
        uid={uid}
        renderMode={VideoRenderMode.Hidden} />

运行演示

Flutter SDK

基础信息

https://github.com/AgoraIO/Flutter-SDK

Pub：https://pub.dev/packages/agora_rtc_engine

API Doc：https://agoraio.github.io/Flutter-SDK/index.html

相关集成文档，可以查阅README。

示例代码

• 导包

    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;

• 初始化

    Future<void> init() async {
        // 创建引擎实例
        final engine = await RtcEngine.create(APP_ID);
        // 启用视频模块
        await engine.enableVideo();

        engine.setEventHandler(RtcEngineEventHandler(
            // 监听本地用户加入成功
            joinChannelSuccess: (channel, uid, elapsed) {}, 
            // 监听远端用户加入
            userJoined: (uid, elapsed) {}, 
            // 监听远端用户离开
            userOffline: (uid, elapsed) {}
        ));

• 加入频道

    engine.joinChannel(token, channelName, null, 0);

• 离开频道

    engine.leaveChannel();

• 渲染本地视频

    RtcLocalView.SurfaceView()

• 渲染远端视频

    RtcRemoteView.SurfaceView(uid: uid)

运行演示

https://github.com/AgoraIO-Community/Agora-Flutter-Quickstart