dating-agency
/
dating_touchme_app
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

refactor(video_call): 优化视频通话页面代码结构和功能 

- 修复了本地视频视图初始化时机问题，确保接收方接听后正确显示
- 添加了本地视频预览小窗口功能，右上角显示当前通话的本地视频
- 优化了代码格式和布局，统一了缩进和换行规范
- 重构了背景视频构建逻辑，改进了远程用户ID获取机制
- 调整了用户信息显示逻辑，视频通话接通后隐藏头像和昵称
- 优化了控制按钮颜色逻辑，根据激活状态动态调整按钮样式
- 修复了系统UI模式设置参数，确保正确的全屏和方向控制
- 增强了通话状态监听和控制按钮的显示/隐藏逻辑
master
Jolie 3 months ago
parent
b6e2d5b8de
commit
76bb0e68c2
1 changed files with 149 additions and 79 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 228
      lib/pages/message/video_call_page.dart

228
lib/pages/message/video_call_page.dart
View File

@ -42,16 +42,16 @@ class VideoCallPage extends StatefulWidget {
class _VideoCallPageState extends State<VideoCallPage> {
final CallController _callController = CallController.instance;
final RTCManager _rtcManager = RTCManager.instance;
Timer? _durationTimer;
String? _targetUserName;
String? _targetAvatarUrl;
// 是否显示控制按钮和时长（接通后5秒隐藏）
final RxBool showControls = true.obs;
Timer? _hideControlsTimer;
// 本地视频视图控制器
VideoViewController? _localVideoViewController;
@ -62,14 +62,12 @@ class _VideoCallPageState extends State<VideoCallPage> {
_initCallStatus();
_startDurationTimer();
_initLocalVideo();
// 设置系统UI样式
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
]);
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
}
/// 初始化本地视频视图
void _initLocalVideo() {
final callSession = _callController.currentCall.value;
@ -89,7 +87,7 @@ class _VideoCallPageState extends State<VideoCallPage> {
void _initCallStatus() {
// 不需要初始化，直接使用 CallController 的响应式变量
}
/// 判断通话是否已接通
bool get _isCallConnected {
final callSession = _callController.currentCall.value;
@ -101,8 +99,8 @@ class _VideoCallPageState extends State<VideoCallPage> {
// 优先使用传入的 userData
if (widget.userData != null) {
setState(() {
_targetUserName = widget.userData!.nickName.isNotEmpty
? widget.userData!.nickName
_targetUserName = widget.userData!.nickName.isNotEmpty
? widget.userData!.nickName
: widget.targetUserId;
_targetAvatarUrl = widget.userData!.profilePhoto;
});
@ -112,10 +110,14 @@ class _VideoCallPageState extends State<VideoCallPage> {
// 如果没有传入 userData，尝试从 ConversationController 获取
if (Get.isRegistered<ConversationController>()) {
final conversationController = Get.find<ConversationController>();
// 先从缓存中获取
final cachedUserInfo = conversationController.getCachedUserInfo(widget.targetUserId);
if (cachedUserInfo != null && (cachedUserInfo.nickName != null || cachedUserInfo.avatarUrl != null)) {
final cachedUserInfo = conversationController.getCachedUserInfo(
widget.targetUserId,
);
if (cachedUserInfo != null &&
(cachedUserInfo.nickName != null ||
cachedUserInfo.avatarUrl != null)) {
setState(() {
_targetUserName = cachedUserInfo.nickName ?? widget.targetUserId;
_targetAvatarUrl = cachedUserInfo.avatarUrl;
@ -124,8 +126,11 @@ class _VideoCallPageState extends State<VideoCallPage> {
}
// 如果缓存中没有，尝试从 IM 加载
final userInfo = await conversationController.loadContact(widget.targetUserId);
if (userInfo != null && (userInfo.nickName != null || userInfo.avatarUrl != null)) {
final userInfo = await conversationController.loadContact(
widget.targetUserId,
);
if (userInfo != null &&
(userInfo.nickName != null || userInfo.avatarUrl != null)) {
setState(() {
_targetUserName = userInfo.nickName ?? widget.targetUserId;
_targetAvatarUrl = userInfo.avatarUrl;
@ -146,7 +151,10 @@ class _VideoCallPageState extends State<VideoCallPage> {
_durationTimer?.cancel();
_hideControlsTimer?.cancel();
_localVideoViewController?.dispose();
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: SystemUiOverlay.values);
SystemChrome.setEnabledSystemUIMode(
SystemUiMode.manual,
overlays: SystemUiOverlay.values,
);
SystemChrome.setPreferredOrientations(DeviceOrientation.values);
super.dispose();
}
@ -158,7 +166,8 @@ class _VideoCallPageState extends State<VideoCallPage> {
if (mounted) {
final wasConnected = _isCallConnected;
// 如果通话存在且已经开始计时，说明已接通
if (callSession != null && _callController.callDurationSeconds.value > 0) {
if (callSession != null &&
_callController.callDurationSeconds.value > 0) {
if (!wasConnected) {
// 刚接通，启动5秒隐藏定时器
_startHideControlsTimer();
@ -169,7 +178,7 @@ class _VideoCallPageState extends State<VideoCallPage> {
}
}
});
// 监听通话时长变化（已接通时启动隐藏定时器）
_callController.callDurationSeconds.listen((seconds) {
if (mounted && !_isCallConnected && seconds > 0) {
@ -193,9 +202,9 @@ class _VideoCallPageState extends State<VideoCallPage> {
/// 切换控制按钮的显示/隐藏（点击屏幕时调用）
void _toggleControlsVisibility() {
if (!_isCallConnected) return; // 未接通时不处理
showControls.value = !showControls.value;
// 如果显示控制按钮，重新启动5秒隐藏定时器
if (showControls.value) {
_startHideControlsTimer();
@ -245,16 +254,19 @@ class _VideoCallPageState extends State<VideoCallPage> {
children: [
// 背景视频/头像（模糊）
_buildBackground(),
// 最小化按钮（左上角）
_buildMinimizeButton(),
// 本地视频小窗口（右上角，视频通话且已接通时显示）
_buildLocalVideoPreview(),
// 用户信息
_buildUserInfo(),
// 通话时长
_buildCallDuration(),
// 底部控制按钮
_buildControlButtons(),
],
@ -297,31 +309,38 @@ class _VideoCallPageState extends State<VideoCallPage> {
return Obx(() {
// 在 Obx 中访问响应式变量，确保建立监听关系
final callSession = _callController.currentCall.value;
final isVideoCall = callSession != null && callSession.callType == CallType.video;
final isVideoCall =
callSession != null && callSession.callType == CallType.video;
final remoteUid = _callController.remoteUid.value;
final remoteUsers = _rtcManager.remoteUsersNotifier.value;
print('📞 [VideoCallPage] _buildBackground Obx 重建，isVideoCall: $isVideoCall, remoteUid: $remoteUid, remoteUsers: $remoteUsers');
print(
'📞 [VideoCallPage] _buildBackground Obx 重建，isVideoCall: $isVideoCall, remoteUid: $remoteUid, remoteUsers: $remoteUsers',
);
// 如果不是视频通话，显示模糊的头像背景
if (!isVideoCall) {
return _buildAvatarBackground();
}
// 如果 remoteUid 为空，尝试从 RTCManager 的远端用户列表中获取
if (remoteUid == null && remoteUsers.isNotEmpty) {
_callController.remoteUid.value = remoteUsers.first;
print('📞 [VideoCallPage] 从 RTCManager.remoteUsersNotifier 获取到 remoteUid: ${remoteUsers.first}');
print(
'📞 [VideoCallPage] 从 RTCManager.remoteUsersNotifier 获取到 remoteUid: ${remoteUsers.first}',
);
// Obx 会自动重建，所以这里不需要手动返回
}
// 再次获取 remoteUid（可能刚刚被设置）
final currentRemoteUid = _callController.remoteUid.value;
// 如果远端用户已加入，显示远端视频视图（对方画面）
if (currentRemoteUid != null) {
final engine = _rtcManager.engine;
print('📞 [VideoCallPage] currentRemoteUid 不为 null: $currentRemoteUid, engine: ${engine != null}');
print(
'📞 [VideoCallPage] currentRemoteUid 不为 null: $currentRemoteUid, engine: ${engine != null}',
);
if (engine != null) {
print('📞 [VideoCallPage] 显示远端视频视图，UID：$currentRemoteUid');
final remoteVideoViewController = VideoViewController(
@ -331,10 +350,10 @@ class _VideoCallPageState extends State<VideoCallPage> {
return SizedBox(
width: double.infinity,
height: 1.sh,
key: ValueKey('remote_video_$currentRemoteUid'), // 使用 key 确保 remoteUid 变化时重建
child: AgoraVideoView(
controller: remoteVideoViewController,
),
key: ValueKey(
'remote_video_$currentRemoteUid',
), // 使用 key 确保 remoteUid 变化时重建
child: AgoraVideoView(controller: remoteVideoViewController),
);
} else {
print('⚠️ [VideoCallPage] engine 为 null，无法显示远端视频');
@ -342,25 +361,76 @@ class _VideoCallPageState extends State<VideoCallPage> {
} else {
print('⚠️ [VideoCallPage] currentRemoteUid 为 null，无法显示远端视频');
}
// 如果没有远端视频，显示本地视频视图（自己的画面）
if (_localVideoViewController != null) {
print('📞 [VideoCallPage] 显示本地视频视图');
return SizedBox(
width: double.infinity,
height: 1.sh,
child: AgoraVideoView(
controller: _localVideoViewController!,
),
child: AgoraVideoView(controller: _localVideoViewController!),
);
}
// 如果本地视频也没有，显示模糊的头像背景
print('📞 [VideoCallPage] 显示头像背景');
return _buildAvatarBackground();
});
}
/// 构建本地视频预览小窗口（右上角）
Widget _buildLocalVideoPreview() {
return Obx(() {
// 在 Obx 中访问响应式变量，确保建立监听关系
final callSession = _callController.currentCall.value;
final isVideoCall =
callSession != null && callSession.callType == CallType.video;
final callDuration = _callController.callDurationSeconds.value;
final isCallConnected = callSession != null && callDuration > 0;
// 如果本地视频视图控制器未初始化，尝试初始化（接收方接听后可能需要）
if (isVideoCall && _localVideoViewController == null) {
final engine = _rtcManager.engine;
if (engine != null) {
_localVideoViewController = VideoViewController(
rtcEngine: engine,
canvas: const VideoCanvas(uid: 0),
);
print('📞 [VideoCallPage] 在 _buildLocalVideoPreview 中初始化本地视频视图');
}
}
// 只在视频通话且已接通时显示本地视频小窗口
if (!isVideoCall ||
!isCallConnected ||
_localVideoViewController == null) {
return const SizedBox.shrink();
}
return Positioned(
top: 26.w,
right: 26.w,
child: Container(
width: 120.w,
height: 160.w, // 4:3 比例
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.w),
border: Border.all(color: Colors.white.withOpacity(0.3), width: 1),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.3),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
clipBehavior: Clip.antiAlias,
child: AgoraVideoView(controller: _localVideoViewController!),
),
);
});
}
/// 构建头像背景
Widget _buildAvatarBackground() {
return SizedBox(
@ -383,9 +453,7 @@ class _VideoCallPageState extends State<VideoCallPage> {
/// 构建默认背景
Widget _buildDefaultBackground() {
return Container(
color: Colors.black,
);
return Container(color: Colors.black);
}
/// 构建用户信息
@ -395,14 +463,19 @@ class _VideoCallPageState extends State<VideoCallPage> {
final callSession = _callController.currentCall.value;
final callDuration = _callController.callDurationSeconds.value;
final isCallConnected = callSession != null && callDuration > 0;
print('📞 [VideoCallPage] _buildUserInfo Obx 重建，isCallConnected: $isCallConnected, callDuration: $callDuration');
// 如果已接通，不显示头像和昵称（适用于发起方和接收方）
if (isCallConnected) {
final isVideoCall =
callSession != null && callSession.callType == CallType.video;
print(
'📞 [VideoCallPage] _buildUserInfo Obx 重建，isCallConnected: $isCallConnected, callDuration: $callDuration, isVideoCall: $isVideoCall',
);
// 如果是视频通话且已接通，不显示头像和昵称（适用于发起方和接收方）
// 语音通话即使接通也要显示头像和昵称
if (isCallConnected && isVideoCall) {
return const SizedBox.shrink();
}
return Positioned(
top: MediaQuery.of(context).size.height * 0.15,
left: 0,
@ -454,12 +527,12 @@ class _VideoCallPageState extends State<VideoCallPage> {
final callSession = _callController.currentCall.value;
final callDuration = _callController.callDurationSeconds.value;
final isCallConnected = callSession != null && callDuration > 0;
// 如果是被呼叫方且未接通，显示邀请文字
if (!widget.isInitiator && !isCallConnected) {
final isVideoCall = widget.callType == 'video';
final inviteText = isVideoCall ? '邀请你视频通话' : '邀请你语音通话';
return Positioned(
bottom: MediaQuery.of(context).size.height * 0.25,
left: 0,
@ -476,12 +549,12 @@ class _VideoCallPageState extends State<VideoCallPage> {
),
);
}
// 如果已接通但控制按钮已隐藏，不显示时长
if (isCallConnected && !showControls.value) {
return const SizedBox.shrink();
}
// 呼叫方或已接通，显示时长或"正在呼叫中"
final duration = Duration(seconds: callDuration);
return Positioned(
@ -509,7 +582,7 @@ class _VideoCallPageState extends State<VideoCallPage> {
final callSession = _callController.currentCall.value;
final callDuration = _callController.callDurationSeconds.value;
final isCallConnected = callSession != null && callDuration > 0;
// 如果是被呼叫方且未接通，显示"拒绝"和"接听"按钮
if (!widget.isInitiator && !isCallConnected) {
return Positioned(
@ -539,12 +612,12 @@ class _VideoCallPageState extends State<VideoCallPage> {
),
);
}
// 如果已接通但控制按钮已隐藏，不显示按钮
if (isCallConnected && !showControls.value) {
return const SizedBox.shrink();
}
// 呼叫方或已接通，显示常规控制按钮
return Positioned(
bottom: 40.h,
@ -597,11 +670,9 @@ class _VideoCallPageState extends State<VideoCallPage> {
} else if (isAccept) {
buttonColor = Color(0xFF34C759); // 绿色
} else {
buttonColor = isActive
? Colors.white.withOpacity(0.3)
: Colors.white.withOpacity(0.2);
buttonColor = isActive ? Colors.white : Colors.white.withOpacity(0.2);
}
return GestureDetector(
onTap: onTap,
child: Column(
@ -615,23 +686,22 @@ class _VideoCallPageState extends State<VideoCallPage> {
),
child: Icon(
icon,
color: Colors.white,
color: isActive && icon != Icons.call_end && icon != Icons.phone
? Colors.black
: Colors.white,
size: 28.w,
),
),
SizedBox(height: 8.h),
Text(
label,
style: TextStyle(
color: Colors.white,
fontSize: 12.sp,
),
style: TextStyle(color: Colors.white, fontSize: 12.sp),
),
],
),
);
}
/// 接听通话
Future<void> _acceptCall() async {
if (widget.callMessage == null) {
@ -645,20 +715,21 @@ class _VideoCallPageState extends State<VideoCallPage> {
if (Get.isRegistered<ChatController>(tag: tag)) {
chatController = Get.find<ChatController>(tag: tag);
}
final accepted = await _callController.acceptCall(
message: widget.callMessage!,
chatController: chatController,
);
if (accepted) {
// 通话已接通，UI会自动更新
print('✅ [VideoCallPage] 通话已接通');
// 通话已接通，重新初始化本地视频视图（接收方接听后需要初始化）
_initLocalVideo();
print('✅ [VideoCallPage] 通话已接通，已重新初始化本地视频视图');
} else {
SmartDialog.showToast('接听失败');
}
}
/// 拒绝通话
Future<void> _rejectCall() async {
// 尝试获取 ChatController
@ -667,16 +738,15 @@ class _VideoCallPageState extends State<VideoCallPage> {
if (Get.isRegistered<ChatController>(tag: tag)) {
chatController = Get.find<ChatController>(tag: tag);
}
final rejected = await _callController.rejectCall(
message: widget.callMessage!,
chatController: chatController,
);
if (rejected) {
// 拒绝成功，返回上一页
Get.back();
}
}
}
Write Preview
Loading…
Cancel
Save