Initial import

alanm-hpe · Feb 10, 2023 · 0207952 · 0207952
1 parent 515ba99
commit 0207952
Show file tree

Hide file tree

Showing 8 changed files with 93,394 additions and 0 deletions.
diff --git a/example/.index.html.swp b/example/.index.html.swp
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+</head>
+
+<body>
+  <script src="https://unpkg.com/h264-mp4-encoder/embuild/dist/h264-mp4-encoder.web.js"></script>
+  <!--<script src="https://unpkg.com/h264-mp4-encoder/embuild/dist/h264-mp4-encoder.web.js"></script>-->
+  <canvas width="800" height="600" style="border:1px solid black;"></canvas><br>
+  <a href="https://github.com/TrevorSundberg/h264-mp4-encoder/blob/master/test.html">See The Source</a>
+  <script>
+    const canvas = document.getElementsByTagName("canvas")[0];
+    const ctx = canvas.getContext("webgl");
+    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 = (url, filename) => {
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = filename || "download";
+      anchor.click();
+    };
+
+    HME.createH264MP4Encoder().then(async encoder => {
+      encoder.width = canvas.width;
+      encoder.height = canvas.height;
+      encoder.initialize();
+
+      const frames = 100;
+      for (let i = 0; i <= frames; ++i) {
+        drawFrame(i / frames);
+        encoder.addFrameRgba(ctx.getImageData(0, 0, canvas.width, canvas.height).data);
+        await new Promise(resolve => window.requestAnimationFrame(resolve));
+      }
+
+      encoder.finalize();
+      const uint8Array = encoder.FS.readFile(encoder.outputFilename);
+      download(URL.createObjectURL(new Blob([uint8Array], { type: "video/mp4" })))
+      encoder.delete();
+    })
+  </script>
+  <script>
+  </script>
+</body>
+
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>STG _v.test</title>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
+  <script src="https://unpkg.com/h264-mp4-encoder/embuild/dist/h264-mp4-encoder.web.js"></script>
+
+  <link rel="stylesheet" href="style.css">
+  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+  <script src="sketch_saveTest.js" type="text/javascript"></script>
+
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300&display=swap" rel="stylesheet">
+
+  <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
+</head>
+
+<body>
+
+</body>
+
+</html>