feat: add voice actvity indicator on the participant video (#208)

Co-authored-by: Yohan Totting <[email protected]>

app/_features/room/components/conference-screen.tsx

@@ -460,13 +460,27 @@ function VideoScreen({
   const videoContainerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    const callbackVoiceActivity = () => {
+      if (stream.audioLevel > 0) {
+        stream.videoElement.style.borderColor = 'green';
+        stream.videoElement.style.borderWidth = '5px';
+        stream.videoElement.style.borderStyle = 'solid';
+      } else {
+        stream.videoElement.style.borderColor = 'transparent';
+        stream.videoElement.style.borderWidth = '0';
+        stream.videoElement.style.borderStyle = 'none';
+      }
+    };
+
     if (stream.origin === 'remote') {
       peer?.observeVideo(stream.videoElement);
+      stream.addEventListener('voiceactivity', callbackVoiceActivity);
     }
 
     return () => {
       if (stream.origin === 'remote') {
         peer?.unobserveVideo(stream.videoElement);
+        stream.removeEventListener('voiceactivity', callbackVoiceActivity);
       }
     };
   }, [peer, stream]);

app/_features/room/contexts/datachannel-context.tsx

@@ -48,7 +48,11 @@ export const DataChannelProvider = ({
       });
     };
 
-    peerConnection.addEventListener('datachannel', onPeerDataChannelAdded);
+    peerConnection.addEventListener('datachannel', (e) => {
+      if (e.channel.label !== 'internal') {
+        onPeerDataChannelAdded(e);
+      }
+    });
 
     return () => {
       peerConnection.removeEventListener('datachannel', onPeerDataChannelAdded);

app/_features/room/contexts/participant-context.tsx

@@ -11,22 +11,26 @@ export type ParticipantVideo = {
   readonly source: 'media' | 'screen';
   readonly mediaStream: MediaStream;
   readonly videoElement: HTMLVideoElement;
+  audioLevel: number;
   readonly replaceTrack: (newTrack: MediaStreamTrack) => void;
+  readonly addEventListener: (
+    type: string,
+    listener: (event: CustomEvent) => void
+  ) => void;
+  readonly removeEventListener: (
+    type: string,
+    listener: (event: CustomEvent) => void
+  ) => void;
 };
 
 export type ParticipantStream = Omit<ParticipantVideo, 'videoElement'>;
 
-const createParticipantVideo = (
-  stream: ParticipantStream
-): ParticipantVideo => {
-  const participantVideo: ParticipantVideo = {
-    ...stream,
-    videoElement: document.createElement('video'),
-  };
+const createParticipantVideo = (stream: any): ParticipantVideo => {
+  stream.videoElement = document.createElement('video');
 
-  participantVideo.videoElement.srcObject = stream.mediaStream;
+  stream.videoElement.srcObject = stream.mediaStream;
 
-  return participantVideo;
+  return stream;
 };
 
 const defaultValue = {
@@ -50,7 +54,7 @@ export function ParticipantProvider({
   const [localStream, setLocalStream] = useState<MediaStream | null>(null);
 
   useEffect(() => {
-    const onMediaInputTurnedOn = ((event: CustomEvent) => {
+    const onMediaInputTurnedOn = ((event: CustomEventInit) => {
       const detail = event.detail || {};
       const mediaInput = detail.mediaInput;
 
@@ -68,8 +72,16 @@ export function ParticipantProvider({
 
   useEffect(() => {
     clientSDK.on(RoomEvent.STREAM_AVAILABLE, (data) => {
+      const video = createParticipantVideo(data.stream);
+      data.stream.addEventListener('voiceactivity', (e: CustomEventInit) => {
+        // reordering the streams based on voice activity
+        const audioLevel = e.detail.audioLevel;
+
+        // call setStreams with the new streams order
+      });
+
       setStreams((prevState) => {
-        return [...prevState, createParticipantVideo(data.stream)];
+        return [...prevState, video];
       });
     });
 

package.json

@@ -16,7 +16,7 @@
     "db:studio": "npx drizzle-kit studio"
   },
   "dependencies": {
-    "@inlivedev/inlive-js-sdk": "^0.17.4",
+    "@inlivedev/inlive-js-sdk": "^0.17.5",
     "@nextui-org/react": "^2.2.9",
     "@react-email/components": "0.0.16",
     "@sentry/nextjs": "^7.70.0",