[wasm] MP4 example (#753)

compositor_web/Cargo.toml

@@ -4,9 +4,6 @@ version = "0.1.0"
 edition = "2021"
 license = "BUSL-1.1"
 
-[build]
-target = "wasm32-unknown-unknown"
-
 [lib]
 crate-type = ["cdylib", "rlib"]
 

compositor_web/src/wasm.rs

@@ -23,7 +23,7 @@ mod wgpu;
 pub fn start() -> Result<(), JsValue> {
     console_error_panic_hook::set_once();
     tracing_wasm::set_as_global_default();
-    wasm_log::init(wasm_log::Config::new(log::Level::Trace));
+    wasm_log::init(wasm_log::Config::new(log::Level::Info));
 
     Ok(())
 }

ts/@live-compositor/browser-render/.eslintignore

@@ -1,3 +1,2 @@
 dist
-example
 src/generated

ts/@live-compositor/browser-render/example/eslint.config.js → ts/examples/vite-browser-render/eslint.config.js

@@ -1,8 +1,8 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
   { ignores: ['dist'] },
@@ -19,10 +19,7 @@ export default tseslint.config(
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
     },
-  },
-)
+  }
+);

ts/@live-compositor/browser-render/example/package.json → ts/examples/vite-browser-render/package.json

@@ -7,10 +7,12 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
+    "typecheck": "tsc --noEmit",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@live-compositor/browser-render": "..",
+    "@live-compositor/browser-render": "0.1.0-rc.0",
+    "mp4box": "^0.5.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

ts/@live-compositor/browser-render/example/src/App.css → ts/examples/vite-browser-render/src/App.css

@@ -8,3 +8,12 @@
 .card {
   padding: 2em;
 }
+
+.examples-tabs {
+  display: flexbox;
+  flex-direction: row;
+}
+
+.examples-tabs button {
+  margin: 5px;
+}

ts/examples/vite-browser-render/src/App.tsx

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import './App.css';
+import Counter from './examples/Counter';
+import MP4Player from './examples/MP4Player';
+
+const EXAMPLES = {
+  'counter': <Counter />,
+  'mp4': <MP4Player />
+};
+
+function App() {
+  const [currentExample, setCurrentExample] = useState<keyof typeof EXAMPLES>('counter');
+
+  return (
+    <>
+      <h1>Browser Renderer Examples</h1>
+      <div className="examples-tabs">
+        <button onClick={() => setCurrentExample('counter')}>Counter</button>
+        <button onClick={() => setCurrentExample('mp4')}>MP4</button>
+      </div>
+      <div className="card">
+        {EXAMPLES[currentExample]}
+      </div>
+    </>
+  );
+}
+
+
+export default App;

ts/examples/vite-browser-render/src/examples/Counter.tsx

@@ -0,0 +1,73 @@
+
+import { useEffect, useRef, useState } from 'react';
+import { useRenderer } from './utils';
+
+function Counter() {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const [count, setCount] = useState(0);
+  const renderer = useRenderer();
+
+  useEffect(() => {
+    if (renderer == null) {
+      return;
+    }
+
+    renderer.updateScene(
+      'output',
+      { width: 256, height: 256 },
+      {
+        type: 'view',
+        children: [
+          {
+            type: 'view',
+            direction: 'column',
+            top: 0,
+            left: 50,
+            children: [
+              {
+                type: 'image',
+                image_id: 'img',
+              },
+              {
+                type: 'text',
+                font_size: 30,
+                font_family: 'Noto Sans',
+                text: `Count is ${count}`,
+                align: 'center',
+              },
+            ],
+          },
+        ],
+      }
+    );
+
+    let pts = 0;
+    const renderInterval = setInterval(() => {
+      const input = {
+        ptsMs: pts,
+        frames: {},
+      };
+      const outputs = renderer.render(input);
+      const frame = outputs.frames['output'];
+      const resolution = frame.resolution;
+      const canvas = canvasRef.current;
+      const context = canvas!.getContext('2d');
+      context?.putImageData(new ImageData(frame!.data, resolution.width, resolution.height), 0, 0);
+
+      pts += 30;
+    }, 30);
+
+    return () => clearInterval(renderInterval);
+  }, [renderer, count]);
+
+  return (
+    <>
+      <div className="card">
+        <canvas ref={canvasRef} width={300} height={300}></canvas>
+        <button onClick={() => setCount(count => count + 1)}>Count +1</button>
+      </div>
+    </>
+  );
+}
+
+export default Counter;