FFmpeg.wasm 在浏览器中的应用实践

FFmpeg.wasm 在浏览器中的应用实践：从 20MB 加载优化到视频信息精准提取

前言

FFmpeg.wasm 是将 FFmpeg 编译为 WebAssembly 的版本，让我们可以在浏览器中直接处理视频。但在实际应用中，我们遇到了很多挑战：20MB 的 wasm 文件加载慢、容易卡死、并发调用冲突等。本文将分享我们在数字人视频制作平台中的实践经验和解决方案。

核心挑战

1. 加载速度慢：首次加载 20MB wasm 文件需要 10-60 秒
2. 容易卡死：网络不稳定时，加载过程可能永远不返回
3. 并发冲突：多个地方同时调用时，会重复初始化
4. 信息提取难：需要从 FFmpeg 日志中解析视频编码、帧率等信息

解决方案

1. 单例模式 + 并发控制

问题：多个组件同时调用时，会创建多个 FFmpeg 实例，导致重复加载。

解决：使用单例模式，全局维护一个实例，并处理并发调用。

let ffmpegInstance = null
let isFFmpegLoaded = false
let isLoadingFFmpeg = false
let isFFmpegAvailable = true

async function initFFmpeg() {
    // 如果已加载，直接返回
    if (isFFmpegLoaded && ffmpegInstance) {
        return ffmpegInstance
    }
    
    // 如果正在加载，等待完成
    if (isLoadingFFmpeg) {
        const maxWaitTime = 75000 // 75秒超时
        const waitStartTime = Date.now()
        
        while (isLoadingFFmpeg) {
            await new Promise(resolve => setTimeout(resolve, 100))
            
            // 检查超时
            if (Date.now() - waitStartTime > maxWaitTime) {
                isFFmpegAvailable = false
                throw new Error('等待加载超时')
            }
        }
        
        return ffmpegInstance
    }
    
    // 开始加载
    isLoadingFFmpeg = true
    try {
        ffmpegInstance = new FFmpeg()
        // ... 加载逻辑
        isFFmpegLoaded = true
        return ffmpegInstance
    } finally {
        isLoadingFFmpeg = false
    }
}

关键点：

• 使用标志位 isLoadingFFmpeg 防止并发加载
• 轮询等待机制，避免重复初始化
• 超时保护，防止无限等待

2. 本地文件优先 + CDN 回退

问题：每次从 CDN 下载 20MB wasm 文件，首次加载需要 10-60 秒。

解决：优先使用本地文件（1-3 秒），失败时自动回退到 CDN。

const useLocalFiles = true
const localBasePath = '/ffmpeg-core'
const cdnBaseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.6/dist/esm'

let coreURL, wasmURL

if (useLocalFiles) {
    try {
        // 检查本地文件是否存在
        const baseURL = window.location.origin
        const localCorePath = `${baseURL}${localBasePath}/ffmpeg-core.js`
        const localWasmPath = `${baseURL}${localBasePath}/ffmpeg-core.wasm`
        
        const coreResponse = await fetch(localCorePath, { method: 'HEAD' })
        const wasmResponse = await fetch(localWasmPath, { method: 'HEAD' })
        
        if (coreResponse.ok && wasmResponse.ok) {
            // 使用本地文件，转换为 Blob URL
            coreURL = await toBlobURL(localCorePath, 'text/javascript')
            wasmURL = await toBlobURL(localWasmPath, 'application/wasm')
            console.log('使用本地文件，加载速度提升 10-20 倍')
        } else {
            throw new Error('本地文件不存在')
        }
    } catch (error) {
        // 回退到 CDN
        console.warn('本地文件不可用，回退到 CDN')
        coreURL = await toBlobURL(`${cdnBaseURL}/ffmpeg-core.js`, 'text/javascript')
        wasmURL = await toBlobURL(`${cdnBaseURL}/ffmpeg-core.wasm`, 'application/wasm')
    }
}

// 加载 FFmpeg
await ffmpegInstance.load({ coreURL, wasmURL })

性能对比：

• 本地文件：1-3 秒
• CDN（首次）：10-60 秒
• CDN（缓存后）：< 1 秒

关键点：

• 使用 fetch HEAD 检查文件是否存在
• toBlobURL 转换确保 FFmpeg.wasm 正确加载
• 自动回退机制，保证可用性

3. 超时保护机制

问题：网络不稳定时，ffmpeg.load() 可能永远不返回，导致页面卡死。

解决：使用 Promise.race 实现超时控制。

const loadTimeout = 60000 // 60秒超时

const loadPromise = ffmpegInstance.load({
    coreURL: coreURL,
    wasmURL: wasmURL
})

const loadTimeoutPromise = new Promise((_, reject) => {
    setTimeout(() => {
        reject(new Error(`FFmpeg.load() 超时（超过${loadTimeout/1000}秒）`))
    }, loadTimeout)
})

try {
    await Promise.race([loadPromise, loadTimeoutPromise])
    console.log('FFmpeg 加载成功')
} catch (error) {
    // 标记为不可用，避免重复尝试
    isFFmpegAvailable = false
    isLoadingFFmpeg = false
    ffmpegInstance = null
    console.error('FFmpeg 加载失败:', error)
    throw error
}

关键点：

• 60 秒超时（考虑 20MB wasm 下载和编译时间）
• 失败后标记不可用，避免重复尝试
• 清理状态，防止内存泄漏

4. 视频信息提取优化

问题：需要获取视频编码、帧率、分辨率等信息，但浏览器 API 无法直接获取编码信息。

解决：使用 FFmpeg 命令提取信息，并通过日志解析。

// 使用 -vframes 0 只读取元数据，不处理帧，大幅提升速度
const execPromise = ffmpeg.exec([
    '-i', fileName,
    '-hide_banner',
    '-vframes', '0',  // 关键：不处理帧，只读元数据
    '-f', 'null',
    '-'
])

// 监听日志输出
const logs = []
ffmpeg.on('log', ({ message }) => {
    logs.push(message)
})

await execPromise

// 解析日志提取信息
const logText = logs.join('\n')
const videoInfo = parseFFmpegOutput(logText)

关键点：

• -vframes 0 只读取元数据，不处理帧，速度提升 10 倍以上
• 监听 log 事件收集输出
• 即使超时或失败，也尝试从已收集的日志中解析信息

5. 正则解析视频信息

问题：FFmpeg 输出格式多样，需要兼容多种格式。

解决：使用多个正则表达式模式匹配。

function parseFFmpegOutput(output) {
    const info = { 
        codec: null, 
        frameRate: null, 
        duration: null, 
        width: null, 
        height: null 
    }
    
    // 提取编码（支持多种格式）
    const codecPatterns = [
        /Video:\s*(\w+)\s*\([^)]*\)\s*\([^)]*\)/i,  // h264 (High) (avc1)
        /Video:\s*(\w+)\s*\([^)]*\)/i,              // h264 (High)
        /Video:\s*(\w+)\s*,/i                        // h264,
    ]
    
    for (const pattern of codecPatterns) {
        const match = output.match(pattern)
        if (match) {
            info.codec = match[1].toLowerCase()
            // 统一 h264 格式
            if (info.codec === 'h264' || info.codec === 'avc' || info.codec === 'avc1') {
                info.codec = 'h264'
            }
            break
        }
    }
    
    // 提取帧率
    const fpsMatch = output.match(/(\d+(?:\.\d+)?)\s*fps/i)
    if (fpsMatch) {
        info.frameRate = parseFloat(fpsMatch[1])
    }
    
    // 提取分辨率
    const resolutionMatch = output.match(/Video:[^,]*,\s*(\d+)x(\d+)/i)
    if (resolutionMatch) {
        info.width = parseInt(resolutionMatch[1])
        info.height = parseInt(resolutionMatch[2])
    }
    
    // 提取时长
    const durationMatch = output.match(/Duration:\s*(\d+):(\d+):(\d+(?:\.\d+)?)/i)
    if (durationMatch) {
        const hours = parseInt(durationMatch[1])
        const minutes = parseInt(durationMatch[2])
        const seconds = parseFloat(durationMatch[3])
        info.duration = hours * 3600 + minutes * 60 + seconds
    }
    
    return info
}

关键点：

• 多个正则模式匹配不同输出格式
• 兼容 h264、avc、avc1 等多种编码格式
• 支持多种帧率格式（fps、r_frame_rate、tbr）

6. 后台预加载优化

问题：用户点击验证时才开始加载，需要等待 10-60 秒。

解决：应用启动后延迟预加载，提前准备好 FFmpeg。

export async function preloadFFmpeg() {
    if (isFFmpegLoaded || isLoadingFFmpeg) {
        return // 已加载或正在加载，跳过
    }
    
    if (!isFFmpegAvailable) {
        return // 不可用，跳过
    }
    
    // 延迟 2 秒预加载，不阻塞应用启动
    setTimeout(async () => {
        try {
            console.log('开始后台预加载 FFmpeg...')
            await initFFmpeg()
            console.log('预加载完成，用户使用时无需等待')
        } catch (error) {
            // 预加载失败不影响后续使用
            console.warn('预加载失败:', error.message)
        }
    }, 2000)
}

// 应用启动时调用
preloadFFmpeg()

关键点：

• 延迟 2 秒，不阻塞应用启动
• 预加载失败不影响后续使用
• 用户点击时，FFmpeg 可能已经准备好了

7. 文件系统操作

问题：需要在浏览器中处理视频文件，但没有真实的文件系统。

解决：使用 FFmpeg 虚拟文件系统。

// 下载视频文件
const videoData = await fetchFile(videoUrl)

// 写入 FFmpeg 虚拟文件系统
const fileName = videoUrl.includes('.mp4') ? 'input.mp4' : 'input.mov'
await ffmpeg.writeFile(fileName, videoData)

// 执行命令
await ffmpeg.exec(['-i', fileName, '-hide_banner', '-vframes', '0', '-f', 'null', '-'])

// 清理临时文件
try {
    await ffmpeg.deleteFile(fileName)
} catch (e) {
    console.warn('清理临时文件失败:', e)
}

关键点：

• 使用虚拟文件系统，无需真实文件
• 处理完成后清理临时文件，避免内存泄漏
• 根据 URL 自动判断文件类型

完整使用示例

import { FFmpeg } from '@ffmpeg/ffmpeg'
import { fetchFile, toBlobURL } from '@ffmpeg/util'

// 初始化 FFmpeg（单例模式）
const ffmpeg = await initFFmpeg()

// 获取视频信息
export async function getVideoInfo(videoUrl, onProgress) {
    try {
        // 1. 下载视频文件
        if (onProgress) onProgress(30)
        const videoData = await fetchFile(videoUrl)
        
        // 2. 写入虚拟文件系统
        if (onProgress) onProgress(50)
        const fileName = videoUrl.includes('.mp4') ? 'input.mp4' : 'input.mov'
        await ffmpeg.writeFile(fileName, videoData)
        
        // 3. 执行命令提取信息
        if (onProgress) onProgress(70)
        const logs = []
        ffmpeg.on('log', ({ message }) => logs.push(message))
        
        await ffmpeg.exec([
            '-i', fileName,
            '-hide_banner',
            '-vframes', '0',
            '-f', 'null',
            '-'
        ])
        
        // 4. 解析日志
        if (onProgress) onProgress(95)
        const videoInfo = parseFFmpegOutput(logs.join('\n'))
        
        // 5. 清理
        await ffmpeg.deleteFile(fileName)
        if (onProgress) onProgress(100)
        
        return videoInfo
    } catch (error) {
        console.error('获取视频信息失败:', error)
        throw error
    }
}

性能优化总结

优化项	优化前	优化后	提升
首次加载时间	10-60 秒	1-3 秒（本地文件）	10-20 倍
信息提取速度	5-10 秒	0.5-1 秒（-vframes 0）	10 倍
并发调用冲突	重复加载	单例模式	100% 解决
卡死问题	经常发生	超时保护	100% 解决

最佳实践建议

1. 使用单例模式：避免重复初始化，节省内存和加载时间
2. 本地文件优先：将 wasm 文件放到 public 目录，大幅提升加载速度
3. 超时保护：所有异步操作都要设置超时，防止卡死
4. 预加载优化：应用启动后延迟预加载，提前准备好 FFmpeg
5. 日志解析：使用 -vframes 0 只读元数据，提升速度
6. 资源清理：及时清理临时文件和事件监听器，避免内存泄漏

总结

通过单例模式、本地文件优先、超时保护、预加载优化等技术手段，我们成功解决了 FFmpeg.wasm 在浏览器应用中的性能问题。首次加载时间从 10-60 秒降低到 1-3 秒，信息提取速度提升 10 倍，并发调用冲突和卡死问题得到 100% 解决。

这些实践经验不仅适用于 FFmpeg.wasm，对于其他大型 WebAssembly 库的集成也有参考价值。希望本文能帮助到正在使用或准备使用 FFmpeg.wasm 的开发者。