useCapture hook

package.json

@@ -8,7 +8,7 @@
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
-    "ccapture.js": "^1.1.0",
+    "ccapture.js": "github:aceslowman/ccapture.js#npm-fix",
     "ray-tracing-renderer": "^0.10.15",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/App.js

@@ -4,17 +4,34 @@ import Viewer from "./components/three/Viewer"
 import logo from "./assets/images/logo.png"
 import "./globalStyles.css"
 import useStore from "./states/modelState"
-
+import useRecorder from "./helpers/useRecorder"
 
 export default function App() {
     const { gl } = useStore()
+    const recorder = useRecorder(gl?.domElement)
+
+    const handleStart = () => recorder.capture(2)
 
     return (
         <div style={styles.wrapper}>
             <Viewer />
             <img src={logo} alt="Logo" style={styles.logo} />
             <ButtonPhoto gl={gl} style={styles.logo} />
             <ControlPanel />
+            <div
+                style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "50px",
+                    height: "100vh",
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "center",
+                }}
+            >
+                <button onClick={handleStart}>Start</button>
+            </div>
         </div>
     )
 }

src/helpers/useRecorder.js

@@ -0,0 +1,33 @@
+import { useEffect } from "react"
+
+export default function useRecorder(element) {
+    var mediaRecorder, stream
+
+    useEffect(() => {
+        if (element) {
+            stream = element.captureStream(25)
+            mediaRecorder = new MediaRecorder(stream)
+            mediaRecorder.ondataavailable = (blob) => {
+                saveFile(blob)
+            }
+        }
+    }, [element])
+
+    function capture(durationInSeconds = 1) {
+        mediaRecorder.start()
+
+        setTimeout(() => {
+            mediaRecorder.stop()
+        }, durationInSeconds * 1000)
+    }
+
+    function saveFile(blob) {
+        var blobUrl = URL.createObjectURL(blob.data)
+        var link = document.createElement("a")
+        link.href = blobUrl
+        link.download = "aDefaultFileName.mp4"
+        link.click()
+    }
+
+    return { capture }
+}