dumtruck/konowebcodecs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix type errors in Vite example app (#555)

Browse Source 
* fix type errors in Vite example app

* replace semicolons
This commit is contained in:
zhoug 2023-08-19 22:21:45 -03:00 committed by GitHub
parent d9710f7a5e
commit 3b639732f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/react-vite-app/src/App.tsx
View File

@ -5,14 +5,14 @@ import { toBlobURL, fetchFile } from "@ffmpeg/util";
function App() { function App() {
const [loaded, setLoaded] = useState(false); const [loaded, setLoaded] = useState(false);
const ffmpegRef = useRef(new FFmpeg()); const ffmpegRef = useRef(new FFmpeg());
const videoRef = useRef(null); const videoRef = useRef<HTMLVideoElement | null>(null)
const messageRef = useRef(null); const messageRef = useRef<HTMLParagraphElement | null>(null)
const load = async () => { const load = async () => {
const baseURL = "https://unpkg.com/@ffmpeg/core-mt@0.12.2/dist/esm"; const baseURL = "https://unpkg.com/@ffmpeg/core-mt@0.12.2/dist/esm";
const ffmpeg = ffmpegRef.current; const ffmpeg = ffmpegRef.current;
ffmpeg.on("log", ({ message }) => { ffmpeg.on("log", ({ message }) => {
messageRef.current.innerHTML = message; if (messageRef.current) messageRef.current.innerHTML = message;
}); });
// toBlobURL is used to bypass CORS issue, urls with the same // toBlobURL is used to bypass CORS issue, urls with the same
// domain can be used directly. // domain can be used directly.
@ -35,10 +35,13 @@ function App() {
const ffmpeg = ffmpegRef.current; const ffmpeg = ffmpegRef.current;
await ffmpeg.writeFile("input.avi", await fetchFile(videoURL)); await ffmpeg.writeFile("input.avi", await fetchFile(videoURL));
await ffmpeg.exec(["-i", "input.avi", "output.mp4"]); await ffmpeg.exec(["-i", "input.avi", "output.mp4"]);
const data = await ffmpeg.readFile("output.mp4"); const fileData = await ffmpeg.readFile('output.mp4');
const data = new Uint8Array(fileData as ArrayBuffer);
if (videoRef.current) {
videoRef.current.src = URL.createObjectURL( videoRef.current.src = URL.createObjectURL(
new Blob([data.buffer], { type: "video/mp4" }) new Blob([data.buffer], { type: 'video/mp4' })
); )
}
}; };
return loaded ? ( return loaded ? (