update next js project

Author: wkozyra95

demos/nextjs-demo/src/app/CanvasPage.tsx

@@ -1,17 +1,18 @@
 'use client';
 
+import SmelterCanvasOutput from '@/app/components/SmelterCanvasOutput';
+import { useSmelter } from '@/app/hooks/useSmelter';
 import { View, Text, useInputStreams, InputStream, Tiles } from '@swmansion/smelter';
-import Smelter, { setWasmBundleUrl } from '@swmansion/smelter-web-wasm';
+import { setWasmBundleUrl } from '@swmansion/smelter-web-wasm';
 import { useCallback, useState } from 'react';
-import SmelterCanvas from './SmelterCanvas';
 
 setWasmBundleUrl('/smelter.wasm');
 
 const CAMERA_ID = 'camera';
 const SCREEN_SHARE_ID = 'screen';
 
 export default function CanvasPage() {
-  const [smelter, setSmelter] = useState<Smelter>();
+  const smelter = useSmelter();
   const [camera, setCamera] = useState<boolean>();
   const [screen, setScreen] = useState<boolean>();
 
@@ -62,12 +63,15 @@ export default function CanvasPage() {
         <button onClick={toggleScreenShare} style={{ margin: 10 }}>
           Toggle screen capture
         </button>
-        <p className="">Canvas: </p>
+        <p>Canvas: </p>
       </div>
       <div>
-        <SmelterCanvas width={1280} height={720} onSmelterCreated={setSmelter}>
-          <SmelterComponent />
-        </SmelterCanvas>
+        {
+          smelter &&
+          <SmelterCanvasOutput smelter={smelter} width={1280} height={720} audio>
+            <SmelterComponent />
+          </SmelterCanvasOutput>
+        }
       </div>
     </div>
   );

demos/nextjs-demo/src/app/SmelterCanvas.tsx

@@ -0,0 +1,95 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type Smelter from '@swmansion/smelter-web-wasm';
+
+type CanvasProps = React.DetailedHTMLProps<
+  React.CanvasHTMLAttributes<HTMLCanvasElement>,
+  HTMLCanvasElement
+>;
+
+type SmelterCanvasProps = {
+  smelter: Smelter;
+  audio?: boolean;
+  children: React.ReactElement;
+} & CanvasProps;
+
+type UpdatedProps = {
+  smelter: Smelter;
+  width?: number | string;
+  height?: number | string;
+  audio?: boolean;
+};
+
+type RegisterOptions = UpdatedProps & {
+  outputId: string;
+  canvas: HTMLCanvasElement;
+};
+
+const getNewOutputId = (() => {
+  let counter = 1;
+  return () => {
+    const outputId = `output-${counter}`;
+    counter += 1;
+    return outputId;
+  };
+})();
+
+export default function SmelterCanvasOutput(props: SmelterCanvasProps) {
+  const { children, smelter, audio, ...canvasProps } = props;
+  const [updatedProps, setUpdatedProps] = useState<UpdatedProps | undefined>();
+  const [registerOptions, setRegisterOptions] = useState<RegisterOptions | undefined>(undefined);
+  const key = useRef<number>(1);
+
+  const canvasRef = useCallback(
+    async (updatedCanvas: HTMLCanvasElement | null) => {
+      if (!updatedCanvas || !updatedProps || updatedCanvas === registerOptions?.canvas) {
+        return;
+      }
+      const outputId = getNewOutputId();
+      setRegisterOptions({
+        ...updatedProps,
+        outputId,
+        canvas: updatedCanvas,
+      });
+    },
+    [updatedProps, registerOptions]
+  );
+
+  useEffect(() => {
+    // force new canvas
+    key.current += 1;
+
+    setUpdatedProps({
+      smelter,
+      width: canvasProps.width,
+      height: canvasProps.height,
+      audio,
+    });
+  }, [canvasProps.width, canvasProps.height, smelter, audio]);
+
+  useEffect(() => {
+    if (!registerOptions) {
+      return;
+    }
+    const { audio, outputId, width, height, canvas } = registerOptions;
+    const promise = smelter.registerOutput(outputId, children, {
+      type: 'canvas',
+      video: {
+        canvas,
+        resolution: {
+          width: Number(width ?? canvas?.width),
+          height: Number(height ?? canvas?.height),
+        },
+      },
+      audio,
+    });
+
+    return () => {
+      void promise
+        .catch(console.error)
+        .then(() => smelter.unregisterOutput(outputId))
+        .catch(console.error);
+    };
+  }, [registerOptions]);
+
+  return <canvas key={key.current} ref={canvasRef} {...canvasProps} />;
+}

demos/nextjs-demo/src/app/components/SmelterCanvasOutput.tsx

@@ -0,0 +1,27 @@
+import Smelter from '@swmansion/smelter-web-wasm';
+import { useEffect, useState } from 'react';
+
+export function useSmelter(): Smelter | undefined {
+  const [smelter, setSmelter] = useState<Smelter>();
+  useEffect(() => {
+    const smelter = new Smelter();
+
+    let cancel = false;
+    const promise = (async () => {
+      await smelter.init();
+      await smelter.start();
+      if (!cancel) {
+        setSmelter(smelter);
+      }
+    })();
+
+    return () => {
+      cancel = true;
+      void (async () => {
+        await promise.catch(() => {});
+        await smelter.terminate();
+      })();
+    };
+  }, []);
+  return smelter;
+}

demos/nextjs-demo/src/app/hooks/useSmelter.ts

@@ -1,7 +1,6 @@
 import { View, Text, useInputStreams, InputStream, Tiles } from '@swmansion/smelter';
-import Smelter, { setWasmBundleUrl } from '@swmansion/smelter-web-wasm';
+import { setWasmBundleUrl } from '@swmansion/smelter-web-wasm';
 import { useCallback, useState } from 'react';
-import SmelterCanvas from '../components/SmelterCanvasOutput';
 import { useSmelter } from '../hooks/useSmelter';
 import SmelterCanvasOutput from '../components/SmelterCanvasOutput';