all workingHEADmain

3 files changed, 13 insertions, 16 deletions

diff --git a/src/app/normal/page.tsx b/src/app/normal/page.tsx
index 5ab1b5b..eb1f3d7 100644
--- a/src/app/normal/page.tsx
+++ b/src/app/normal/page.tsx
@@ -1,14 +1,13 @@
 "use client";
 
-import {useEffect, useRef, useState} from "react";
+import {useEffect, useMemo, useRef} from "react";
 import Link from "next/link";
 import {DataConnection, Peer} from "peerjs";
 
 export default function Normal() {
-    const [connection, setConnection] = useState<DataConnection>();
     const videoRef = useRef<HTMLVideoElement>(null);
 
-    function handleOnRecord() {
+    const handleTranscription = useMemo(() => (connection: DataConnection) => {
         // @ts-ignore
         const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
         const recognition = new SpeechRecognition();
@@ -17,14 +16,12 @@ export default function Normal() {
 
         recognition.onresult = async function(event: { results: { transcript: any; }[][]; }) {
             const transcript = event.results[event.results.length-1][0].transcript;
-            console.log(transcript);
-            if (connection) {
-                connection.send(transcript);
-            }
+            console.log(transcript, connection);
+            connection.send(transcript);
         }
 
         recognition.start();
-    }
+    }, []);
 
     useEffect(() => {
         const peer = new Peer("123", {
@@ -42,16 +39,19 @@ export default function Normal() {
                             videoRef.current.srcObject = remoteStream;
                         }
                     });
+                    call.on("close", () => {
+                        stream.getTracks().forEach(track => track.stop());
+                    });
                 });
 
             const connection = peer.connect("321");
-            setConnection(connection);
+            connection.on("open", () => handleTranscription(connection));
         });
 
         return () => {
             peer.destroy();
         }
-    }, [videoRef]);
+    }, [handleTranscription, videoRef]);
 
     return (
         <div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2e66375..fbbef9f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,13 +1,9 @@
 "use client";
 
-import {useState} from "react";
-import ActionModel from "@/app/components/ActionModel";
 import Link from "next/link";
 
 function Home() {
 
-    const [text, setText] = useState('');
-
     return (
         <div className='container-fluid'>
             <Link href={'/sign'}>Sign</Link>
diff --git a/src/app/sign/page.tsx b/src/app/sign/page.tsx
index d9c8de3..0ebf47d 100644
--- a/src/app/sign/page.tsx
+++ b/src/app/sign/page.tsx
@@ -31,6 +31,7 @@ export default function Sign() {
                 });
                 call.on("close", () => {
                     setStarted(false);
+                    stream.getTracks().forEach(track => track.stop());
                 });
                 call.on("error", console.log);
             });
@@ -50,11 +51,11 @@ export default function Sign() {
     }
 
     return (
-        <div>
+        <div className="">
             {!started && <button onClick={startCall}>Start Call</button>}
             <video ref={videoRef} autoPlay playsInline/>
             <ActionModel text={text} pause={400} speed={0.3} />
-            <p>{text}</p>
+            <p>Transcription: {text}</p>
             <br />
             <Link href="/">End Call</Link>
         </div>