sundog
/
ffmpeg-explorer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use multi-threading if not chrome

This commit is contained in:
Sam Lavigne 2023-08-20 12:08:46 -04:00
parent 99b4143dd6
commit 5d0663eb12
1 changed files with 45 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/App.svelte
View File

@ -7,9 +7,10 @@
import FilterPicker from "./FilterPicker.svelte"; import FilterPicker from "./FilterPicker.svelte";
import { FFmpeg } from "@ffmpeg/ffmpeg"; import { FFmpeg } from "@ffmpeg/ffmpeg";
import { fetchFile, toBlobURL } from "@ffmpeg/util"; import { fetchFile, toBlobURL } from "@ffmpeg/util";
import {dndzone} from "svelte-dnd-action"; import { dndzone } from "svelte-dnd-action";
const baseURL = "https://unpkg.com/@ffmpeg/core@0.12.2/dist/esm"; const isChrome = navigator.userAgent.match(/chrome|chromium|crios/i);
const baseURL = `https://unpkg.com/@ffmpeg/core${!isChrome ? "-mt" : ""}@0.12.2/dist/esm`;
// const baseURL = ""; // const baseURL = "";
const TIMEOUT = 40000; const TIMEOUT = 40000;
@ -47,7 +48,7 @@
const clist = commandList(); const clist = commandList();
console.log(clist); console.log(clist);
await ffmpeg.exec(clist, TIMEOUT); await ffmpeg.exec(clist, TIMEOUT);
// await ffmpeg.exec(["-f", "lavfi", "-i", "color=size=1280x720:rate=25:color=red", "-t", "5", "out.mp4"]) // await ffmpeg.exec(["-f", "lavfi", "-i", "color=size=1280x720:rate=25:color=red", "-t", "5", "out.mp4"])
message = "Complete transcoding"; message = "Complete transcoding";
const data = await ffmpeg.readFile("out.mp4"); const data = await ffmpeg.readFile("out.mp4");
rendering = false; rendering = false;
@ -55,21 +56,29 @@
rendering = false; rendering = false;
} }
async function loadFFmpeg() { async function loadFFmpeg() {
ffmpeg.on("log", ({ message: msg }) => { ffmpeg.on("log", ({ message: msg }) => {
console.log(msg); console.log(msg);
log += msg + "\n"; log += msg + "\n";
logbox.scrollTop = logbox.scrollHeight; logbox.scrollTop = logbox.scrollHeight;
// message = msg; // message = msg;
}); });
await ffmpeg.load({ if (isChrome) {
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"), await ffmpeg.load({
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"), coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
// workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, "text/javascript"), wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"),
}); // workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, "text/javascript"),
});
} else {
await ffmpeg.load({
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"),
workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, "text/javascript"),
});
}
console.log(ffmpeg); console.log(ffmpeg);
ffmpegLoaded = true; ffmpegLoaded = true;
} }
function updateCommand() { function updateCommand() {
const cInputs = $inputs.map((i) => `-i ${i}`).join(" "); const cInputs = $inputs.map((i) => `-i ${i}`).join(" ");
@ -128,16 +137,16 @@
return command; return command;
} }
function handleFilterSort(e) { function handleFilterSort(e) {
filters.set(e.detail.items); filters.set(e.detail.items);
} }
inputs.subscribe(updateCommand); inputs.subscribe(updateCommand);
output.subscribe(updateCommand); output.subscribe(updateCommand);
filters.subscribe(updateCommand); filters.subscribe(updateCommand);
onMount(async () => { onMount(async () => {
loadFFmpeg(); loadFFmpeg();
}); });
</script> </script>
@ -186,9 +195,9 @@
</section> </section>
<section class="preview"> <section class="preview">
{#if rendering} {#if rendering}
<div class="rendering-video"><span>Rendering...</span></div> <div class="rendering-video"><span>Rendering...</span></div>
{/if} {/if}
<video controls src={videoValue} /> <video controls src={videoValue} />
</section> </section>
@ -203,7 +212,12 @@
<div class="filter-picker"> <div class="filter-picker">
<FilterPicker select={"video"} /> <FilterPicker select={"video"} />
</div> </div>
<div class="filters-holder" use:dndzone={{items:$filters}} on:consider={handleFilterSort} on:finalize={handleFilterSort}> <div
class="filters-holder"
use:dndzone={{ items: $filters }}
on:consider={handleFilterSort}
on:finalize={handleFilterSort}
>
{#each $filters as f (f.id)} {#each $filters as f (f.id)}
<div class="filter"> <div class="filter">
<Filter bind:filter={f} /> <Filter bind:filter={f} />
@ -247,7 +261,7 @@
.preview { .preview {
grid-area: prv; grid-area: prv;
position: relative; position: relative;
} }
.output { .output {
@ -327,16 +341,16 @@
resize: none; resize: none;
flex: 1; flex: 1;
} }
.rendering-video { .rendering-video {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 2; z-index: 2;
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);
top: 0; top: 0;
left: 0; left: 0;
display: grid; display: grid;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
</style> </style>