marking
/
WGShare.Mobile.Flutter
19
0
Fork 0
Code Pull Requests Actions Releases Activity

pageview预加载及缓存优化，视频可以多view同时渲染

This commit is contained in:
fuenmao 2024-12-06 13:53:14 +08:00
parent 5669b0123c
commit 19c98c5173
5 changed files with 218 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
wgshare/lib/pages/metting/meeting_main_logic.dart
View File

@ -503,6 +503,7 @@ class MeetingMainLogic extends GetxController with RequestToolMixin{
await state.rctEngine.value?.initialize(RtcEngineContext( await state.rctEngine.value?.initialize(RtcEngineContext(
appId: state.appId, appId: state.appId,
channelProfile: ChannelProfileType.channelProfileLiveBroadcasting, channelProfile: ChannelProfileType.channelProfileLiveBroadcasting,
// logConfig:const LogConfig()
)); ));
// 音频模块默认启动，所以这里不再调用启动方法 // 音频模块默认启动，所以这里不再调用启动方法

36
wgshare/lib/pages/metting/meeting_main_view.dart
View File

@ -224,21 +224,25 @@ class MeetingMainPageState extends State<MeetingMainPage> {
visible: state.pageState.value == 1, visible: state.pageState.value == 1,
child: null != state.rctEngine.value child: null != state.rctEngine.value
? MeetingMainVideoComponent( ? MeetingMainVideoComponent(
rtcEngine: state.rctEngine.value!, rtcEngine: state.rctEngine.value!,
channelId: state.roomNumber.value, channelId: state.roomNumber.value,
isOpenCamera: state.isOpenCamera.value, isOpenCamera: state.isOpenCamera.value,
remoteUid: state.remoteUid.value, remoteUid: state.remoteUid.value,
users: state.cacheUsers.value users: state.cacheUsers.value
.where((user) => .where((user) =>
user.enableCamera == true) user.enableCamera == true)
.toList(), .toList(),
onHangUpTap: () { onHangUpTap: () {
logic.hangUpVideo(); logic.hangUpVideo();
}, },
onPageViewIndexChange: (index) { onPageViewIndexChange: (index) {
if(index == 0){
}, state.floating.value?.open(context);
) }else{
state.floating.value?.close();
}
},
)
: Container()), : Container()),
// 共享屏幕 // 共享屏幕
@ -1391,7 +1395,7 @@ class MeetingMainPageState extends State<MeetingMainPage> {
? AgoraVideoView( ? AgoraVideoView(
controller: VideoViewController( controller: VideoViewController(
rtcEngine: state.rctEngine.value!, rtcEngine: state.rctEngine.value!,
canvas: const VideoCanvas(uid: 0), canvas: const VideoCanvas(uid: 0, setupMode: VideoViewSetupMode.videoViewSetupAdd),
), ),
) )
: const CircularProgressIndicator(), : const CircularProgressIndicator(),

434
wgshare/lib/pages/metting/video/meeting_main_video_view.dart
View File

@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:liquid_progress_indicator_v2/liquid_progress_indicator.dart'; import 'package:liquid_progress_indicator_v2/liquid_progress_indicator.dart';
import 'package:preload_page_view/preload_page_view.dart';
import 'package:wgshare/common/store/user_store.dart'; import 'package:wgshare/common/store/user_store.dart';
import '../../../common/models/meeting_room_user.dart'; import '../../../common/models/meeting_room_user.dart';
@ -44,256 +45,18 @@ class _MeetingMainVideoComponentState extends State<MeetingMainVideoComponent>{
return Stack( return Stack(
alignment: Alignment.center, alignment: Alignment.center,
children: [ children: [
PageView( PreloadPageView.builder(
scrollDirection: Axis.horizontal, preloadPagesCount: 2,
reverse: false, itemCount: 2,
controller: PageController( itemBuilder: (BuildContext context, int position) => returnPage(position),
initialPage: 0, controller: PreloadPageController(initialPage: 0),
viewportFraction: 1, onPageChanged: (int position) {
keepPage: true, state.pageIndex.value = position;
), widget.onPageViewIndexChange(position);
physics: const BouncingScrollPhysics(),
pageSnapping: true,
onPageChanged: (index) {
state.pageIndex.value = index;
widget.onPageViewIndexChange(index);
}, },
children: <Widget>[
Stack(
alignment: Alignment.center,
children: [
widget.remoteUid != ""
? AgoraVideoView(
controller: VideoViewController(
rtcEngine: widget.rtcEngine,
canvas: const VideoCanvas(uid: 0)
),
)
: const CircularProgressIndicator(),
Positioned(
bottom: 110,
child: GestureDetector(
child: Image.asset(
'assets/images/meeting_main_hang_up.png',
width: 50.w,
height: 50.h,
),
onTap: () {
widget.onHangUpTap();
},
),
),
Positioned(
top: 16,
right: 16,
child: Container(
height: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: ColorUtil.Color_0_0_0_96),
padding: const EdgeInsets.only(left: 12, right: 12),
child: Row(
children: [
Text(
'正在讲话：',
style: TextStyle(
fontSize: 10.sp,
color: ColorUtil.Color_185_184_184),
),
Image.asset(
'assets/images/meeting_main_speak2.png',
width: 20.w,
height: 20.h,
),
Text(
'晓晓',
style: TextStyle(
fontSize: 10.sp,
color: ColorUtil.Color_185_184_184),
)
],
),
),
),
/// 右上角小窗
/*Visibility(
visible: widget.isOpenCamera,
child: Positioned(
top: 58,
right: 13,
child: Stack(
children: [
SizedBox(
width: 120,
height: 150,
child: Center(
child: widget.isOpenCamera
? AgoraVideoView(
controller: VideoViewController(
rtcEngine: widget.rtcEngine,
canvas: const VideoCanvas(uid: 0),
),
)
: const CircularProgressIndicator(),
),
),
Positioned(
left: 4,
bottom: 4,
child: Row(
children: [
Image.asset(
'assets/images/meeting_main_own.png',
width: 20.w,
height: 15.h,
),
Container(
height: 15,
margin: const EdgeInsets.only(left: 4),
padding:
const EdgeInsets.only(left: 4, right: 4),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2),
color: ColorUtil.Color_0_0_0_96),
child: Row(
children: [
*/ /*Image.asset(
'assets/images/meeting_main_microphone_open.png',
width: 13.w,
height: 14.h,
),
SizedBox(width: 4.w),*/ /*
Text(
UserStore
.to.userInfoEntity.value!.userName,
style: TextStyle(
fontSize: 10.sp,
color: ColorUtil.Color_185_184_184),
)
],
),
)
],
),
)
],
),
),
)*/
],
),
Container(
color: ColorUtil.Color_57_57_57,
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 0.8,
crossAxisSpacing: 0),
itemCount: widget.users.length,
itemBuilder: (BuildContext ctx, index) {
return Stack(
children: [
widget.users[index].uid ==
UserStore.to.userInfoEntity.value!.uid
? AgoraVideoView(
controller: VideoViewController(
rtcEngine: widget.rtcEngine,
canvas: const VideoCanvas(uid: 0)
),
)
: AgoraVideoView(
controller: VideoViewController.remote(
rtcEngine: widget.rtcEngine,
canvas: VideoCanvas(
uid: int.tryParse(
widget.users[index].uid)),
connection: RtcConnection(
channelId: widget.channelId),
),
),
Positioned(
left: 4,
bottom: 4,
child: Row(
children: [
Image.asset(
'assets/images/meeting_main_own.png',
width: 24.w,
height: 24.h,
),
Container(
height: 20,
margin: const EdgeInsets.only(left: 4),
padding:
const EdgeInsets.only(left: 4, right: 4),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2),
color: ColorUtil.Color_0_0_0_96),
child: widget.users[index].enableMicr == true
? Row(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
SizedBox(
width: 20.w,
height: 20.h,
child: LiquidCustomProgressIndicator(
value:
widget.users[index]
.volume ??
0.0,
valueColor:
const AlwaysStoppedAnimation(
ColorUtil
.Color_2_177_136),
backgroundColor:
ColorUtil.Color_255_255_255,
direction: Axis.vertical,
shapePath: ViewSvgPath
.getMicrpphonePath()),
),
Text(
widget.users[index].userName,
style: TextStyle(
fontSize: 12.sp,
color: ColorUtil
.Color_255_255_255),
)
],
)
: Row(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Image.asset(
'assets/images/meeting_main_microphone_open.png',
width: 20.w,
height: 20.h,
),
Text(
widget.users[index].userName,
style: TextStyle(
fontSize: 12.sp,
color: ColorUtil
.Color_255_255_255),
)
],
),
)
],
),
)
],
);
}),
),
],
), ),
/// pageview 指示器
Positioned( Positioned(
bottom: 16, bottom: 16,
child: Row( child: Row(
@ -324,4 +87,179 @@ class _MeetingMainVideoComponentState extends State<MeetingMainVideoComponent>{
], ],
); );
} }
/// 然后对应页数的界面
Widget returnPage(int position){
var pageList = [];
/// 大屏
pageList.add(Stack(
alignment: Alignment.center,
children: [
widget.remoteUid != ""
? AgoraVideoView(
controller: VideoViewController(
rtcEngine: widget.rtcEngine,
canvas: VideoCanvas(uid: int.tryParse(widget.remoteUid), setupMode: VideoViewSetupMode.videoViewSetupAdd)
),
)
: const CircularProgressIndicator(),
Positioned(
bottom: 110,
child: GestureDetector(
child: Image.asset(
'assets/images/meeting_main_hang_up.png',
width: 50.w,
height: 50.h,
),
onTap: () {
widget.onHangUpTap();
},
),
),
Positioned(
top: 16,
right: 16,
child: Container(
height: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: ColorUtil.Color_0_0_0_96),
padding: const EdgeInsets.only(left: 12, right: 12),
child: Row(
children: [
Text(
'正在讲话：',
style: TextStyle(
fontSize: 10.sp,
color: ColorUtil.Color_185_184_184),
),
Image.asset(
'assets/images/meeting_main_speak2.png',
width: 20.w,
height: 20.h,
),
Text(
'晓晓',
style: TextStyle(
fontSize: 10.sp,
color: ColorUtil.Color_185_184_184),
)
],
),
),
),
],
));
/// gridview
pageList.add(Container(
color: ColorUtil.Color_57_57_57,
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 0.8,
crossAxisSpacing: 0),
itemCount: widget.users.length,
itemBuilder: (BuildContext ctx, index) {
return Stack(
children: [
widget.users[index].uid ==
UserStore.to.userInfoEntity.value!.uid
? AgoraVideoView(
controller: VideoViewController(
rtcEngine: widget.rtcEngine,
canvas: const VideoCanvas(uid: 0, setupMode: VideoViewSetupMode.videoViewSetupAdd)
),
)
: AgoraVideoView(
controller: VideoViewController.remote(
rtcEngine: widget.rtcEngine,
canvas: VideoCanvas(
uid: int.tryParse(
widget.users[index].uid), setupMode: VideoViewSetupMode.videoViewSetupAdd),
connection: RtcConnection(
channelId: widget.channelId),
),
),
Positioned(
left: 4,
bottom: 4,
child: Row(
children: [
Image.asset(
'assets/images/meeting_main_own.png',
width: 24.w,
height: 24.h,
),
Container(
height: 20,
margin: const EdgeInsets.only(left: 4),
padding:
const EdgeInsets.only(left: 4, right: 4),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2),
color: ColorUtil.Color_0_0_0_96),
child: widget.users[index].enableMicr == true
? Row(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
SizedBox(
width: 20.w,
height: 20.h,
child: LiquidCustomProgressIndicator(
value:
widget.users[index]
.volume ??
0.0,
valueColor:
const AlwaysStoppedAnimation(
ColorUtil
.Color_2_177_136),
backgroundColor:
ColorUtil.Color_255_255_255,
direction: Axis.vertical,
shapePath: ViewSvgPath
.getMicrpphonePath()),
),
Text(
widget.users[index].userName,
style: TextStyle(
fontSize: 12.sp,
color: ColorUtil
.Color_255_255_255),
)
],
)
: Row(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Image.asset(
'assets/images/meeting_main_microphone_open.png',
width: 20.w,
height: 20.h,
),
Text(
widget.users[index].userName,
style: TextStyle(
fontSize: 12.sp,
color: ColorUtil
.Color_255_255_255),
)
],
),
)
],
),
)
],
);
}),
));
return pageList[position];
}
} }

8
wgshare/pubspec.lock
View File

@ -834,6 +834,14 @@ packages:
url: "https://pub.flutter-io.cn" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.5.1" version: "1.5.1"
preload_page_view:
dependency: "direct main"
description:
name: preload_page_view
sha256: "488a10c158c5c2e9ba9d77e5dbc09b1e49e37a20df2301e5ba02992eac802b7a"
url: "https://pub.flutter-io.cn"
source: hosted
version: "0.2.0"
protobuf: protobuf:
dependency: transitive dependency: transitive
description: description:

3
wgshare/pubspec.yaml
View File

@ -82,6 +82,9 @@ dependencies:
# 悬浮拖动组件 # 悬浮拖动组件
flutter_floating: ^1.0.7 flutter_floating: ^1.0.7
# 预加载pageview
preload_page_view: ^0.2.0
dev_dependencies: dev_dependencies:
flutter_test: flutter_test:
sdk: flutter sdk: flutter