diff --git a/src/services/ffmpegService.ts b/src/services/ffmpegService.ts new file mode 100644 index 000000000..365867de6 --- /dev/null +++ b/src/services/ffmpegService.ts @@ -0,0 +1,44 @@ +import { createFFmpeg, FFmpeg } from '@ffmpeg/ffmpeg'; +import { getUint8ArrayView } from './upload/readFileService'; + +class FFmpegService { + private ffmpeg: FFmpeg = null; + async init() { + try { + this.ffmpeg = createFFmpeg({ + log: true, + corePath: '/js/ffmpeg-core.js', + }); + console.log('Loading ffmpeg-core.js'); + await this.ffmpeg.load(); + } catch (e) { + throw Error('ffmpeg load failed'); + } + } + + async generateThumbnail(file: File) { + if (!this.ffmpeg) { + await this.init(); + } + this.ffmpeg.FS( + 'writeFile', + file.name, + await getUint8ArrayView(new FileReader(), file) + ); + + await this.ffmpeg.run( + '-i', + file.name, + '-ss', + '00:00:01.000', + '-vframes', + '1', + 'thumb.png' + ); + console.log('Complete transcoding'); + const thumb = this.ffmpeg.FS('readFile', 'thumb.png'); + return thumb; + } +} + +export default new FFmpegService(); diff --git a/src/services/upload/thumbnailService.ts b/src/services/upload/thumbnailService.ts index dd0e25d58..c02d06704 100644 --- a/src/services/upload/thumbnailService.ts +++ b/src/services/upload/thumbnailService.ts @@ -4,7 +4,7 @@ import { convertHEIC2JPEG } from 'utils/file'; import { logError } from 'utils/sentry'; import { BLACK_THUMBNAIL_BASE64 } from '../../../public/images/black-thumbnail-b64'; import { getUint8ArrayView } from './readFileService'; -import { createFFmpeg, FFmpeg } from '@ffmpeg/ffmpeg'; +import FFmpegService from 'services/ffmpegService'; const THUMBNAIL_HEIGHT = 720; const MAX_ATTEMPTS = 3; @@ -27,7 +27,7 @@ export async function generateThumbnail( canvas = await generateImageThumbnail(file, isHEIC); } else { try { - const thumb = await ffmpegThumbnailGenerator(file); + const thumb = await FFmpegService.generateThumbnail(file); return { thumbnail: thumb, hasStaticThumbnail: false }; } catch (e) { canvas = await generateVideoThumbnail(file); @@ -189,36 +189,3 @@ async function thumbnailCanvasToBlob(canvas: HTMLCanvasElement) { return thumbnailBlob; } - -async function ffmpegThumbnailGenerator(file: File) { - let ffmpeg: FFmpeg = null; - try { - ffmpeg = createFFmpeg({ - log: true, - corePath: '/js/ffmpeg-core.js', - }); - console.log('Loading ffmpeg-core.js'); - await ffmpeg.load(); - } catch (e) { - throw Error('ffmpeg load failed'); - } - console.log('Start transcoding'); - ffmpeg.FS( - 'writeFile', - file.name, - await getUint8ArrayView(new FileReader(), file) - ); - - await ffmpeg.run( - '-i', - file.name, - '-ss', - '00:00:01.000', - '-vframes', - '1', - 'thumb.png' - ); - console.log('Complete transcoding'); - const thumb = ffmpeg.FS('readFile', 'thumb.png'); - return thumb; -}