/
main.ts
92 lines (79 loc) · 2.52 KB
/
main.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import './style.css';
import typescriptLogo from './typescript.svg';
import viteLogo from '/vite.svg';
import { FFmpeg } from '@diffusion-studio/ffmpeg-js';
const ffmpeg = new FFmpeg({ log: false });
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="${viteLogo}" class="logo" alt="Vite logo" />
</a>
<a href="https://www.typescriptlang.org/" target="_blank">
<img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
</a>
<h1>Vite + TypeScript + FFmpeg</h1>
<div class="card">
<button id="selector" type="button">Select File</button>
</div>
<p class="read-the-docs">
Convert MP4 into AVI
</p>
</div>
`
const showFileDialog = async (accept: string) => {
return new Promise<File | undefined>((resolve) => {
// setup input
const input = document.createElement('input');
// document.head.appendChild(input);
input.type = "file";
input.accept = accept;
// listen for changes
input.onchange = (fileEvent: Event) => {
const file = (<HTMLInputElement>fileEvent.target)?.files?.[0];
resolve(file);
}
input.click();
});
}
const readFile = async (file: File) => {
return new Promise<Blob | undefined>((resolve) => {
// setting up the reader
const reader = new FileReader();
reader.readAsArrayBuffer(file);
// read file
reader.onload = readerEvent => {
const content = readerEvent?.target?.result;
if (!content || typeof content == "string") {
resolve(undefined);
} else {
resolve(new Blob([new Uint8Array(content)], { type: file.type }));
}
}
})
}
const downloadData = (file: Uint8Array, mimeType: string) => {
// Create link and download
const a = document.createElement('a');
document.head.appendChild(a);
a.download = `rendered-file.${mimeType.split("/").at(1)}`
a.href = URL.createObjectURL(
new Blob([file], { type: mimeType })
)
a.click();
}
document.getElementById('selector')?.addEventListener('click', async () => {
const file = await showFileDialog('video/mp4');
if (!file) return;
const blob = await readFile(file);
if (!blob) return;
const result: Uint8Array | undefined = await ffmpeg
.input({ source: blob })
.ouput({ format: 'avi' })
.export()
if (!result) {
alert('File processing failed!');
} else {
alert('File has been exported successfully and will be saved to your downloads folder');
downloadData(result, 'video/avi');
}
});