session

Author: aboutphilippe

src/app/[sessionId]/page.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import Microphone from "@/components/Microphone";
+import Stream from "@/components/Stream";
+import { useParams } from "next/navigation";
+
+export default function Session() {
+  const sessionId = useParams().sessionId.toString();
+  return (
+    <div className="flex flex-row items-center justify-center h-screen space-y-10">
+      <div>
+        <Microphone sessionId={sessionId} />
+      </div>
+      <div>
+        <Stream sessionId={sessionId} />
+      </div>
+    </div>
+  );
+}

src/app/page.tsx

@@ -1,9 +1,43 @@
-import Microphone from "@/components/Microphone";
+"use client";
+
+import { useRouter } from "next/navigation";
 
 export default function Home() {
+  const router = useRouter();
+
+  const createSession = async () => {
+    try {
+      const response = await fetch("http://localhost:4000/start", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      const data = await response.json();
+      const { streamSid, websocketAddress } = data;
+
+      // Assuming you want to use websocketAddress somewhere, otherwise you can remove it
+      console.log("WebSocket Address:", websocketAddress);
+
+      router.push(`/${streamSid}`);
+    } catch (error) {
+      console.error("Failed to create session:", error);
+    }
+  };
+
   return (
-    <div>
-      <Microphone />
+    <div className="flex flex-col items-center justify-center h-screen">
+      <button
+        onClick={createSession}
+        className="mt-4 p-2 bg-blue-500 text-white rounded"
+      >
+        Create Session
+      </button>
     </div>
   );
 }

src/app/stream/page.tsx

@@ -3,9 +3,8 @@
 import React, { useState, useRef, useCallback } from "react";
 // import { v4 as uuidv4 } from "uuid";
 
-const Microphone = () => {
+const Microphone = ({ sessionId }: { sessionId: string }) => {
   const [isConnected, setIsConnected] = useState(false);
-  const [streamId, setStreamId] = useState<string | null>(null);
   const mediaStreamRef = useRef<MediaStream | null>(null);
   const webSocketRef = useRef<WebSocket | null>(null);
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
@@ -14,11 +13,11 @@ const Microphone = () => {
 
   const sendAudioData = useCallback(
     ({
-      streamId,
+      streamSid,
       audioBlob,
       mimeType,
     }: {
-      streamId: string;
+      streamSid: string;
       audioBlob: Blob;
       mimeType: string;
     }) => {
@@ -28,9 +27,10 @@ const Microphone = () => {
           const arrayBuffer = reader.result as ArrayBuffer;
           const base64String = Buffer.from(arrayBuffer).toString("base64");
           const event = {
-            streamId,
+            streamSid,
             event: "media",
             media: {
+              track: "inbound",
               payload: base64String,
               mimeType,
             },
@@ -76,18 +76,13 @@ const Microphone = () => {
 
       webSocketRef.current = new WebSocket("ws://localhost:4000/connection");
 
-      // const newStreamId = uuidv4();
-      const newStreamId = "new-1";
-
-      setStreamId(newStreamId);
-
       mediaRecorderRef.current = new MediaRecorder(stream);
 
       mediaRecorderRef.current.ondataavailable = (event) => {
-        if (event.data.size > 0 && newStreamId) {
+        if (event.data.size > 0 && sessionId) {
           console.log("Captured audioBlob:", event.data);
           sendAudioData({
-            streamId: newStreamId,
+            streamSid: sessionId,
             audioBlob: event.data,
             mimeType: mediaRecorderRef.current?.mimeType || "",
           });
@@ -135,17 +130,15 @@ const Microphone = () => {
       webSocketRef.current.close();
     }
     setIsConnected(false);
-    setStreamId(null);
   }, []);
 
   return (
     <div>
       <p>
         <button onClick={isConnected ? stopConnection : startConnection}>
-          {isConnected ? "Stop Connection" : "Start Connection"}
+          {isConnected ? "Stop microphone" : "Start microphone"}
         </button>
       </p>
-      <p>{streamId}</p>
     </div>
   );
 };

src/components/Microphone.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useRef, useState, useCallback } from "react";
 
-const Stream = () => {
+const Stream = ({ sessionId }: { sessionId: string }) => {
   const [isConnected, setIsConnected] = useState(false);
   const audioContextRef = useRef<AudioContext | null>(null);
   const sourceBufferRef = useRef<SourceBuffer | null>(null);
@@ -17,7 +17,11 @@ const Stream = () => {
     webSocketRef.current.onmessage = (event) => {
       console.log("event", event);
       const data = JSON.parse(event.data);
-      if (data.event === "media" && data.media.payload) {
+      if (
+        data.event === "media" &&
+        data.media.payload &&
+        data.streamSid === sessionId
+      ) {
         const audioBuffer = Uint8Array.from(atob(data.media.payload), (c) =>
           c.charCodeAt(0)
         );