Flutter高仿微信-第35篇-单聊-视频通话

最新推荐文章于 2024-09-26 09:47:59 发布
最新推荐文章于 2024-09-26 09:47:59 发布
阅读量454 收藏 1
点赞数
分类专栏： Flutter高仿微信 文章标签： flutter 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maoning20080808/article/details/128014604
版权

Flutter高仿微信系列共59篇，从Flutter客户端、Kotlin客户端、Web服务器、数据库表结构、Xmpp即时通讯服务器、视频通话服务器、腾讯云服务器全面讲解。

 详情请查看

效果图：

目前市场上第三方视频接口的价格高的吓人

视频通话价格：
标清（SD） 14元/千分钟
高清（HD） 28元/千分钟
超高清（Full HD）63元/千分钟
2K  112元/千分钟
4K  252元/千分钟

这里的视频通话不接第三方sdk，自己实现的视频服务器。

详情请参考Flutter高仿微信-第29篇-单聊 ， 这里只是提取视频通话的部分代码。

实现代码：

/**
 * Author : wangning
 * Email : maoning20080809@163.com
 * Date : 2022/9/25 14:46
 * Description : 发起视频请求页面
 */

class VideoCallWidget extends StatefulWidget {
  static String tag = 'video_call_widget';
  //视频账号
  final String videoPeerId;
  final String mediaFlag;

  String host = CommonUtils.BASE_IP;

  VideoCallWidget({required this.videoPeerId, required this.mediaFlag});

  @override
  _VideoCallState createState() => _VideoCallState();
}

class _VideoCallState extends State<VideoCallWidget> {
  Signaling? _signaling;
  String? _selfId;
  final RTCVideoRenderer _localRenderer = RTCVideoRenderer();
  final RTCVideoRenderer _remoteRenderer = RTCVideoRenderer();
  bool _inCalling = false;
  Session? _session;
  DesktopCapturerSource? selected_source_;
  bool _waitAccept = false;
  bool _isExist = false;
  UserBean? userBean;
  //麦克风打开
  bool isMic = true;
  //扬声器
  bool isSpeaker = true;

  @override
  initState() {
    super.initState();
    initRenderers();
    _connect(context);

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      Timer(Duration(seconds: 1),(){
        _invitePeer(context, widget.videoPeerId, false);
        _inCalling = false;
        setState(() {

        });
      });
    });

    loadUser();
    _playVoice();

  }

  void loadUser () async{
    userBean = await UserRepository.getInstance().findUserByAccount(widget.videoPeerId);
    if(userBean != null){
      setState(() {
      });
    }
  }

  initRenderers() async {
    await _localRenderer.initialize();
    await _remoteRenderer.initialize();
  }

  @override
  deactivate() {
    super.deactivate();
    _signaling?.close();
    _localRenderer.dispose();
    _remoteRenderer.dispose();
    _timer?.cancel();
    _stopVoice();
  }

  void _connect(BuildContext context) async {
    LogUtils.d("connect开始 ${widget.mediaFlag}");
    _signaling ??= Signaling(widget.host, context)..connect();
    LogUtils.d("connect结束");

    _signaling?.onSignalingStateChange = (SignalingState state) {
      LogUtils.d("video_call_sample onSignalingStateChange1： ${state}");
      switch (state) {
        case SignalingState.ConnectionClosed:
        case SignalingState.ConnectionError:
        case SignalingState.ConnectionOpen:
          break;
      }
    };

    _signaling?.onCallStateChange = (Session session, CallState state) async {
      LogUtils.d("video_call_sample onCallStateChange2：${state} , _waitAccept = ${_waitAccept}");
      switch (state) {
        case CallState.CallStateNew:
          setState(() {
            _session = session;
          });
          break;
        case CallState.CallStateRinging:
          bool? accept = await _showAcceptDialog();
          if (accept!) {
            _accept();
            setState(() {
              _inCalling = true;
              _processTimer();
            });
          } else {
            _reject();
          }
          break;
        case CallState.CallStateBye:
          LogUtils.d("video_call_sample 挂断：：${_waitAccept}, ${mounted}");

          if(!_isExist){
            Navigator.pop(context);
          }

          setState(() {
            _localRenderer.srcObject = null;
            _remoteRenderer.srcObject = null;
            _inCalling = false;
            _session = null;
          });
          break;
        case CallState.CallStateInvite:
          _waitAccept = true;
          LogUtils.d("video_call_sample 邀请开始：：${_waitAccept}");
          break;
        case CallState.CallStateConnected:
          _stopVoice();
          setState(() {
            _inCalling = true;
            _processTimer();
          });

          break;
        case CallState.CallStateRinging:
      }
    };

    _signaling?.onPeersUpdate = ((event) {
      setState(() {
        _selfId = event['self'];
        LogUtils.d("video_call_sample 我的账号：${_selfId}");
      });
    });

    _signaling?.onLocalStream = ((stream) {
      LogUtils.d("video_call_sample onLocalStream 3：");
      _localRenderer.srcObject = stream;
      setState(() {});
    });

    _signaling?.onAddRemoteStream = ((_, stream) {
      LogUtils.d("video_call_sample onAddRemoteStream 4：");
      _remoteRenderer.srcObject = stream;
      setState(() {});
    });

    _signaling?.onRemoveRemoteStream = ((_, stream) {
      LogUtils.d("video_call_sample onRemoveRemoteStream 5 ：");
      _remoteRenderer.srcObject = null;
    });
  }

  Future<bool?> _showAcceptDialog() {
    return showDialog<bool?>(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text("视频通话"),
          content: Text("是否接受好友的视频请求?"),
          actions: <Widget>[
            TextButton(
              child: Text("拒绝"),
              onPressed: () => Navigator.of(context).pop(false),
            ),
            TextButton(
              child: Text("接受"),
              onPressed: () {
                Navigator.of(context).pop(true);
              },
            ),
          ],
        );
      },
    );
  }

  //开始播放视频声音
  void _playVoice(){
    final List<String> soundList = CommonUtils.getSoundList();

    int selectedVideoCallId = SpUtils.getIntDefaultValue(CommonUtils.SETTING_VIDEO_CALL_ID, 2);
    bool videoCallSwitch = SpUtils.getBoolDefaultValue(CommonUtils.SETTING_VIDEO_CALL_SWITCH, true);

    //如果设置视频通话不响铃
    if(!videoCallSwitch){
      return;
    }
    //设置了视频通话响铃，但是选择无声音
    if(videoCallSwitch && selectedVideoCallId == 0){
      return;
    }
    String sound = "${soundList[selectedVideoCallId]}";
    AudioPlayer.getInstance().playAsset("sounds/${sound}.mp3", isLoop:true, callback:(data){
      LogUtils.d("播放视频声音：${data}");
    });

  }

  void _stopVoice(){
    AudioPlayer.getInstance().stop();
  }

  //显示邀请页面
  Widget _showInvateWidget(){
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          //SizedBox(height: 30,),
          Container(
            alignment: AlignmentDirectional.center,
            margin: EdgeInsets.only(top: 18),
            child: Column(
              children: [
                //Image.asset(CommonUtils.getBaseIconUrlPng("wc_chat_speaker_open"), width: 28, height: 28,),
                Text("等待对方接受邀请.", style: TextStyle(fontSize: 18, color: Colors.black),),
                SizedBox(height: 30,),
                CommonAvatarView.showBaseImage(userBean?.avatar??"", 100, 100),
                SizedBox(height: 10,),
                Text("${userBean?.nickName}", style: TextStyle(fontSize: 26, color: Colors.black),),
              ],
            ),
          ),

          Container(
            margin: EdgeInsets.only(bottom: 40),
            alignment: AlignmentDirectional.center,
            child: FloatingActionButton(
              child: Icon(Icons.call_end),
              backgroundColor: Colors.pink,
              onPressed: _hangUp,
            ),
          ),

        ],
      ),
    );
  }

  _invitePeer(BuildContext context, String peerId, bool useScreen) async {
    if (_signaling != null && peerId != _selfId) {
      LogUtils.d("video_call_sample 邀请：${peerId} -  ${widget.mediaFlag}");
      _signaling?.invite(peerId, 'video', widget.mediaFlag, useScreen);
    }
  }

  _accept() {
    LogUtils.d("video_call_sample 接受：${_session}");
    if (_session != null) {
      _signaling?.accept(_session!.sid);
    }
  }

  _reject() {
    LogUtils.d("video_call_sample 拒绝：${_session}");
    if (_session != null) {
      _signaling?.reject(_session!.sid);
    }
  }

  _hangUp() {
    LogUtils.d("video_call_sample 挂起：${_session} , ${_session?.sid}");
    if (_session != null) {
      _signaling?.bye(_session!.sid);
    }
    _isExist = true;
    Navigator.pop(context);
  }

  _switchCamera() {
    LogUtils.d("video_call_sample 切换摄像头：${_session}");
    _signaling?.switchCamera();
  }

  _muteMic() {
    LogUtils.d("video_call_sample 音频：${_session}");
    _signaling?.muteMic();
    isMic = !isMic;
    setState(() {
    });
  }

  enableSpeakerphone() {
    LogUtils.d("show_video_call 外放：_signaling = ${_signaling}");
    _signaling?.enableSpeakerphone();
    isSpeaker =!isSpeaker;
    setState(() {
    });
  }

  Timer? _timer;
  //计时多少秒
  int currentTimer = 0;
  //转换结果时间
  String resultTimer = "00:00";
  void _processTimer(){
    if(_inCalling && widget.mediaFlag == CommonUtils.MEDIA_FLAG_VOICE){
      _timer = Timer.periodic(Duration(seconds: 1), (timer) {
        currentTimer++;
        resultTimer = WnDateUtils.changeSecondToMMSS(currentTimer);
        setState(() {
        });
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: WnAppBar.getAppBar(context, Text(widget.mediaFlag == CommonUtils.MEDIA_FLAG_VIDEO? '视频通话':'语音通话')),

      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: _inCalling
          ? SizedBox(
              width: double.infinity,
              child: Row(
                  children: <Widget>[
                    //扬声器图标：  https://www.iconfont.cn/search/index?searchType=icon&q=扬声器
                    getSwitchCameraWidget(),
                    getHangUpWidget(),
                    getMicWidget(),
                    getSpeakerWidget(),
                  ]))
          : null,
      body: _inCalling
          ? OrientationBuilder(builder: (context, orientation) {
              return Container(
                child: Stack(children: <Widget>[

                  Positioned(
                      left: 0.0,
                      right: 0.0,
                      top: 0.0,
                      bottom: 0.0,
                      child: Offstage(
                        offstage: widget.mediaFlag == CommonUtils.MEDIA_FLAG_VOICE,
                        child:Container(
                          margin: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
                          width: MediaQuery.of(context).size.width,
                          height: MediaQuery.of(context).size.height,
                          child: RTCVideoView(_remoteRenderer),
                          decoration: BoxDecoration(color: Colors.black54),
                        ) ,
                      ),
                  ),


                  Positioned(
                    left: 20.0,
                    top: 20.0,
                    child: Offstage(
                      offstage: widget.mediaFlag == CommonUtils.MEDIA_FLAG_VOICE,
                      child: Container(
                        width: orientation == Orientation.portrait ? 90.0 : 120.0,
                        height:
                        orientation == Orientation.portrait ? 120.0 : 90.0,
                        child: RTCVideoView(_localRenderer, mirror: true),
                        decoration: BoxDecoration(color: Colors.black54),
                      ),
                    ),
                  ),

                  Positioned(
                    left: 20.0,
                    right: 20.0,
                    top: 30.0,
                    child: Offstage(
                      offstage: widget.mediaFlag == CommonUtils.MEDIA_FLAG_VIDEO,
                      child: Container(
                        width: orientation == Orientation.portrait ? 190.0 : 220.0,
                        height:
                        orientation == Orientation.portrait ? 220.0 : 190.0,
                        child: Column(
                          children: [
                            Text("${resultTimer}", style: TextStyle(fontSize: 20, color: Colors.grey.shade500),),
                            SizedBox(height: 40,),
                            CommonAvatarView.showBaseImage(userBean?.avatar??"", 80, 80),
                            SizedBox(height: 8,),
                            Text("${userBean?.nickName}", style: TextStyle(fontSize: 18, color: Colors.black),),
                          ],
                        ),
                      ),
                    ),
                  )

                ]),
              );
            })
          : _showInvateWidget(),
    );
  }




  //切换摄像头
  Widget getSwitchCameraWidget(){
    return Expanded(child: Container(
      width: 80,
      height: 100,
      child: Column(
        children: [
          FloatingActionButton(
            child: const Icon(Icons.switch_camera),
            onPressed: _switchCamera,
          ),
          SizedBox(height: 10,),
          Text("切换摄像头", style: TextStyle(fontSize: 12, color: Colors.white),),
        ],
      ),
    ));
  }

  //挂断
  Widget getHangUpWidget(){
    return Expanded(child: Container(
      width: 80,
      height: 100,
      child: Column(
        children: [
          FloatingActionButton(
            child: Icon(Icons.call_end),
            backgroundColor: Colors.pink,
            onPressed: _hangUp,
          ),
          SizedBox(height: 10,),
          Text("挂 断", style: TextStyle(fontSize: 12, color: Colors.white),),
        ],
      ),
    ));
  }

  //麦克风
  Widget getMicWidget(){
    return Expanded(child: Container(
      width: 80,
      height: 100,
      child: Column(
        children: [
          FloatingActionButton(
            child: Icon(isMic?Icons.mic:Icons.mic_off),
            onPressed: _muteMic,
          ),
          SizedBox(height: 10,),
          Text(isMic?"麦克风已开":"麦克风已关", style: TextStyle(fontSize: 12, color: Colors.white),),
        ],
      ),
    ));
  }

  //扬声器
  Widget getSpeakerWidget(){
    return Expanded(child: Container(
      width: 80,
      height: 100,
      child: Column(
        children: [
          FloatingActionButton(
            child: Image.asset(CommonUtils.getBaseIconUrlPng(isSpeaker?"wc_chat_speaker_open":"wc_chat_speaker_close"), width: 28, height: 28,),
            onPressed: enableSpeakerphone,
          ),
          SizedBox(height: 10,),
          Text(isSpeaker?"扬声器已开":"扬声器已关", style: TextStyle(fontSize: 12, color: Colors.white),),
        ],
      ),
    ));
  }

}

六毛六66
关注
专栏目录
flutter高仿微信项目实战
06-11
Flutter案例视频教程，从入门到具体项目实战，Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生...flutter高仿微信项目实战是一个使用flutter技术仿微信界面开发的完整案例,同时提供代码下载。
flutter版高仿微信70
08-10
9. **插件开发**：如果项目中有特殊需求，可能需要编写或使用第三方插件来扩展 Flutter 的功能。 10. **测试与调试**：理解如何进行单元测试、集成测试以及使用 Flutter DevTools 进行调试。 文件名 `...
flutter仿微信界面.zip
05-13
初学flutter，写了一个仿微信UI界面 详细链接 https://blog.csdn.net/Lazy_Goat/article/details/116754679
用 Flutter 仿写微信“发现 + 我”的页面
AI研习社
12-12 437
↓推荐关注↓发现页面实现这里我们仿照微信的发现页面用 Flutter 类实现这页面的简单布局及每个 cell 的点击效果及点击每条 cell 之后跳转到一个新的页面。这里我们分几步分别来实...
开源之旅： Flutter 实战微信样式应用 —— flutter_wechat
gitblog_00323的博客
08-23 349
开源之旅： Flutter 实战微信样式应用 —— flutter_wechat flutter_wechat???????????? 利用 Flutter 来高仿微信(WeChat) 7.0.0+ App，代码规范惊为天人、注释详解令人发指、细节处理精益求精、核心功能配备文档、接近98%还原度的原生App视觉体验。代码不多，注释多。（持续更新，敬请期待，欢迎Star和Fork…）项目地址:https://git...
Flutter高仿微信-第48篇-群聊-图片
maoning20080808的专栏
11-26 608
在群聊页面，点击图片进入相册选择一张照片，如果照片小于500k，直接发送，如果大于500k，先进行图片压缩，然后上传到web服务器，再发送给群id。当用户群接收到图片消息后，先下载图片，再保存到本地数据库，然后刷新页面。
视频教程-flutter基础教程-flutter
weixin_31155531的博客
05-28 267
flutter基础教程 捷智云视频会议系统联合创始人，国内首本Flutter...
flutter仿微信
xiaoxnn的博客
03-11 383
使用flutter做了一个仿微信界面demo。 主要是学习使用flutter的组件、布局、、资源以及插件的使用。 传送门
Flutter 仿微信长按发送语音
09-04
引用 package： 文件路径：path_provider 录制与振幅：audio_waveforms
Best-Flutter-UI-Templates：对所有人完全免费。 内置的Flutter Dart
02-17
【标题】"Best-Flutter-UI-Templates" 是一个开源项目，它提供了各种高质量的 Flutter 用户界面（UI）模板，这些模板对所有开发者都是免费的。这个项目的主要目的是帮助开发者快速构建美观、跨平台的应用程序，同时...
flutter-embedded-linux:Flutter的嵌入式Linux嵌入式
03-12
Flutter的嵌入式Linux嵌入式 创建该项目是为了开发的非官方嵌入式Linux嵌入。 该嵌入程序着重于嵌入式Linux系统用例。 它还基于Windows的Flutter桌面实现，并且具有一些独特的功能可在嵌入式系统中使用。 目的与...
用Flutter模仿了一个的微信App
08-10
最近在学习Flutter开发App, 在网上找到一张微信的Ui设计图, 就用Flutter模仿了一个的微信App, 全都是app静态布局与部分页面交互,没有调用后台接口
Flutter仿微信
最新发布
yan1915766026的博客
09-26 411
本项目为flutter仿微信项目，实现一些基础功能，如各种tab页的切换、列表页、路由跳转、基础组件的使用等flutter 3.19版本（推荐3.16、3.19、3.23版本）dart 3.4版本（目前最新3.5+）按照上述内容，可以搭建基础框架，后续会出每个tab页的具体实现过程的文档。
Flutter高仿微信-视频演示
maoning20080808的专栏
11-25 499
Flutter高仿微信视频演示功能点包括：注册、登录、个人信息、朋友圈、单聊(文本、表情、语音、图片、小视频、视频通话、语音通话、红包、转账)，群聊、二维码支付、充值、添加好友等众多功能。
Flutter高仿微信-第4篇-主页-消息
maoning20080808的专栏
11-22 500
消息栏主要显示用户的单聊和群聊信息，当收到好友发来消息，底部和聊天记录都有小红点提示，可以长按清空消息。
Flutter高仿微信-第3篇-主页
maoning20080808的专栏
11-22 860
右上角点击加号弹出：发起群聊、添加好友、扫一扫、收付款。底部：消息、通讯录、我的
|flutter仿微信界面聊天室
大灰狼的小绵羊哥哥的博客
05-14 3152
1、项目介绍 Flutter是目前比较流行的跨平台开发技术，凭借其出色的性能获得很多前端技术爱好者的关注，比如阿里闲鱼，美团，腾讯等大公司都有投入相关案例生产使用。 flutter_chatroom项目是基于Flutter+Dart+chewie+photo_view+image_picker等技术开发的跨平台仿微信app聊天界面应用，实现了消息/表情发送、图片预览、长按菜单、红包/小视频/朋友圈等功能。 2、技术框架 使用技术：Flutter 1.12.13/Dart 2....
(flutter版本、kotlin版本)高仿微信数据表
maoning20080808的专栏
11-21 175
(flutter版本、kotlin版本)高仿微信数据表， MySQL数据库版本：8.0.28 MySQL Workbench 版本：8.0
flutter 实战项目 仿微信
baidu_40537062的博客
04-15 1137
下面的专题讲得不错，github上的项目代码，本人亲测是可以跑通的 flutter 微信项目专题 wechat_demo - github
大前端技术选型：Native、React-Native、Flutter、微信小程序对比
"大前端产品选型.pptx" 是一份关于大前端技术选型的演示文稿，主要探讨了在开发跨平台移动应用时如何选择适合的技术框架，包括Native原生iOS、Android、React-Native、Flutter以及微信小程序。这份文档由JohnChen在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

六毛六66

你的鼓励是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值