avoid audio stopping when old user leaves RTC channel

TEN-framework · Feb 26, 2025 · 587920d · 587920d
1 parent 4c3d427
commit 587920d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/playground/src/components/Agent/AvatarTrulience.tsx b/playground/src/components/Agent/AvatarTrulience.tsx
@@ -8,10 +8,11 @@ import { Maximize, Minimize } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 interface AvatarProps {
-  audioTrack?: IMicrophoneAudioTrack
+  audioTrack?: IMicrophoneAudioTrack,
+  localAudioTrack?: IMicrophoneAudioTrack
 }
 
-export default function Avatar({ audioTrack }: AvatarProps) {
+export default function Avatar({ audioTrack, localAudioTrack }: AvatarProps) {
   const agentConnected = useAppSelector((state) => state.global.agentConnected)
   const trulienceAvatarRef = useRef<TrulienceAvatar>(null)
 
@@ -70,6 +71,11 @@ export default function Avatar({ audioTrack }: AvatarProps) {
   // Update the Avatar’s audio stream whenever audioTrack or agentConnected changes
   useEffect(() => {
     if (trulienceAvatarRef.current) {
+
+      if (localAudioTrack) {
+        const stream = new MediaStream([localAudioTrack.getMediaStreamTrack()])
+        //trulienceAvatarRef.current.setLocalMediaStream(null)
+      }
       if (audioTrack && agentConnected) {
         const stream = new MediaStream([audioTrack.getMediaStreamTrack()])
         trulienceAvatarRef.current.setMediaStream(null)

diff --git a/playground/src/components/Dynamic/RTCCard.tsx b/playground/src/components/Dynamic/RTCCard.tsx
@@ -100,7 +100,9 @@ export default function RTCCard(props: { className?: string }) {
       // trulience SDK will play audio in synch with mouth
       user.audioTrack?.stop();
     }
-    setRemoteUser(user)
+    if (user.audioTrack) {
+      setRemoteUser(user)
+    } 
   }
 
   const onLocalTracksChanged = (tracks: IUserTracks) => {
@@ -136,7 +138,7 @@ export default function RTCCard(props: { className?: string }) {
         {useTrulienceAvatar ? (
           !avatarInLargeWindow ? (
             <div className="h-60 w-full p-1">
-              <Avatar audioTrack={remoteuser?.audioTrack} />
+              <Avatar localAudioTrack={audioTrack} audioTrack={remoteuser?.audioTrack} />
             </div>
           ) : (
             !isCompactLayout &&
@@ -145,7 +147,7 @@ export default function RTCCard(props: { className?: string }) {
             />
           )
         ) : (
-          <AgentView audioTrack={remoteuser?.audioTrack} />
+          <AgentView  audioTrack={remoteuser?.audioTrack} />
         )}
       </div>