如何在Flutter相机拍摄的图片/视频及直播流中添加水印？

针对直播场景下的水印需求，以下是三种不同复杂度的实现方案，可根据你的实际场景选择：

方案一：Widget层叠加静态水印（最快实现） #

这种方法无需修改视频流，直接在Camera预览的UI层叠加水印组件，适合仅需要本地预览显示水印，或推流时不需要将水印嵌入视频流的场景。

代码示例 #

Stack(
  children: [
    // 基础Camera预览组件
    CameraPreview(_cameraController),
    // 右下角文字水印
    Positioned(
      bottom: 24,
      right: 24,
      child: Text(
        '2024直播测试',
        style: TextStyle(
          color: Colors.white,
          fontSize: 18,
          fontWeight: FontWeight.w500,
          shadows: const [Shadow(color: Colors.black87, blurRadius: 3)],
        ),
      ),
    ),
    // 左上角图片水印
    Positioned(
      top: 24,
      left: 24,
      child: Image.asset(
        'assets/app_logo.png',
        width: 50,
        height: 50,
        color: Colors.white.withOpacity(0.8),
      ),
    ),
  ],
)

优缺点 #

• ✅ 实现成本极低，性能开销可忽略
• ✅ 支持任意Flutter Widget作为水印（比如带动画的组件）
• ❌ 水印仅存在于本地UI层，不会被包含在Camera采集的原始视频流中，推流时观众看不到

方案二：处理视频帧嵌入水印（推流可见） #

如果需要将水印嵌入直播视频流，让观众也能看到，就需要对Camera采集的每一帧图像进行处理，绘制水印后再用于推流或预览。

代码示例 #

import 'dart:ui' as ui;
import 'package:flutter/services.dart';
import 'package:camera/camera.dart';

late CameraController _controller;
ui.Image? _processedImage;

Future<void> initCameraWithWatermark() async {
  final cameras = await availableCameras();
  _controller = CameraController(
    cameras[0],
    ResolutionPreset.medium, // 根据性能调整分辨率
    enableAudio: true,
  );
  await _controller.initialize();

  // 监听视频流，逐帧处理
  _controller.startImageStream((CameraImage image) async {
    // 将CameraImage转换为UI可绘制的Image
    final uiImage = await _convertCameraImageToUi(image);
    // 创建画布绘制水印
    final recorder = ui.PictureRecorder();
    final canvas = ui.Canvas(recorder);
    
    // 绘制原始视频帧
    canvas.drawImage(uiImage, ui.Offset.zero, ui.Paint());
    
    // 绘制动态文字水印（比如当前时间）
    final timeText = DateTime.now().toString().split(' ')[1];
    final textPainter = ui.TextPainter(
      text: ui.TextSpan(
        text: timeText,
        style: const ui.TextStyle(
          color: Colors.white,
          fontSize: 22,
          shadows: [ui.Shadow(color: Colors.black, blurRadius: 4)],
        ),
      ),
      textDirection: ui.TextDirection.ltr,
    );
    textPainter.layout();
    // 定位到右下角
    textPainter.paint(canvas, ui.Offset(
      uiImage.width - textPainter.width - 20,
      uiImage.height - textPainter.height - 30,
    ));

    // 绘制图片水印
    final logo = await _loadAssetImage('assets/logo.png');
    canvas.drawImage(logo, ui.Offset(20, 20), ui.Paint());

    // 生成处理后的图片
    final picture = recorder.endRecording();
    final processedImage = await picture.toImage(uiImage.width, uiImage.height);
    
    setState(() => _processedImage = processedImage);
  });
}

// 辅助方法：CameraImage转UI Image
Future<ui.Image> _convertCameraImageToUi(CameraImage image) async {
  final bytes = image.planes[0].bytes;
  final codec = await ui.instantiateImageCodec(
    bytes,
    targetWidth: image.width,
    targetHeight: image.height,
  );
  final frame = await codec.getNextFrame();
  return frame.image;
}

// 辅助方法：加载本地图片资源
Future<ui.Image> _loadAssetImage(String path) async {
  final data = await rootBundle.load(path);
  final codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
  final frame = await codec.getNextFrame();
  return frame.image;
}

显示处理后的视频帧 #

@override
Widget build(BuildContext context) {
  return _processedImage != null
      ? Image(image: MemoryImage(await _processedImage!.toByteData(format: ui.ImageByteFormat.png)!.buffer.asUint8List()))
      : CameraPreview(_controller);
}

优化提示 #

• 高分辨率下建议使用Isolate处理帧数据，避免阻塞主线程导致卡顿
• 可以缓存静态水印资源（比如logo），避免重复加载

优缺点 #

• ✅ 水印直接嵌入视频流，推流时观众可看到
• ✅ 支持动态水印（实时更新的文字、时间戳等）
• ❌ 性能开销较大，需根据设备性能调整分辨率和处理逻辑

方案三：使用FFmpeg处理视频流（专业级需求） #

如果需要复杂的水印效果（比如透明渐变、旋转、多个水印叠加），可以借助FFmpeg对视频流进行处理，适合专业直播场景。

代码示例 #

首先添加flutter_ffmpeg依赖，然后执行FFmpeg命令：

import 'package:flutter_ffmpeg/flutter_ffmpeg.dart';

final FlutterFFmpeg _ffmpeg = FlutterFFmpeg();

void startLiveWithAdvancedWatermark() {
  // 替换为你的Camera视频流地址和推流地址
  final videoInput = 'rtmp://local-camera-stream';
  final watermarkPath = '/storage/emulated/0/Download/logo.png';
  final livePushUrl = 'rtmp://your-live-server/live/stream-key';

  // FFmpeg命令：叠加水印并推流
  final command = '''
    -i $videoInput 
    -i $watermarkPath 
    -filter_complex "overlay=W-w-20:H-h-20:format=auto" 
    -c:v libx264 
    -c:a aac 
    -f flv $livePushUrl
  '''.replaceAll('\n', '');

  _ffmpeg.execute(command).then((returnCode) {
    if (returnCode == 0) {
      print('水印推流启动成功');
    } else {
      print('FFmpeg执行失败，错误码：$returnCode');
    }
  });
}

优缺点 #

• ✅ 支持复杂水印效果和视频处理
• ✅ 性能优化成熟，适合长时间直播
• ❌ 需要处理平台适配（比如Android权限、iOS框架集成）
• ❌ 学习成本较高，需熟悉FFmpeg命令

方案选择建议 #

• 仅本地预览显示水印：选方案一
• 推流需带水印且效果简单：选方案二
• 复杂水印或专业直播场景：选方案三

内容的提问来源于stack exchange，提问作者Dilip Kumar