/
simple.html
98 lines (84 loc) · 2.67 KB
/
simple.html
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
92
93
94
95
96
97
98
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class='message'></div>
<canvas
id='canvas'
style="width: 50vw; height: auto; border: 1px solid black"
></canvas
><br />
<script type="module">
import { simd as SIMD } from "https://unpkg.com/wasm-feature-detect?module";
import loadEncoder from "/build/mp4-encoder.js";
const width = 1920;
const height = 1080;
const fps = 30;
const totalFrames = 100;
document.querySelector('.message').textContent = `
Encoding ${totalFrames} frames at ${width} x ${height}
`.trim();
const canvas = document.querySelector("#canvas");
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d");
const drawFrame = (interpolant) => {
ctx.fillStyle = "#0000FF";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#FF0000";
ctx.fillRect(
0,
0,
canvas.width * interpolant,
canvas.height * interpolant
);
};
const download = (buf, filename) => {
const url = URL.createObjectURL(new Blob([buf], { type: "video/mp4" }));
const anchor = document.createElement("a");
anchor.href = url;
anchor.download = filename || "download";
anchor.click();
};
(async () => {
// You can enable this if you have WASM SIMD support,
// you can detect it with "wasm-feature-detect" module
const simd = await SIMD();
// We first need to load the encoder WASM
const Encoder = await loadEncoder({
// Whether to search for '.simd.wasm' file
simd,
// Note: You can override the WASM file directory locator like so
// getWasmPath (file, scriptDir, isSimd) {
// return '/my-wasm-dir/' + file;
// }
});
console.time('encoding');
// Now we can create an encoder interface
const encoder = Encoder.create({
width: canvas.width,
height: canvas.height,
fps
});
let frame = 0;
requestAnimationFrame(loop);
function loop() {
if (frame >= totalFrames) {
const buf = encoder.end();
console.timeEnd('encoding')
download(buf);
return;
}
requestAnimationFrame(loop);
drawFrame(frame / (totalFrames - 1));
const rgba = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
encoder.encodeRGB(rgba);
frame++;
}
})();
</script>
<script></script>
</body>
</html>