We got ffmpeg loaded :D
This commit is contained in:
22
src/App.tsx
22
src/App.tsx
@@ -1,16 +1,32 @@
|
|||||||
import { JSX, useEffect, useState } from "react";
|
import { JSX, useEffect, useRef, useState } from "react";
|
||||||
import VideoPlayer from "./video/VideoPlayer";
|
import VideoPlayer from "./video/VideoPlayer";
|
||||||
import VideoPicker from "./video/VideoPicker";
|
import VideoPicker from "./video/VideoPicker";
|
||||||
import Segment from "./segmenting/Segment";
|
import Segment from "./segmenting/Segment";
|
||||||
import SegmentList from "./segmenting/SegmentList";
|
import SegmentList from "./segmenting/SegmentList";
|
||||||
|
import { FFmpeg } from "@ffmpeg/ffmpeg";
|
||||||
|
|
||||||
function App(): JSX.Element {
|
function App(): JSX.Element {
|
||||||
const [path, setPath] = useState<string>("");
|
const [path, setPath] = useState<string>("");
|
||||||
const [segments, setSegments] = useState<Segment[]>([]);
|
const [segments, setSegments] = useState<Segment[]>([]);
|
||||||
|
const [loaded, setLoaded] = useState<boolean>(false);
|
||||||
|
const ffmpegRef = useRef(new FFmpeg());
|
||||||
|
|
||||||
const load = async () => {};
|
const load = async () => {
|
||||||
|
const baseURL =
|
||||||
|
"https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd";
|
||||||
|
const ffmpeg = ffmpegRef.current;
|
||||||
|
ffmpeg.on("log", ({ message }) => {
|
||||||
|
console.log(message);
|
||||||
|
});
|
||||||
|
// toBlobURL is used to bypass CORS issue, urls with the same
|
||||||
|
// domain can be used directly.
|
||||||
|
await ffmpeg.load();
|
||||||
|
setLoaded(true);
|
||||||
|
};
|
||||||
|
|
||||||
useEffect(() => {});
|
useEffect(() => {
|
||||||
|
load();
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div id="app">
|
<div id="app">
|
||||||
|
|||||||
Reference in New Issue
Block a user