Js使用ffmpeg在视频中添加png或gif

ffmpeg

使用场景是需要在web端对视频进行编辑添加图片和gif。

注意:

以下所有的使用案例均基于vue3 setup。

同时由于@ffmpeg版本不同会导致使用的api不同，使用案例前需要注意@ffmpeg版本问题。

如果使用的是0.12+需要使用新的api，详情请看文档

npm

bash 复制代码

npm install @ffmpeg/ffmpeg@^0.11.0

npm install @ffmpeg/core@^0.11.0

视频添加png

html 复制代码

<template></template>

<script setup>
import { ref, onUnmounted, onMounted } from 'vue'
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

const ffmpeg = createFFmpeg({ log: true });
const fileType = ref("") // 视频文件类型

/**
 * 将图片合成到视频中
 * @param {string} url 视频在线地址
 * @param {object} picItem 图片素材对象
 * @param {string} picItem.startT 图片素材出现的开始时间
 * @param {number} picItem.duration 素材的出现持续时间
 * @param {number} picItem.scale 素材的放大比例
 * @param {string} picItem.url 图片素材url地址
 * @param {number} picItem.x 素材离视频顶部的距离
 * @param {number} picItem.y 素材离视频左侧的距离
 * @return {Promise<{outputName: string, fileUrl: string}> | undefined}
 */
const videoCompose = async (url, picItem) => {
    if (!ffmpeg.isLoaded()) {
        await ffmpeg.load();
    }
    if (!url) return;

    const { duration, scale, startT, url: picUrl, x, y } = picItem;
    fileType.value = url.split(".").pop();
    const inputName = `input.${fileType.value}`;
    const outputName = `output.${fileType.value}`;
    const imageType = picUrl.split(".").pop();
    const imageFileName = `image.${imageType}`;

    await ffmpeg.FS('writeFile', inputName, await fetchFile(url));
    await ffmpeg.FS('writeFile', imageFileName, await fetchFile(picUrl));

    // 运行 FFmpeg 命令
    try {
        await ffmpeg.run(
            `-i`, `${inputName}`,
            `-i`, `${imageFileName}`,
            `-filter_complex`, `[1:v]scale=iw*${(scale).toFixed(1)}:ih*${(scale).toFixed(1)}[scaled];[0:v][scaled]overlay=${x}:${y}:enable='between(t,${+startT},${+startT + duration})'`,
            `${outputName}`,
            "-hide_banner"
        );

        // 读取输出文件
        let arrayBuffer = ffmpeg.FS('readFile', outputName).buffer; // 读取缓存

        // 创建下载链接并通过回调下载保存到本地
        const fileUrl = URL.createObjectURL(new Blob([arrayBuffer])); // 转为Blob URL

        // 释放内存
        ffmpeg.FS('unlink', inputName);
        ffmpeg.FS('unlink', outputName);

        return {
            fileUrl,
            outputName
        };
    } catch (e) {
        console.log(e);
    }
}

const downloadFile = (url, fileName = `clip.mp4`) => {
    const link = document.createElement('a');
    link.href = url;
    link.download = fileName;
    link.click();
}

onMounted(async () => {
    const {fileUrl} = await videoCompose("http://xxx.mp4", {
        duration: 3,
        scale: 1,
        startT: "0.00",
        url: 'http://xxx.png',
        x: 100,
        y: 100
    })
    downloadFile(fileUrl)
})

onUnmounted(() => {
    ffmpeg.exit();
})
</script>

视频添加gif

流程与添加图片类似，但添加滤镜的命令不相同。

js 复制代码

/*
 执行FFmpeg命令的部分替换
 
 `-ignore_loop`, `0` 让gif图片循环播放 否则只播放一次
 `-itsoffset`, `${+startT}` gif图片在视频中出现时间
 fade=t=in:st=${+startT}:d=1:alpha=1[wm]; gif图片在视频中淡入的时间
 :shortest=1 视频的时长为初始视频时长 否则由于gif添加会导致视频时间增长
 :enable='between(t,${+startT},${+startT + duration})' gif的出现时间
 "-hide_banner" 隐藏ffmpeg的部分信息
*/
await ffmpeg.run(
                `-i`, `${inputName}`,
                `-ignore_loop`, `0`,
                `-itsoffset`, `${+startT}`,
                `-i`, `${imageFileName}`,
                `-filter_complex`, `[0:0]scale=iw:ih[a];[1:0]scale=iw*${(scale).toFixed(1)}:ih*${(scale).toFixed(1)},fade=t=in:st=${+startT}:d=1:alpha=1[wm];[a][wm]overlay=x=${x}:y=${y}:shortest=1:enable='between(t,${+startT},${+startT + duration})'`,
                `${outputName}`,
                "-hide_banner"
            );

整合

可以在添加时对图片的类型进行判断，执行不同的添加逻辑

js 复制代码

/**
 * 将图片合成到视频中
 * @param {string} url 视频在线地址
 * @param {object} picItem 图片素材对象
 * @param {string} picItem.startT 图片素材出现的开始时间
 * @param {number} picItem.duration 素材的出现持续时间
 * @param {number} picItem.scale 素材的放大比例
 * @param {string} picItem.url 图片素材url地址
 * @param {number} picItem.x 素材离视频顶部的距离
 * @param {number} picItem.y 素材离视频左侧的距离
 * @return {Promise<{outputName: string, fileUrl: string}> | undefined}
 */
const videoCompose = async (url, picItem) => {
    if (!ffmpeg.isLoaded()) {
        await ffmpeg.load();
    }
    if (!url) return;

    const {duration, scale, startT, url: picUrl, x, y} = picItem;
    const type = url.split(".").pop();
    const inputName = `input.${type}`;
    const outputName = `output.${type}`;
    const imageType = picUrl.split(".").pop();
    const imageFileName = `image.${imageType}`;

    // 将输入文件保存到虚拟文件系统
    if (url.startsWith('blob:')) {
        // 处理 Blob URL
        const arrayBuffer = await fetchBlobAsArrayBuffer(url);
        ffmpeg.FS('writeFile', inputName, new Uint8Array(arrayBuffer));
    } else if (url.startsWith('http://') || url.startsWith('https://')) {
        // 处理网络地址
        await ffmpeg.FS('writeFile', inputName, await fetchFile(url));
    }
    await ffmpeg.FS('writeFile', imageFileName, await fetchFile(picUrl));

    // 运行 FFmpeg 命令
    try {
        if (imageType === 'gif') {
            await ffmpeg.run(
                `-i`, `${inputName}`,
                `-ignore_loop`, `0`,
                `-itsoffset`, `${+startT}`,
                `-i`, `${imageFileName}`,
                `-filter_complex`, `[0:0]scale=iw:ih[a];[1:0]scale=iw*${(scale).toFixed(1)}:ih*${(scale).toFixed(1)},fade=t=in:st=${+startT}:d=1:alpha=1[wm];[a][wm]overlay=x=${x}:y=${y}:shortest=1:enable='between(t,${+startT},${+startT + duration})'`,
                `${outputName}`,
                "-hide_banner"
            );
        } else {
            await ffmpeg.run(
                `-i`, `${inputName}`,
                `-i`, `${imageFileName}`,
                `-filter_complex`, `[1:v]scale=iw*${(scale).toFixed(1)}:ih*${(scale).toFixed(1)}[scaled];[0:v][scaled]overlay=${x}:${y}:enable='between(t,${+startT},${+startT + duration})'`,
                `${outputName}`,
                "-hide_banner"
            );
        }

        // 读取输出文件
        let arrayBuffer = ffmpeg.FS('readFile', outputName).buffer; // 读取缓存

        // 创建下载链接并通过回调下载保存到本地
        const fileUrl = URL.createObjectURL(new Blob([arrayBuffer])); // 转为Blob URL

        // 释放内存
        ffmpeg.FS('unlink', inputName);
        ffmpeg.FS('unlink', outputName);

        return {
            fileUrl,
            outputName
        };
    } catch (e) {
        console.log(e);
    }
}