feat: add wasm implementation

package.json

@@ -13,6 +13,8 @@
 		"vite": "^5.3.4"
 	},
 	"dependencies": {
+		"@ffmpeg/ffmpeg": "^0.12.10",
+		"@ffmpeg/util": "^0.12.1",
 		"@types/node": "^20.14.11",
 		"ffmpeg.js": "^4.2.9003",
 		"vite-plugin-require": "^1.2.14"

src/asm.ts

@@ -27,15 +27,15 @@ export function convertAsm() {
 }
 
 function convertFile(file: File, format: string, mimeType: string) {
-	performance.mark("start");
-
 	const inputFileName = file.name;
 	const outputFileName = inputFileName.split(".")[0] + "-converted." + format;
 
 	let stdout = "";
 	let stderr = "";
 
 	file.arrayBuffer().then((buffer) => {
+		performance.mark("start");
+
 		const result = ffmpeg({
 			MEMFS: [{ name: inputFileName, data: buffer }],
 			arguments: ["-i", inputFileName, outputFileName],
@@ -54,6 +54,8 @@ function convertFile(file: File, format: string, mimeType: string) {
 
 		const out = result.MEMFS[0];
 
+		performance.mark("end");
+
 		const blob = new Blob([out.data], { type: mimeType });
 		const downloadUrl = URL.createObjectURL(blob);
 		const link = document.createElement("a");
@@ -62,7 +64,6 @@ function convertFile(file: File, format: string, mimeType: string) {
 		link.click();
 		URL.revokeObjectURL(downloadUrl);
 
-		performance.mark("end");
 		const measure = performance.measure("test", "start", "end");
 
 		document.getElementById(

src/wasm.ts

@@ -1,3 +1,8 @@
+import { FFmpeg } from "@ffmpeg/ffmpeg";
+import { fetchFile, toBlobURL } from "@ffmpeg/util";
+
+let ffmpeg: FFmpeg | null = null;
+
 let file: File;
 
 export function handleWasmFile() {
@@ -9,7 +14,7 @@ export function handleWasmFile() {
 	);
 }
 
-export function convertWasm() {
+export async function convertWasm() {
 	if (!file) {
 		alert("Please select a file first.");
 		return;
@@ -21,7 +26,52 @@ export function convertWasm() {
 	const format = formatInput.options[formatInput.selectedIndex].text;
 	const mimeType = formatInput.options[formatInput.selectedIndex].value;
 
-	convertFile(file, format, mimeType);
+	await convertFile(file, format, mimeType);
 }
 
-function convertFile(file: File, format: string, mimeType: string) {}
+async function convertFile(file: File, format: string, mimeType: string) {
+
+	const inputFileName = file.name;
+	const outputFileName = inputFileName.split(".")[0] + "-converted." + format;
+
+	if (ffmpeg === null) {
+		const baseURL = "https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm";
+		ffmpeg = new FFmpeg();
+		ffmpeg.on("log", ({ message }) => {
+			console.log(message);
+		});
+		ffmpeg.on("progress", ({ progress }) => {
+			console.log(`${progress * 100} %`);
+		});
+		await ffmpeg.load({
+			coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
+			wasmURL: await toBlobURL(
+				`${baseURL}/ffmpeg-core.wasm`,
+				"application/wasm"
+			),
+		});
+	}
+	performance.mark("start");
+
+	await ffmpeg.writeFile(inputFileName, await fetchFile(file));
+	console.log("Start transcoding");
+	await ffmpeg.exec(["-i", inputFileName, outputFileName]);
+	console.log("Complete transcoding");
+	const data = await ffmpeg.readFile(outputFileName);
+
+	performance.mark("end");
+
+	const blob = new Blob([data], { type: mimeType });
+	const downloadUrl = URL.createObjectURL(blob);
+	const link = document.createElement("a");
+	link.href = downloadUrl;
+	link.download = outputFileName;
+	link.click();
+	URL.revokeObjectURL(downloadUrl);
+
+	const measure = performance.measure("test", "start", "end");
+
+	document.getElementById(
+		"wasm-time"
+	)!.innerText = `Duration: ${measure.duration.toFixed(2)} ms`;
+}

vite.config.js

@@ -6,4 +6,7 @@ export default defineConfig({
     plugins: [
         vitePluginRequire.default()
     ],
+    optimizeDeps: {
+        exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util']
+    }
 });