klren0312 / daliy_knowledge

知识积累,正确使用方式是watch
21 stars 4 forks source link

ffmpeg.wasm截取mp4封面 #720

Open klren0312 opened 1 year ago

klren0312 commented 1 year ago

使用idb-keyval再indexedDB中存wasm

import { createFFmpeg } from '@ffmpeg/ffmpeg/dist/ffmpeg.min.js'
import { get, set } from 'idb-keyval'

const KEY = 'ffmpeg-core.wasm'

export async function initFFmpeg () {
  let wasmBuffer = await get(KEY)
  if (!wasmBuffer) {
    const response = await fetch(window.location.origin + '/ffmpeg-core.wasm')
    wasmBuffer = await response.arrayBuffer()
    set(KEY, wasmBuffer)
  }
  const wasmBlob = new Blob([wasmBuffer], { type: 'application/wasm' })
  const wasmUrl = URL.createObjectURL(wasmBlob)
  if (!window.ffmpeg) {
    window.ffmpeg = createFFmpeg({
      corePath: window.location.origin + '/ffmpeg-core.js',
      wasmPath: wasmUrl,
      workerPath: window.location.origin + '/ffmpeg-core.worker.js',
      log: true
    })
  }
}

// 获取mp4封面
export async function getMp4CoverImg (file: File) {
  if (!window.ffmpeg.isLoaded()) {
    await window.ffmpeg.load()
  }
  const name = file.name.split('.')
  const inType = name.pop()
  const fileName = name.join()
  const buffer = await file.arrayBuffer()
  window.ffmpeg.FS('writeFile', `${fileName}.${inType}`, new Uint8Array(buffer))
  await window.ffmpeg.run('-i', `${fileName}.${inType}`, '-map', '0:v:0', '-c', 'copy', 'cover.jpg')
  const data = window.ffmpeg.FS('readFile', 'cover.jpg')
  const blob = new Blob([data.buffer], { type: 'image/jpeg' })
  const outFile: File = new File([blob], 'cover.jpg', { type: blob.type })
  // 移除内存
  window.ffmpeg.FS('unlink', `${fileName}.${inType}`)
  window.ffmpeg.FS('unlink', 'cover.jpg')
  return outFile
}

export function destroyFFmpeg () {
  // window.ffmpeg = null
}