构建你的第一个Flutter视频通话应用

时间  2019-11-08
标签 构建 第一个 flutter 视频 通话 应用 繁體版
原文   原文链接

做者：张乾泽，声网Agora 工程师android

如对咱们的Flutter插件开发过程感兴趣，或遇到实时音视频相关开发问题，欢迎访问声网 Agora问答版块，发帖与咱们的工程师交流。git

Flutter 1.0 发布也已经有一段时间了，春节后声网 Agora 以 Flutter 插件的形式推出了 Agora Flutter SDK，能够帮助 Flutter 开发者快速实现 Flutter 视频通话应用。github

如今咱们就来看一下如何使用Agora Flutter SDK快速构建一个简单的移动跨平台视频通话应用。数组

环境准备

在Flutter中文网上，关于搭建开放环境的教程已经相对比较完善了，有关IDE与环境配置的过程本文再也不赘述，若Flutter安装有问题，能够执行flutter doctor作配置检查。markdown

本文使用MacOS下的VS Code做为主开发环境。session

目标

咱们但愿可使用Flutter+Agora Flutter SDK实现一个简单的视频通话应用，这个视频通话应用须要包含如下功能，并发

  • 加入通话房间
  • 视频通话
  • 先后摄像头切换
  • 本地静音/取消静音

声网的视频通话是按通话房间区分的，同一个通话房间内的用户均可以互通。为了方便区分，这个演示会须要一个简单的表单页面让用户提交选择加入哪个房间。同时一个房间内能够容纳最多4个用户，当用户数不一样时咱们须要展现不一样的布局。app

想清楚了？动手撸代码了。ide

项目建立

首先在VS Code选择查看->命令面板(或直接使用cmd + shift + P)调出命令面板，输入flutter后选择Flutter: New Project建立一个新的Flutter项目，项目的名字为agora_flutter_quickstart，随后等待项目建立完成便可。函数

如今执行启动->启动调试(或F5)便可看到一个最简单的计数App

看起来咱们有了一个很好的开始:) 接下去咱们须要对咱们新建的项目作一下简单的配置以使其能够引用和使用agora flutter sdk。

打开项目根目录下的pubspec.yaml文件，在dependencies下添加agora_rtc_engine: ^0.9.0，

dependencies:
 flutter:
 sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
 cupertino_icons: ^0.1.2
  # add agora rtc sdk
 agora_rtc_engine: ^0.9.0

dev_dependencies:
 flutter_test:
 sdk: flutter
复制代码

保存后VS Code会自动执行flutter packages get更新依赖。

应用首页

在项目配置完成后，咱们就能够开始开发了。首先咱们须要建立一个页面文件替换掉默认示例代码中的MyHomePage类。咱们能够在lib/src下建立一个pages目录，并建立一个index.dart文件。

若是你已经完成了官方教程Write your first Flutter app，那么如下代码对你来讲就应该不难理解。

class IndexPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new IndexState();
  }
}

class IndexState extends State<IndexPage> {
  @override
  Widget build(BuildContext context) {
  	// UI
  }
  
  onJoin() {
  	//TODO
  }
}
复制代码

如今咱们须要开始在build方法中构造首页的UI。

按上图分解UI后，咱们能够将咱们的首页代码修改以下，

@override
Widget build(BuildContext context) {
return Scaffold(
    appBar: AppBar(
      title: Text('Agora Flutter QuickStart'),
    ),
    body: Center(
      child: Container(
          padding: EdgeInsets.symmetric(horizontal: 20),
          height: 400,
          child: Column(
            children: <Widget>[
              Row(children: <Widget>[]),
              Row(children: <Widget>[
                Expanded(
                    child: TextField(
                  decoration: InputDecoration(
                      border: UnderlineInputBorder(
                          borderSide: BorderSide(width: 1)),
                      hintText: 'Channel name'),
                ))
              ]),
              Padding(
                  padding: EdgeInsets.symmetric(vertical: 20),
                  child: Row(
                    children: <Widget>[
                      Expanded(
                        child: RaisedButton(
                          onPressed: () => onJoin(),
                          child: Text("Join"),
                          color: Colors.blueAccent,
                          textColor: Colors.white,
                        ),
                      )
                    ],
                  ))
            ],
          )),
    ));
}
复制代码

执行F5启动查看，应该能够看到下图，

看起来不错！但也只是看起来不错。咱们的UI如今只能看，还不能交互。咱们但愿能够基于如今的UI实现如下功能，

  1. 为Join按钮添加回调导航到通话页面
  2. 对频道名作检查，若尝试加入频道时频道名为空，则在TextField上提示错误

TextField输入校验

TextField自身提供了一个decoration属性，咱们能够提供一个InputDecoration的对象来标识TextField的装饰样式。InputDecoration里的errorText属性很是适合在咱们这里被拿来使用， 同时咱们利用TextEditingController对象来记录TextField的值，以判断当前是否应该显示错误。所以通过简单的修改后，咱们的TextField代码就变成了这样，

final _channelController = TextEditingController();
	
	/// if channel textfield is validated to have error
	bool _validateError = false;

	@override
	void dispose() {
		// dispose input controller
		_channelController.dispose();
		super.dispose();
	}

	@override
 	Widget build(BuildContext context) {
		...
		TextField(
		  controller: _channelController,
		  decoration: InputDecoration(
		      errorText: _validateError
		          ? "Channel name is mandatory"
		          : null,
		      border: UnderlineInputBorder(
		          borderSide: BorderSide(width: 1)),
		      hintText: 'Channel name'),
		))
		...
	}
	onJoin() {
		// update input validation
		setState(() {
		  _channelController.text.isEmpty
		      ? _validateError = true
		      : _validateError = false;
		});
	}
复制代码

在点击加入频道按钮的时候回触发onJoin回调，回调中会先经过setState更新TextField的状态以作组件重绘。

注意: 不要忘了overridedispose方法在这个组件的生命周期结束时释放_controller。

前往通话页面

到这里咱们的首页基本就算完成了，最后咱们在onJoin中建立MaterialPageRoute将用户导航到通话页面，在这里咱们将获取的频道名做为通话页面构造函数的参数传递到下一个页面CallPage。

import './call.dart';

class IndexState extends State<IndexPage> {
	...
	onJoin() {
		// update input validation
		setState(() {
		  _channelController.text.isEmpty
		      ? _validateError = true
		      : _validateError = false;
		});
		if (_channelController.text.isNotEmpty) {
		  // push video page with given channel name
		  Navigator.push(
		      context,
		      MaterialPageRoute(
		          builder: (context) => new CallPage(
		                channelName: _channelController.text,
		              )));
	}
}
复制代码

通话页面

一样在/lib/src/pages目录下，咱们须要新建一个call.dart文件，在这个文件里咱们会实现咱们最重要的实时视频通话逻辑。首先仍是须要建立咱们的CallPage类。若是你还记得咱们在IndexPage的实现，CallPage会须要在构造函数中带入一个参数做为频道名。

class CallPage extends StatefulWidget {
	/// non-modifiable channel name of the page
	final String channelName;
	
	/// Creates a call page with given channel name.
	const CallPage({Key key, this.channelName}) : super(key: key);
	
	@override
	_CallPageState createState() {
		return new _CallPageState();
	}
 }
  
class _CallPageState extends State<CallPage> {
	@override
	Widget build(BuildContext context) {
		return Scaffold(
		    appBar: AppBar(
		      title: Text(widget.channelName),
		    ),
		    backgroundColor: Colors.black,
		    body: Center(
		        child: Stack(
		      children: <Widget>[],
		    )));
	}
}
复制代码

这里须要注意的是，咱们并不须要把参数在建立state实例的时候传入，state能够直接访问widget.channelName获取到组件的属性。

引入声网SDK

由于咱们在最开始已经在pubspec.yaml中添加了agora_rtc_engine的依赖，所以咱们如今能够直接经过如下方式引入声网sdk。

import 'package:agora_rtc_engine/agora_rtc_engine.dart';
复制代码

引入后便可以使用建立声网媒体引擎实例。在使用声网SDK进行视频通话以前，咱们须要进行如下初始化工做。初始化工做应该在整个页面生命周期中只作一次，所以这里咱们须要overrideinitState方法，在这个方法里作好初始化。

class _CallPageState extends State<CallPage> {
	@override
	void initState() {
		super.initState();
		initialize();
	}
	void initialize() {
		_initAgoraRtcEngine();
		_addAgoraEventHandlers();
	}
	
	/// Create agora sdk instance and initialze
	void _initAgoraRtcEngine() {
		AgoraRtcEngine.create(APP_ID);
		AgoraRtcEngine.enableVideo();
	}
	
	/// Add agora event handlers
   void _addAgoraEventHandlers() {
	AgoraRtcEngine.onError = (int code) {
	  // sdk error
	};
	
	AgoraRtcEngine.onJoinChannelSuccess =
	    (String channel, int uid, int elapsed) {
	  // join channel success
	};
	
	AgoraRtcEngine.onUserJoined = (int uid, int elapsed) {
	  // there's a new user joining this channel
	};
	
	AgoraRtcEngine.onUserOffline = (int uid, int reason) {
	  // there's an existing user leaving this channel
	};
  }
}
复制代码

注意: 有关如何获取声网APP_ID，请参阅声网官方文档。

在以上的代码中咱们主要建立了声网的媒体SDK实例并监听了关键事件，接下去咱们会开始作视频流的处理。

在通常的视频通话中，对于本地设备来讲一共会有两种视频流，本地流与远端流 - 前者须要经过本地摄像头采集渲染并发送出去，后者须要接收远端流的数据后渲染。如今咱们须要动态地将最多4人的视频流渲染到通话页面。

咱们会以大体这样的结构渲染通话页面。

这里和首页不一样的是，放置通话操做按钮的工具栏是覆盖在视频上的，所以这里咱们会使用Stack组件来放置层叠组件。

为了更好地区分UI构建，咱们将视频构建与工具栏构建分为两个方法。

本地流建立与渲染

要渲染本地流，须要在初始化SDK完成后建立一个供视频流渲染的容器，而后经过SDK将本地流渲染到对应的容器上。声网SDK提供了createNativeView的方法以建立容器，在获取到容器而且成功渲染到容器视图上后，咱们就能够利用SDK加入频道与其余客户端互通了。

void initialize() {
		_initAgoraRtcEngine();
		_addAgoraEventHandlers();
		// use _addRenderView everytime a native video view is needed
		_addRenderView(0, (viewId) {
			// local view setup & preview
			AgoraRtcEngine.setupLocalVideo(viewId, 1);
			AgoraRtcEngine.startPreview();
			// state can access widget directly
			AgoraRtcEngine.joinChannel(null, widget.channelName, null, 0);
		});
	}
	/// Create a native view and add a new video session object
	/// The native viewId can be used to set up local/remote view
	void _addRenderView(int uid, Function(int viewId) finished) {
		Widget view = AgoraRtcEngine.createNativeView(uid, (viewId) {
		  setState(() {
		    _getVideoSession(uid).viewId = viewId;
		    if (finished != null) {
		      finished(viewId);
		    }
		  });
		});
		VideoSession session = VideoSession(uid, view);
		_sessions.add(session);
	}
复制代码

注意: 代码最后利用uid与容器信息建立了一个VideoSession对象并添加到_sessions中，这主要是为了视频布局须要，这块稍后会详细触及。

远端流监听与渲染

远端流的监听其实咱们已经在前面的初始化代码中说起了，咱们能够监听SDK提供的onUserJoined与onUserOffline回调来判断是否有其余用户进出当前频道，如有新用户加入频道，就为他建立一个渲染容器并作对应的渲染；如有用户离开频道，则去掉他的渲染容器。

AgoraRtcEngine.onUserJoined = (int uid, int elapsed) {
	  setState(() {
	    _addRenderView(uid, (viewId) {
	      AgoraRtcEngine.setupRemoteVideo(viewId, 1, uid);
	    });
	  });
	};
	
	AgoraRtcEngine.onUserOffline = (int uid, int reason) {
	  setState(() {
	    _removeRenderView(uid);
	  });
	};
	/// Remove a native view and remove an existing video session object
	void _removeRenderView(int uid) {
		VideoSession session = _getVideoSession(uid);
		if (session != null) {
		  _sessions.remove(session);
		}
		AgoraRtcEngine.removeNativeView(session.viewId);
	}
复制代码

注意: _sessions的做用是在本地保存一份当前频道内的视频流列表信息。所以在用户加入的时候，须要建立对应的VideoSession对象并添加到sessions，在用户离开的时候，则须要删除对应的VideoSession实例。

视频流布局

在有了_sessions数组，且每个本地/远端流都有了一个对应的原生渲染容器后，咱们就能够开始对视频流进行布局了。

/// Helper function to get list of native views
	List<Widget> _getRenderViews() {
		return _sessions.map((session) => session.view).toList();
	}
	
	/// Video view wrapper
	Widget _videoView(view) {
		return Expanded(child: Container(child: view));
	}
	
	/// Video view row wrapper
	Widget _expandedVideoRow(List<Widget> views) {
		List<Widget> wrappedViews =
		    views.map((Widget view) => _videoView(view)).toList();
		return Expanded(
		    child: Row(
		  children: wrappedViews,
	));
	}
	
	/// Video layout wrapper
	Widget _viewRows() {
		List<Widget> views = _getRenderViews();
		switch (views.length) {
		  case 1:
		    return Container(
		        child: Column(
		      children: <Widget>[_videoView(views[0])],
		    ));
		  case 2:
		    return Container(
		        child: Column(
		      children: <Widget>[
		        _expandedVideoRow([views[0]]),
		        _expandedVideoRow([views[1]])
		      ],
		    ));
		  case 3:
		    return Container(
		        child: Column(
		      children: <Widget>[
		        _expandedVideoRow(views.sublist(0, 2)),
		        _expandedVideoRow(views.sublist(2, 3))
		      ],
		    ));
		  case 4:
		    return Container(
		        child: Column(
		      children: <Widget>[
		        _expandedVideoRow(views.sublist(0, 2)),
		        _expandedVideoRow(views.sublist(2, 4))
		      ],
		    ));
		  default:
		}
		return Container();
	}
复制代码

工具栏(挂断、静音、切换摄像头)

在实现完视频流布局后，咱们接下来实现视频通话的操做工具栏。工具栏里有三个按钮，分别对应静音、挂断、切换摄像头的顺序。用简单的flex Row布局便可。

/// Toolbar layout
	Widget _toolbar() {
		return Container(
		  alignment: Alignment.bottomCenter,
		  padding: EdgeInsets.symmetric(vertical: 48),
		  child: Row(
		    mainAxisAlignment: MainAxisAlignment.center,
		    children: <Widget>[
		      RawMaterialButton(
		        onPressed: () => _onToggleMute(),
		        child: new Icon(
		          muted ? Icons.mic : Icons.mic_off,
		          color: muted ? Colors.white : Colors.blueAccent,
		          size: 20.0,
		        ),
		        shape: new CircleBorder(),
		        elevation: 2.0,
		        fillColor: muted?Colors.blueAccent : Colors.white,
		        padding: const EdgeInsets.all(12.0),
		      ),
		      RawMaterialButton(
		        onPressed: () => _onCallEnd(context),
		        child: new Icon(
		          Icons.call_end,
		          color: Colors.white,
		          size: 35.0,
		        ),
		        shape: new CircleBorder(),
		        elevation: 2.0,
		        fillColor: Colors.redAccent,
		        padding: const EdgeInsets.all(15.0),
		      ),
		      RawMaterialButton(
		        onPressed: () => _onSwitchCamera(),
		        child: new Icon(
		          Icons.switch_camera,
		          color: Colors.blueAccent,
		          size: 20.0,
		        ),
		        shape: new CircleBorder(),
		        elevation: 2.0,
		        fillColor: Colors.white,
		        padding: const EdgeInsets.all(12.0),
		      )
		    ],
		  ),
		);
	}
	
	void _onCallEnd(BuildContext context) {
		Navigator.pop(context);
	}
	
	void _onToggleMute() {
		setState(() {
		  muted = !muted;
		});
		AgoraRtcEngine.muteLocalAudioStream(muted);
	}
	
	void _onSwitchCamera() {
		AgoraRtcEngine.switchCamera();
	}
复制代码

最终整合

如今两个部分的UI都完成了，咱们接下去要将这两个组件经过Stack组装起来。

@override
	Widget build(BuildContext context) {
		return Scaffold(
		    appBar: AppBar(
		      title: Text(widget.channelName),
		    ),
		    backgroundColor: Colors.black,
		    body: Center(
		        child: Stack(
		      children: <Widget>[_viewRows(), _toolbar()],
		    )));
复制代码

清理

若只在当前页面使用声网SDK，则须要在离开前调用destroy接口将SDK实例销毁。若须要跨页面使用，则推荐将SDK实例作成单例以供不一样页面访问。同时也要注意对原生渲染容器的释放，能够至直接使用removeNativeView方法释放对应的原生容器,

@override
	void dispose() {
		// clean up native views & destroy sdk
		_sessions.forEach((session) {
		  AgoraRtcEngine.removeNativeView(session.viewId);
		});
		_sessions.clear();
		AgoraRtcEngine.destroy();
		super.dispose();
	}
复制代码

最终效果:

总结

Flutter做为新生事物，不免仍是有他不成熟的地方，但咱们已经从他如今的进步上看到了巨大的潜力。从目前的体验来看，只要有充足的社区资源，在Flutter上开发跨平台应用仍是比较舒服的。声网提供的Flutter SDK基本已经覆盖了原生SDK提供的大部分方法，开发体验基本能够和原生SDK开发保持一致。此次也是基于学习的态度写下了这篇文章，但愿对于想要使用Flutter开发RTC应用的同窗有所帮助。

文章中讲解的完整代码均可以在 Github 找到。

如在开发过程当中遇到问题，请移步 RTC 开发者社区，本文做者会及时回复。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程