Skip to content

Commit 0a96b78

Browse files
jeromewujeromewu
committed
Update usage
1 parent 8c2e8a8 commit 0a96b78

File tree

1 file changed

+46
-41
lines changed
  • apps/website/docs/getting-started

1 file changed

+46
-41
lines changed

‎apps/website/docs/getting-started/usage.md

Lines changed: 46 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Learn the basics of using ffmpeg.wasm.
66
It is recommended to read [Overview](/docs/overview) first.
77
:::
88

9-
## Transcode avi to mp4 video
9+
## Transcode webm to mp4 video
1010

1111
:::caution
1212
If you are a [vite](https://vitejs.dev/) user, use `esm` in **baseURL** instead of `umd`:
@@ -26,23 +26,23 @@ function() {
2626
const load = async () => {
2727
const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.2/dist/umd'
2828
const ffmpeg = ffmpegRef.current;
29-
ffmpeg.on("log", ({ message }) => {
29+
ffmpeg.on('log', ({ message }) => {
3030
messageRef.current.innerHTML = message;
3131
console.log(message);
3232
});
3333
// toBlobURL is used to bypass CORS issue, urls with the same
3434
// domain can be used directly.
3535
await ffmpeg.load({
36-
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
37-
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"),
36+
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
37+
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
3838
});
3939
setLoaded(true);
4040
}
4141

4242
const transcode = async () => {
4343
const ffmpeg = ffmpegRef.current;
44-
await ffmpeg.writeFile("input.avi", await fetchFile('/video/video-15s.avi'));
45-
await ffmpeg.exec(['-i', 'input.avi', 'output.mp4']);
44+
await ffmpeg.writeFile('input.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm'));
45+
await ffmpeg.exec(['-i', 'input.webm', 'output.mp4']);
4646
const data = await ffmpeg.readFile('output.mp4');
4747
videoRef.current.src =
4848
URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'}));
@@ -52,7 +52,7 @@ function() {
5252
? (
5353
<>
5454
<video ref={videoRef} controls></video><br/>
55-
<button onClick={transcode}>Transcode avi to mp4</button>
55+
<button onClick={transcode}>Transcode webm to mp4</button>
5656
<p ref={messageRef}></p>
5757
<p>Open Developer Tools (Ctrl+Shift+I) to View Logs</p>
5858
</>
@@ -83,24 +83,24 @@ function() {
8383
const load = async () => {
8484
const baseURL = 'https://unpkg.com/@ffmpeg/core-mt@0.12.2/dist/umd'
8585
const ffmpeg = ffmpegRef.current;
86-
ffmpeg.on("log", ({ message }) => {
86+
ffmpeg.on('log', ({ message }) => {
8787
messageRef.current.innerHTML = message;
8888
console.log(message);
8989
});
9090
// toBlobURL is used to bypass CORS issue, urls with the same
9191
// domain can be used directly.
9292
await ffmpeg.load({
93-
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
94-
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"),
95-
workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, "text/javascript"),
93+
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
94+
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
95+
workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, 'text/javascript'),
9696
});
9797
setLoaded(true);
9898
}
9999

100100
const transcode = async () => {
101101
const ffmpeg = ffmpegRef.current;
102-
await ffmpeg.writeFile("input.avi", await fetchFile('/video/video-15s.avi'));
103-
await ffmpeg.exec(['-i', 'input.avi', 'output.mp4']);
102+
await ffmpeg.writeFile('input.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm'));
103+
await ffmpeg.exec(['-i', 'input.webm', 'output.mp4']);
104104
const data = await ffmpeg.readFile('output.mp4');
105105
videoRef.current.src =
106106
URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'}));
@@ -110,7 +110,7 @@ function() {
110110
? (
111111
<>
112112
<video ref={videoRef} controls></video><br/>
113-
<button onClick={transcode}>Transcode avi to mp4</button>
113+
<button onClick={transcode}>Transcode webm to mp4</button>
114114
<p ref={messageRef}></p>
115115
<p>Open Developer Tools (Ctrl+Shift+I) to View Logs</p>
116116
</>
@@ -136,24 +136,24 @@ function() {
136136
const load = async () => {
137137
const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.2/dist/umd'
138138
const ffmpeg = ffmpegRef.current;
139-
ffmpeg.on("log", ({ message }) => {
139+
ffmpeg.on('log', ({ message }) => {
140140
messageRef.current.innerHTML = message;
141141
console.log(message);
142142
});
143143
// toBlobURL is used to bypass CORS issue, urls with the same
144144
// domain can be used directly.
145145
await ffmpeg.load({
146-
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
147-
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"),
146+
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
147+
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
148148
});
149149
setLoaded(true);
150150
}
151151

152152
const transcode = async () => {
153153
const ffmpeg = ffmpegRef.current;
154-
await ffmpeg.writeFile("input.avi", await fetchFile('/video/video-15s.avi'));
154+
await ffmpeg.writeFile('input.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm'));
155155
// The exec should stop after 1 second.
156-
await ffmpeg.exec(['-i', 'input.avi', 'output.mp4'], 1000);
156+
await ffmpeg.exec(['-i', 'input.webm', 'output.mp4'], 1000);
157157
const data = await ffmpeg.readFile('output.mp4');
158158
videoRef.current.src =
159159
URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'}));
@@ -163,7 +163,7 @@ function() {
163163
? (
164164
<>
165165
<video ref={videoRef} controls></video><br/>
166-
<button onClick={transcode}>Transcode avi to mp4</button>
166+
<button onClick={transcode}>Transcode webm to mp4</button>
167167
<p ref={messageRef}></p>
168168
<p>Open Developer Tools (Ctrl+Shift+I) to View Logs</p>
169169
</>
@@ -195,22 +195,22 @@ function() {
195195
const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.2/dist/umd'
196196
const ffmpeg = ffmpegRef.current;
197197
// Listen to progress event instead of log.
198-
ffmpeg.on("progress", ({ progress, time }) => {
198+
ffmpeg.on('progress', ({ progress, time }) => {
199199
messageRef.current.innerHTML = `${progress * 100} % (transcoded time: ${time / 1000000} s)`;
200200
});
201201
// toBlobURL is used to bypass CORS issue, urls with the same
202202
// domain can be used directly.
203203
await ffmpeg.load({
204-
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
205-
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"),
204+
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
205+
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
206206
});
207207
setLoaded(true);
208208
}
209209

210210
const transcode = async () => {
211211
const ffmpeg = ffmpegRef.current;
212-
await ffmpeg.writeFile("input.avi", await fetchFile('/video/video-15s.avi'));
213-
await ffmpeg.exec(['-i', 'input.avi', 'output.mp4']);
212+
await ffmpeg.writeFile('input.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm'));
213+
await ffmpeg.exec(['-i', 'input.webm', 'output.mp4']);
214214
const data = await ffmpeg.readFile('output.mp4');
215215
videoRef.current.src =
216216
URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'}));
@@ -220,7 +220,7 @@ function() {
220220
? (
221221
<>
222222
<video ref={videoRef} controls></video><br/>
223-
<button onClick={transcode}>Transcode avi to mp4</button>
223+
<button onClick={transcode}>Transcode webm to mp4</button>
224224
<p ref={messageRef}></p>
225225
</>
226226
)
@@ -245,37 +245,42 @@ function() {
245245
const load = async () => {
246246
const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.2/dist/umd'
247247
const ffmpeg = ffmpegRef.current;
248-
ffmpeg.on("log", ({ message }) => {
248+
ffmpeg.on('log', ({ message }) => {
249249
messageRef.current.innerHTML = message;
250250
console.log(message);
251251
});
252252
// toBlobURL is used to bypass CORS issue, urls with the same
253253
// domain can be used directly.
254254
await ffmpeg.load({
255-
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
256-
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"),
255+
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
256+
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
257257
});
258258
setLoaded(true);
259259
}
260260

261261
const transcode = async () => {
262262
const ffmpeg = ffmpegRef.current;
263-
await ffmpeg.writeFile("input.avi", await fetchFile('/video/video-15s.avi'));
263+
await ffmpeg.writeFile('input.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm'));
264264
await ffmpeg.exec([
265265
'-i',
266-
'input.avi',
266+
'input.webm',
267267
'-f',
268268
'segment',
269269
'-segment_time',
270270
'3',
271+
'-g',
272+
'9',
273+
'-sc_threshold',
274+
'0',
275+
'-force_key_frames',
276+
'expr:gte(t,n_forced*9)',
271277
'-reset_timestamps',
272278
'1',
273279
'-map',
274-
'0:0',
275-
'-an',
280+
'0',
276281
'output_%d.mp4'
277282
]);
278-
const data = await ffmpeg.readFile('output_2.mp4');
283+
const data = await ffmpeg.readFile('output_1.mp4');
279284
videoRef.current.src =
280285
URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'}));
281286
}
@@ -284,7 +289,7 @@ function() {
284289
? (
285290
<>
286291
<video ref={videoRef} controls></video><br/>
287-
<button onClick={transcode}>Split video to segments of 3 sec. and plays 3rd segment</button>
292+
<button onClick={transcode}>Split video to segments of 3 sec. and plays 2nd segment</button>
288293
<p ref={messageRef}></p>
289294
<p>Open Developer Tools (Ctrl+Shift+I) to View Logs</p>
290295
</>
@@ -310,26 +315,26 @@ function() {
310315
const load = async () => {
311316
const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.2/dist/umd'
312317
const ffmpeg = ffmpegRef.current;
313-
ffmpeg.on("log", ({ message }) => {
318+
ffmpeg.on('log', ({ message }) => {
314319
messageRef.current.innerHTML = message;
315320
console.log(message);
316321
});
317322
// toBlobURL is used to bypass CORS issue, urls with the same
318323
// domain can be used directly.
319324
await ffmpeg.load({
320-
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
321-
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"),
325+
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
326+
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
322327
});
323328
setLoaded(true);
324329
}
325330

326331
const transcode = async () => {
327332
const ffmpeg = ffmpegRef.current;
328-
await ffmpeg.writeFile("input.avi", await fetchFile('/video/video-15s.avi'));
329-
await ffmpeg.writeFile("arial.ttf", await fetchFile('/asset/arial.ttf'));
333+
await ffmpeg.writeFile('input.webm', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm'));
334+
await ffmpeg.writeFile('arial.ttf', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/arial.ttf'));
330335
await ffmpeg.exec([
331336
'-i',
332-
'input.avi',
337+
'input.webm',
333338
'-vf',
334339
'drawtext=fontfile=/arial.ttf:text=\'ffmpeg.wasm\':x=10:y=10:fontsize=24:fontcolor=white',
335340
'output.mp4',

0 commit comments

Comments
 (0)