博客站

在 UniApp 中，视频水印是常见的需求之一，例如在用户上传的视频上添加版权信息、Logo 等。UniApp 本身没有直接提供视频水印功能，但可以通过结合第三方库或手动实现视频水印。以下是 UniApp 处理视频水印的常用方法：

一、使用第三方视频处理库

如果需要实现视频水印功能，可以使用第三方视频处理库，如 ffmpeg.js。

1. 安装 ffmpeg.js

• 安装 ffmpeg.js：

  npm install @ffmpeg/ffmpeg @ffmpeg/core
  

2. 在 UniApp 中使用

• 示例：

  import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
  
  const ffmpeg = createFFmpeg({ log: true });
  
  async function addVideoWatermark(videoSrc, watermarkSrc) {
    await ffmpeg.load();
    ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(videoSrc));
    ffmpeg.FS('writeFile', 'watermark.png', await fetchFile(watermarkSrc));
    await ffmpeg.run(
      '-i', 'input.mp4',
      '-i', 'watermark.png',
      '-filter_complex', 'overlay=10:10',
      'output.mp4'
    );
    const data = ffmpeg.FS('readFile', 'output.mp4');
    return new Blob([data.buffer], { type: 'video/mp4' });
  }
  
  uni.chooseVideo({
    sourceType: ['album', 'camera'],
    success: async (res) => {
      const tempFilePath = res.tempFilePath;
      const watermarkedVideo = await addVideoWatermark(tempFilePath, 'https://example.com/watermark.png');
      console.log('添加水印后的视频：', watermarkedVideo);
    }
  });
  

二、手动实现视频水印

如果需要更灵活的控制，可以手动实现视频水印。

1. 使用 Canvas 添加水印

• 示例：

  function addVideoWatermark(videoSrc, watermarkSrc) {
    return new Promise((resolve, reject) => {
      const video = document.createElement('video');
      video.src = videoSrc;
      video.onloadedmetadata = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        const watermark = new Image();
        watermark.src = watermarkSrc;
        watermark.onload = () => {
          video.play();
          video.ontimeupdate = () => {
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            ctx.drawImage(watermark, 10, 10, 100, 50);
            const watermarkedFrame = canvas.toDataURL('image/jpeg');
            resolve(watermarkedFrame);
          };
        };
        watermark.onerror = (err) => {
          reject(err);
        };
      };
      video.onerror = (err) => {
        reject(err);
      };
    });
  }
  
  uni.chooseVideo({
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFilePath = res.tempFilePath;
      addVideoWatermark(tempFilePath, 'https://example.com/watermark.png').then((watermarkedFrame) => {
        console.log('添加水印后的视频帧：', watermarkedFrame);
      });
    }
  });
  

三、总结

UniApp 处理视频水印的步骤如下：

1. 使用第三方视频处理库：通过 ffmpeg.js 实现视频水印功能。
2. 手动实现视频水印：通过 Canvas 实现灵活的视频水印。

以下是一个完整的 ffmpeg.js 示例：

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

const ffmpeg = createFFmpeg({ log: true });

async function addVideoWatermark(videoSrc, watermarkSrc) {
  await ffmpeg.load();
  ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(videoSrc));
  ffmpeg.FS('writeFile', 'watermark.png', await fetchFile(watermarkSrc));
  await ffmpeg.run(
    '-i', 'input.mp4',
    '-i', 'watermark.png',
    '-filter_complex', 'overlay=10:10',
    'output.mp4'
  );
  const data = ffmpeg.FS('readFile', 'output.mp4');
  return new Blob([data.buffer], { type: 'video/mp4' });
}

uni.chooseVideo({
  sourceType: ['album', 'camera'],
  success: async (res) => {
    const tempFilePath = res.tempFilePath;
    const watermarkedVideo = await addVideoWatermark(tempFilePath, 'https://example.com/watermark.png');
    console.log('添加水印后的视频：', watermarkedVideo);
  }
});

通过合理使用这些方法，可以轻松实现 UniApp 中的视频水印功能，满足应用的需求。