diff --git "a/public/\345\233\276\347\211\2071.png" "b/public/\345\233\276\347\211\2071.png" new file mode 100644 index 0000000..c88da4e Binary files /dev/null and "b/public/\345\233\276\347\211\2071.png" differ diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 88a046d..51d90c0 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,6 +1,7 @@ import '@/styles/globals.css' import { createTheme, CssBaseline, ThemeProvider } from '@mui/material'; import type { AppProps } from 'next/app' +import Head from 'next/head'; const theme = createTheme({ components: { @@ -22,6 +23,9 @@ export default function App({ Component, pageProps }: AppProps) { return ( + + + ) diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 8b703e2..7835758 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -3,9 +3,7 @@ import { Html, Head, Main, NextScript } from 'next/document' export default function Document() { return ( - - - +
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 03ca547..4b6c5f0 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,4 +1,4 @@ -import { ffmpeg, fetchFile } from "@/utils/ffmpeg"; +import {createFFmpeg, fetchFile} from '@ffmpeg/ffmpeg' import { getVideoMetadata } from "@/utils/video"; import { Box, @@ -10,9 +10,14 @@ import { LinearProgress } from "@mui/material"; import FileUploadIcon from "@mui/icons-material/FileUpload"; -import { ChangeEvent, useRef, useState } from "react"; +import { ChangeEvent, useEffect, useRef, useState } from "react"; import {saveAs} from "file-saver" +let ffmpeg: any +(async () => { + ffmpeg = createFFmpeg({ log: true, corePath: `${location.protocol + location.host}/ffmpeg-core.js`}); + await ffmpeg.load(); +})() export default function Home() { const [subtitles, setSubtitles] = useState([]); const audioRef = useRef(null); @@ -53,7 +58,7 @@ export default function Home() { ffmpeg.FS( "writeFile", `tmp/fonts`, - await fetchFile("http://localhost:3000/YeZiGongChangChuanQiuShaXingKai-2.ttf") + await fetchFile(`${location.protocol + location.host}/YeZiGongChangChuanQiuShaXingKai-2.ttf`) ); const files = videoFiles.filter(Boolean) @@ -102,7 +107,7 @@ ${subtitles.join("\n")}`; "output.mp4", ] ); - ffmpeg.setProgress((p) => { + ffmpeg.setProgress((p: any) => { setProgressValue(p.ratio * (i + 1)) }) await ffmpeg.run(...cmd); diff --git a/src/utils/ffmpeg.ts b/src/utils/ffmpeg.ts deleted file mode 100644 index c667cce..0000000 --- a/src/utils/ffmpeg.ts +++ /dev/null @@ -1,8 +0,0 @@ -import {createFFmpeg, fetchFile} from '@ffmpeg/ffmpeg' - -const ffmpeg = createFFmpeg({ log: true, corePath: `http://localhost:3000/ffmpeg-core.js`}); -(async () => { - await ffmpeg.load(); -})() - -export {ffmpeg, fetchFile} \ No newline at end of file