使用Agora SDK进行直播

在这里，我们需要使用Agora Engine初始化视频和音频，对于评论，我们使用的是Agora RTM。 我们有一个功能可以查看加入直播场景中的直播用户，还可以静音、切换摄像头以及用一个按钮结束直播。布局如右图。

你可以将此文件 作为完整的dart文件进行参考，我将说明这里使用哪个文件及使用原因。

Future<void> initialize() async {

  await _initAgoraRtcEngine();
  _addAgoraEventHandlers();
  await AgoraRtcEngine.enableWebSdkInteroperability(true);
  await AgoraRtcEngine.setParameters(
      '''{\"che.video.lowBitRateStreamParameter\":{\"width\":320,\"height\":180,\"frameRate\":15,\"bitRate\":140}}''');
  await AgoraRtcEngine.joinChannel(null, widget.channelName, null, 0);
}

/// Create agora sdk instance and initialize
Future<void> _initAgoraRtcEngine() async {
  await AgoraRtcEngine.create(APP_ID);
  await AgoraRtcEngine.enableVideo();
}

/// Add agora event handlers
void _addAgoraEventHandlers() {

  AgoraRtcEngine.onJoinChannelSuccess = (
    String channel,
    int uid,
    int elapsed,
  ) async{

    final documentId = widget.channelName;
    channelName= documentId;
    FireStoreClass.createLiveUser(name: documentId,id: uid,time: widget.time,image:widget.image);
    // The above line create a document in the firestore with username as documentID

    await Wakelock.enable();
    // This is used for Keeping the device awake. Its now enabled

  };

  AgoraRtcEngine.onLeaveChannel = () {
    setState(() {
      _users.clear();
    });
  };

  AgoraRtcEngine.onUserJoined = (int uid, int elapsed) {
    setState(() {
      _users.add(uid);
    });
  };

  AgoraRtcEngine.onUserOffline = (int uid, int reason) {
    setState(() {
      _users.remove(uid);
    });
  };
}

我们正在初始化Agora Engine，在initState()内部调用initialize函数。 我还在使用Wakelock软件包来使设备保持唤醒状态，否则，它会在过特定时间后锁定。 另外，别忘了在结束直播时禁用Wakelock。

@override
void initState() {
  super.initState();
  // initialize agora sdk
  initialize(); // Initialise agora engine
  _createClient(); // initialise agora RTM
}

为Agora RTM创建一个客户端，我们还需要在initState()中添加该函数。

另外，我们还需获取Rendered Widget来显示画面，为此使用以下命令

AgoraRenderWidget(0, local: true, preview: true),

现在，Layout都已经准备好，但我们所需的只是主机用户的屏幕。 要启动视频频道，我们需要channelName，它也应该是唯一的，以便没有其他人拥有相同的channelName造成交叉混淆。 因为之前我们已经将用户名设为唯一，所以我们把用户名作为创建频道的频道名称。

现在，让我们利用Agora RTM搭建评论功能。 我已经在主机文件的initState()中调用了一个函数createClient()。 此函数定义了一个为用户发送消息的RTM通道。

void _createClient() async {
  _client =
  await AgoraRtmClient.createInstance('<Your App ID Here>');
  _client.onMessageReceived = (AgoraRtmMessage message, String peerId) {
    _log(user: peerId,  info: message.text, type: 'message');
  };
  _client.onConnectionStateChanged = (int state, int reason) {
    if (state == 5) {
      _client.logout();
     setState(() {
        _isLogin = false;
      });
    }
  };
  await _client.login(null, widget.channelName );
  _channel = await _createChannel(widget.channelName);
  await _channel.join();
}

别忘了在AgoraRtmClient.createInstance()中添加你的App ID。

现在要想知道有多少用户加入直播，我会利用channel.getMembers().length上的RTM功能，此功能可以返回加入该频道的用户数的信息。 让我们看一下代码：

Future<AgoraRtmChannel> _createChannel(String name) async {
  AgoraRtmChannel channel = await _client.createChannel(name);
  channel.onMemberJoined = (AgoraRtmMember member) async {
    var img = await FireStoreClass.getImage(username: member.userId);
    userMap.putIfAbsent(member.userId, () => img);
    var len;
    _channel.getMembers().then((value) {
      len = value.length;
      setState(() {
        userNo= len-1 ;
      });
    });

    _log(info: 'Member joined: ',  user: member.userId,type: 'join');
  };
  channel.onMemberLeft = (AgoraRtmMember member) {
    var len;
    _channel.getMembers().then((value) {
      len = value.length;
      setState(() {
        userNo= len-1 ;
      });
    });

  };
  channel.onMessageReceived =
      (AgoraRtmMessage message, AgoraRtmMember member) {
    _log(user: member.userId, info: message.text,type: 'message');
  };
  return channel;
}

void _log({String info,String type,String user}) {
  
  var image = userMap[user];
  Message m = new Message(
      message: info, type: type, user: user, image: image);
  setState(() {
   _infoStrings.insert(0, m);
  }); 
}

当他/她加入频道后，我会在此处获取用户的头像并将其添加到地图中，这样我们就无需在用户评论时一次又一次调用 image函数。 这样，就可以仅一次就能从服务器中获取图像了。

每当用户加入频道时，聊天框中都会显示一条消息，代表已加入频道。 每当有人发送评论时，另一条带有用户图像、用户名都会连同消息一起显示出来。

我认为这是主持人频道中所使用的主要功能，你可以在此处查看完整设计。

我们接下来要加入画面，即用户想要观看实时直播时的画面。 因此，除了主持人之外，我们在这里进行了一些更改。 此处，我们不需要使用麦克风和摄像头图标，因为我们不需要它们的反馈。 然后就可以看一下加入画面的设计了。

Future<void> _initAgoraRtcEngine() async {
  await AgoraRtcEngine.create(APP_ID);
  await AgoraRtcEngine.enableVideo();
  await AgoraRtcEngine.muteLocalAudioStream(muted);  // Changes
  await AgoraRtcEngine.enableLocalVideo(!muted);     // Changes 
}

Widget heartPop(){
  final size = MediaQuery.of(context).size;
  final confetti = <Widget>[];
  for (var i = 0; i < _numConfetti; i++) {
    final height = _random.nextInt(size.height.floor());
    final width = 20;
    confetti.add(HeartAnim(height % 200.0,
        width.toDouble(),1));
  }


  return Container(
    child: Padding(
      padding: const EdgeInsets.only(bottom:20),
      child: Align(
        alignment: Alignment.bottomRight,
        child: Container(
          height: 400,
          width: 200,
          child: Stack(
            children: confetti,
          ),
        ),
      ),
    ),
  );
}

void popUp() async{
  setState(() {
    heart=true;
  });
  Timer(Duration(seconds: 4), () =>
  {
    _timer.cancel(),
    setState(() {
      heart=false;
    })
  });
  _timer = Timer.periodic(Duration(milliseconds: 125), (Timer t) {
    setState(() {
      _height += _random.nextInt(20);
    });
  });
}