MTV — FFlutter 开发视频播放器实现超分辨率

MTVF — Flutter 开发视频播放器实现超分辨率效果预览FlutterMPV GLSL 超分辨率media_kit实现流程添加依赖添加 GLSL加载 GLSL依赖数据参考文献现在网站视频大都来源采集站视频画质倍严重压缩。但是我们可以通过超分辨率技术来改善画质。文章介绍如何使用 Flutter 的 media_kit 插件开发视频播放器并结合 GLSL 实现超分辨率。效果预览下面是 MTVF.app 利用 media_kit glsl 实现的视频播放器可设置不同的超分策略FlutterFlutter 是由 Google 开发的一个开源UI软件开发工具包首次发布于2017年。它使用Dart 语言作为开发语言并通过自绘引擎Skia渲染UI能够在多个平台上创建高性能、高保真的应用程序包括移动端iOS、Android、Web、桌面端Windows、macOS、Linux以及嵌入式设备。MPV GLSL 超分辨率MPV 是跨平台开源播放器支持加载 GLSL 着色器Shader 做实时视频后处理放大、锐化、降噪、色彩。GLSLOpenGL Shading Language在 GPU 上并行运行的小程序用来逐像素处理画面。MPV 把视频帧当成纹理传给 GPU → GLSL 着色器对每个输出像素做分析邻域像素用算法 / 模型重建高分辨率细节输出放大 清晰化的帧常用超分 ShaderMPV 生态Anime4K动漫专用线条强化、边缘修复、x2/x4 放大轻量快AMD FSR通用EASU 放大 RCAS 锐化全显卡兼容NVIDIA NIS类似 FSRN 卡优化RAVU / NNEDI3AI 向质量极高、性能开销大SuperXBR边缘保护强适合像素风、老动画media_kitmedia_kit 是一个强大的跨平台音视频播放解决方案支持 Android、iOS、macOS、Windows、Linux 和 Web 平台。它基于 Dart 实现底层依赖 FFmpeg 和 libmpv提供高性能、可定制的播放体验适用于多种场景。核心功能支持多种格式支持 MP4、MP3、MKV、FLV、HLS、DASH 等格式。硬件加速默认启用 GPU 渲染支持 4K/8K 视频播放。高级功能支持字幕、音轨切换、画中画模式、后台播放等。跨平台一致性提供统一的 API 接口适配多平台。自定义能力支持自定义视频渲染控件和播放控制。实现流程利用 media_kit 插件的 libmpv 模式加载 GLSL 实现超分辨率添加依赖这里要使用Predidit 改进的 media_kit在项目中添加如下依赖dependencies:media_kit:git:url:https://github.com/Predidit/media-kit.gitref:4cd7c29566da395229c398d2ec4d0ef96b5e8970path:./media_kitmedia_kit_video:git:url:https://github.com/Predidit/media-kit.gitref:4cd7c29566da395229c398d2ec4d0ef96b5e8970path:./media_kit_videomedia_kit_libs_video:git:url:https://github.com/Predidit/media-kit.gitref:4cd7c29566da395229c398d2ec4d0ef96b5e8970path:./libs/universal/media_kit_libs_videodependency_overrides:media_kit_libs_ios_video:git:url:https://github.com/Predidit/media-kit.gitref:4cd7c29566da395229c398d2ec4d0ef96b5e8970path:./libs/ios/media_kit_libs_ios_videomedia_kit_libs_android_video:git:url:https://github.com/Predidit/media-kit.gitref:4cd7c29566da395229c398d2ec4d0ef96b5e8970path:./libs/android/media_kit_libs_android_videomedia_kit_libs_ohos:git:url:https://github.com/Predidit/media-kit.gitref:4cd7c29566da395229c398d2ec4d0ef96b5e8970path:./libs/ohos/media_kit_libs_ohos完整依赖见 Kazumi | pubspec.yaml添加 GLSL在项目根目录下创建assets/shaders文件夹添加shaders/xxx.glsl文件并在pubspec.yaml中添加如下配置flutter:assets:-assets/shaders/加载 GLSL软件启动时将assets/shaders文件夹下的 GLSL 文件复制到手机/data/data/com.example.app/files/shaders文件夹下importdart:io;importpackage:mtvf/utils/log_util.dart;importpackage:path/path.dartaspath;importpackage:flutter/services.dart;importpackage:path_provider/path_provider.dart;classShadersUtil{staticfinalShadersUtil_singletonShadersUtil._internal();factoryShadersUtil()_singleton;ShadersUtil._internal();lateDirectoryshadersDirectory;FuturevoidcopyShadersToExternalDirectory()async{finalassetManifestawaitAssetManifest.loadFromAssetBundle(rootBundle);finalassetsassetManifest.listAssets();finaldirectoryawaitgetApplicationSupportDirectory();shadersDirectoryDirectory(path.join(directory.path,shaders));if(!awaitshadersDirectory.exists()){awaitshadersDirectory.create(recursive:true);Log.logger(ShaderManager: Create GLSL Shader:${shadersDirectory.path});}finalshaderFilesassets.where((Stringasset)asset.startsWith(assets/shaders/)asset.endsWith(.glsl),);int copiedFilesCount0;for(varfilePathinshaderFiles){finalfileNamefilePath.split(/).last;finaltargetFileFile(path.join(shadersDirectory.path,fileName));if(awaittargetFile.exists()){Log.logger(ShaderManager: GLSL Shader exists, skip:${targetFile.path});continue;}try{finaldataawaitrootBundle.load(filePath);finalListintbytesdata.buffer.asUint8List();awaittargetFile.writeAsBytes(bytes);copiedFilesCount;Log.logger(ShaderManager: Copy:${targetFile.path});}catch(e){Log.logger(ShaderManager: Copy: ($filePath),$e);}}Log.logger(ShaderManager:$copiedFilesCountGLSL files copied to${shadersDirectory.path});}}定义 glsl 枚举便于切换enumMVPShader{off(关闭,[]),anime4kHighQuality(高质量,[Anime4K_Clamp_Highlights.glsl,// 保留抗振铃可选移除再省10%性能Anime4K_Restore_CNN_M.glsl,// 降级VL→M耗时从20ms→5msAnime4K_Upscale_CNN_x2_M.glsl,// 降级VL→M核心UpscaleAnime4K_AutoDownscalePre_x2.glsl,// 仅保留2x降采样移除x4省显存Anime4K_Upscale_CNN_x2_S.glsl,// 第二层Upscale降级为S进一步控耗时]),anime4kBalanced(均衡版,[Anime4K_AutoDownscalePre_x2.glsl,// 智能降采样预处理Anime4K_Upscale_CNN_x2_M.glsl,// Anime4K 中档超分x2平衡画质与性能Anime4K_Restore_CNN_M.glsl,// CNN 细节修复M 级适度增强Adaptive_sharpen_lite_RT.glsl,// 自适应锐化轻量版补充细节]),anime4kLightWeight(轻量版,[Anime4K_Clamp_Highlights.glsl,// 可选移除追求极致流畅Anime4K_Restore_CNN_M.glsl,// 仅保留单次Restore移除重复的S级Anime4K_Upscale_CNN_x2_M.glsl,// 核心Upscale用M级保画质Anime4K_AutoDownscalePre_x2.glsl,// 移除x4移动端无用Anime4K_Upscale_CNN_x2_S.glsl,// 第二层Upscale用S级控耗时]),// 手机端超分组合推荐 mobileLite(日常版,[AMD_FSR1_lite_RT.glsl,// AMD FSR1 轻量版性能优先适合日常观看Adaptive_sharpen_lite_luma_RT.glsl,// 轻度锐化Luma 优化低功耗]),mobileHDR(HDR 增强,[AMD_FSR1_EASU.glsl,// AMD 边缘自适应超分EASU 独立版画质优秀AMD_FSR1_RCAS_glsl,// AMD 锐化补偿 EASU 的柔和Adaptive_sharpen_RT.glsl,// 二次锐化强化细节]),// 强效画质增强组合推荐用于真人电影 movieSharpUltra(强锐化版,[FSRCNNX_x2_16_0_4_1.glsl,// FSRCNN 高阶超分x216 通道画质最强Adaptive_sharpen_RT.glsl,// 全量自适应锐化强力增强细节AMD_CAS_AIO_RT.glsl,// AMD 对比度自适应锐化全功能版增强清晰度]),movieDetailPlus(细节增强版,[AiUpscale_Fast_2x_Photo_RT.glsl,// AI 照片/实拍视频超分快速版针对实拍优化USM.glsl,// 反锐化掩模传统但有效的细节增强AMD_FSR1_RCAS_RT.glsl,// 后期锐化补偿]),movieCinemaPro(专业影院版,[ArtCNN_C4F32_i2.glsl,// ArtCNN 高质量超分C4F32电影级画质Adaptive_sharpen_RT.glsl,// 精细锐化colorlevel_expand.glsl,// 色彩层次扩展增强电影感]),finalListStringvalue;finalStringlabel;constMVPShader(this.label,this.value);staticMVPShaderfrom(int index){returnMVPShader.values[index];}}使用 media_kit 加载 glsl/// 构建着色器绝对路径StringbuildShadersAbsolutePath(StringbaseDirectory,ListStringshaders){ListStringabsolutePathsshaders.map((shader){returnpath.join(baseDirectory,shader);}).toList();if(Platform.isWindows){returnabsolutePaths.join(;);}returnabsolutePaths.join(:);}/// 设置着色器FuturevoidsetShader(ListStringshaders)async{varppmediaPlayer!.platformasNativePlayer;awaitpp.waitForPlayerInitialization;awaitpp.waitForVideoControllerInitializationIfAttached;if(shaders.isEmpty){awaitpp.command([change-list,glsl-shaders,clr,]);Log.logger(清空着色器);return;}finalshaderStringPlayerUtils().buildShadersAbsolutePath(ShadersUtil().shadersDirectory.path,shaders);try{awaitpp.command([change-list,glsl-shaders,set,shaderString]);Log.logger(着色器设置成功:$shaderString);}catch(e){Log.logger(执行失败:$e);}}除了实现超分glsl还可以实现镜像和视觉辅助效果mirrorRT(镜像,[Mirror_RT.glsl]),protanopia(红/绿滤镜,[Protanopia.glsl]),deuteranopia(绿/红滤镜,[Deuteranopia.glsl]),tritanopia(蓝/黄滤镜,[Tritanopia.glsl]),grayscale(黑/白滤镜,[Grayscale.glsl]);依赖数据文章使用的 glsl 可在 MTVF | shaders 下载。 更多的 glsl 可在 Anime4K 与 mpv_PlayKit获取。参考文献[1] Predidit | media-kit改进的 media-kit 插件。[2] Predidit | Kazumi一款使用 Flutter 开发的基于自定义规则的番剧采集与在线观看程序。[3] MTVF | shadersMTVF 使用的 glsl 集合。