在Flutter项目中实现一对一视频交友功能时，接入腾讯云音视频的美颜SDK并封装成可复用的Widget，同时适配iOS端是很多开发者的需求。下面我们就一步步完成整个实现过程。
一、前期准备
首先需要在腾讯云控制台开通音视频和美颜相关服务，获取对应的AppID和密钥，同时下载iOS端的美颜SDK依赖包。在Flutter项目的pubspec.yaml中添加必要的依赖：
dependencies:
flutter:
sdk: flutter
# 腾讯云音视频Flutter插件
tencent_trtc_cloud: ^2.0.0
# Flutter与原生通信插件
flutter_plugin_android_lifecycle: ^2.0.0
# 权限申请插件
permission_handler: ^11.0.0然后在iOS端的Podfile中添加美颜SDK的依赖，执行pod install完成原生依赖安装，同时需要在iOS项目的Info.plist中添加相机、麦克风权限申请描述。
二、原生层通信实现
Flutter层需要调用iOS原生的美颜SDK能力，我们通过MethodChannel实现双向通信。首先在iOS原生代码中注册MethodChannel：
import UIKit
import Flutter
import TXLiteAVSDK_Professional
public class VideoBeautyManager: NSObject {
static let channelName = "com.example.video_beauty/channel"
var trtcEngine: TRTCCloud?
var beautyManager: TXBeautyManager?
func registerChannel(with registrar: FlutterPluginRegistrar) {
let channel = FlutterMethodChannel(name: Self.channelName, binaryMessenger: registrar.messenger())
channel.setMethodCallHandler { [weak self] call, result in
guard let self = self else { return }
switch call.method {
case "initTRTC":
self.initTRTCEngine()
result(true)
case "setBeautyLevel":
if let level = call.arguments as? Int {
self.beautyManager?.setBeautyLevel(Int32(level))
result(true)
} else {
result(false)
}
case "startLocalPreview":
self.startPreview()
result(true)
default:
result(FlutterMethodNotImplemented)
}
}
}
private func initTRTCEngine() {
trtcEngine = TRTCCloud.sharedInstance()
beautyManager = trtcEngine?.getBeautyManager()
// 开启美颜
beautyManager?.setBeautyStyle(.nature)
}
private func startPreview() {
// 获取本地预览视图，传递给Flutter层渲染
let previewView = trtcEngine?.startLocalPreview(true, view: UIView())
// 这里可以将预览视图的指针传递给Flutter
}
}三、Flutter层Widget封装
接下来封装通用的视频美颜Widget，内部处理通信逻辑和UI渲染：
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class VideoBeautyWidget extends StatefulWidget {
final String appId;
final String userId;
final String roomId;
const VideoBeautyWidget({
Key? key,
required this.appId,
required this.userId,
required this.roomId,
}) : super(key: key);
@override
State<VideoBeautyWidget> createState() => _VideoBeautyWidgetState();
}
class _VideoBeautyWidgetState extends State<VideoBeautyWidget> {
static const MethodChannel _channel = MethodChannel('com.example.video_beauty/channel');
bool _isInitialized = false;
int _beautyLevel = 5;
@override
void initState() {
super.initState();
_initTRTC();
}
Future<void> _initTRTC() async {
try {
await _channel.invokeMethod('initTRTC');
setState(() {
_isInitialized = true;
});
} catch (e) {
debugPrint('初始化TRTC失败: $e');
}
}
Future<void> _setBeautyLevel(int level) async {
try {
await _channel.invokeMethod('setBeautyLevel', level);
setState(() {
_beautyLevel = level;
});
} catch (e) {
debugPrint('设置美颜等级失败: $e');
}
}
@override
Widget build(BuildContext context) {
return Column(
children: [
// 视频预览区域
Expanded(
child: Container(
color: Colors.black,
child: _isInitialized
? const Center(
child: Text(
'视频预览区域',
style: TextStyle(color: Colors.white),
),
)
: const Center(
child: CircularProgressIndicator(),
),
),
),
// 美颜调节区域
Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
const Text('美颜等级调节'),
Slider(
value: _beautyLevel.toDouble(),
min: 0,
max: 10,
divisions: 10,
label: _beautyLevel.toString(),
onChanged: (value) {
_setBeautyLevel(value.toInt());
},
),
],
),
),
],
);
}
}四、iOS适配注意事项
在iOS端适配时需要注意以下几个常见问题：
- 权限申请：iOS需要明确申请相机、麦克风权限，否则会初始化失败，需要在Info.plist中添加NSCameraUsageDescription和NSMicrophoneUsageDescription字段
- 架构支持：美颜SDK可能不支持模拟器架构，调试时尽量使用真机，避免模拟器运行报错
- 内存管理：TRTC引擎和BeautyManager需要及时释放，避免内存泄漏，可以在Widget销毁时调用原生方法释放资源
- 视图渲染：iOS的预览视图需要正确传递给Flutter层，可以通过PlatformView的方式嵌入Flutter的Widget树中
完成以上步骤后，就可以在Flutter项目中直接使用封装好的VideoBeautyWidget，快速实现一对一视频交友的美颜功能，同时保证iOS端的稳定运行。