refactor rtc

Author: 071yoon

src/components/rtc/components/PeerConnectionSession.ts

@@ -4,35 +4,37 @@ import io from 'socket.io-client';
 const { RTCPeerConnection, RTCSessionDescription } = window;
 
 class PeerConnectionSession {
-  mOnConnected: any;
-  mOnDisconnected: any;
-  mRoom: any;
-  peerConnections: { [key: string]: any } = {};
-  senders: any = [];
-  listeners: { [key: string]: any } = {};
-  socket: any;
-
-  constructor(socket: any) {
+  mOnConnected;
+  mOnDisconnected;
+  mRoom;
+  peerConnections = {};
+  senders = [];
+  listeners = {};
+  socket;
+
+  constructor(socket) {
     this.socket = socket;
     this.onCallMade();
   }
 
-  addPeerConnection(id: any, stream: any, callback: any) {
-    console.log('mOnConnected', this.mOnConnected);
+  addPeerConnection(id, stream, callback) {
     this.peerConnections[id] = new RTCPeerConnection({
       iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
     });
-    stream.getTracks().forEach((track: any) => {
+    stream.getTracks().forEach((track) => {
       this.senders.push(this.peerConnections[id].addTrack(track, stream));
     });
 
-    this.listeners[id] = (event: any) => {
+    this.listeners[id] = (event) => {
       let fn;
       if (this.peerConnections[id].connectionState === 'connected') {
+        console.log('mOnConnected', this.mOnConnected);
         fn = this.mOnConnected;
       } else if (this.peerConnections[id].connectionState === 'disconnected') {
+        console.log('mOnDisconnected', this.mOnDisconnected);
         fn = this.mOnDisconnected;
       } else {
+        console.log('mRoom', this.mRoom);
         fn = this.mRoom;
       }
       if (fn === null) {
@@ -48,7 +50,7 @@ class PeerConnectionSession {
     this.peerConnections[id].ontrack = function ({
       streams: [stream],
     }: {
-      streams: any;
+      streams;
     }) {
       console.log({ id, stream });
       callback(stream);
@@ -79,21 +81,21 @@ class PeerConnectionSession {
     }
   }
 
-  onConnected(callback: any) {
+  onConnected(callback) {
     this.mOnConnected = callback;
   }
 
-  onDisconnected(callback: any) {
+  onDisconnected(callback) {
     this.mOnDisconnected = callback;
   }
 
-  joinRoom(room: any) {
+  joinRoom(room) {
     this.mRoom = room;
     this.socket.emit('joinRoom', room);
   }
 
   onCallMade() {
-    this.socket.on('call-made', async (data: any) => {
+    this.socket.on('call-made', async (data) => {
       await this.peerConnections[data.socket].setRemoteDescription(
         new RTCSessionDescription(data.offer),
       );
@@ -109,29 +111,26 @@ class PeerConnectionSession {
     });
   }
 
-  onAddUser(callback: any) {
-    this.socket.on(`${this.mRoom}-add-user`, async ({ user }: any) => {
+  onAddUser(callback) {
+    this.socket.on(`${this.mRoom}-add-user`, async ({ user }) => {
       callback(user);
     });
   }
 
-  onRemoveUser(callback: any) {
-    this.socket.on(`${this.mRoom}-remove-user`, ({ socketId }: any) => {
+  onRemoveUser(callback) {
+    this.socket.on(`${this.mRoom}-remove-user`, ({ socketId }) => {
       callback(socketId);
     });
   }
 
-  onUpdateUserList(callback: any) {
-    this.socket.on(
-      `${this.mRoom}-update-user-list`,
-      ({ users, current }: any) => {
-        callback(users, current);
-      },
-    );
+  onUpdateUserList(callback) {
+    this.socket.on(`${this.mRoom}-update-user-list`, ({ users, current }) => {
+      callback(users, current);
+    });
   }
 
-  onAnswerMade(callback: any) {
-    this.socket.on('answer-made', async (data: any) => {
+  onAnswerMade(callback) {
+    this.socket.on('answer-made', async (data) => {
       await this.peerConnections[data.socket].setRemoteDescription(
         new RTCSessionDescription(data.answer),
       );

src/components/rtc/components/RemoteVideo.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect, useState } from 'react';
 import { Video, VideoContainer } from './Video';
 
-export function RemoteVideo(props: any) {
+export function RemoteVideo(props) {
   type MediaProvider = MediaStream | MediaSource | Blob;
   const [mediaStream, setMediaStream] = useState<MediaProvider>();
 

src/components/rtc/hooks/useStartPeerSession.ts

@@ -3,28 +3,26 @@ import { RefObject, useEffect, useMemo, useState } from 'react';
 import { createPeerConnectionContext } from '../components/PeerConnectionSession';
 
 export const useStartPeerSession = (
-  room: any,
-  userMediaStream: any,
+  room: string,
+  userMediaStream: MediaStream,
   localVideoRef: RefObject<HTMLVideoElement>,
 ) => {
-  const peerVideoConnection: any = useMemo(
-    () => createPeerConnectionContext(),
-    [],
-  );
+  const peerVideoConnection = useMemo(() => createPeerConnectionContext(), []);
 
   const [displayMediaStream, setDisplayMediaStream] = useState<MediaStream>();
   const [connectedUsers, setConnectedUsers] = useState([]);
 
   useEffect(() => {
     if (userMediaStream) {
+      console.log('mediaStream', userMediaStream);
       peerVideoConnection.joinRoom(room);
-      peerVideoConnection.onAddUser((user: any) => {
-        setConnectedUsers((users: any): any => [...users, user]);
+      peerVideoConnection.onAddUser((user: string) => {
+        setConnectedUsers((users) => [...users, user]);
 
         peerVideoConnection.addPeerConnection(
           `${user}`,
           userMediaStream,
-          (_stream: any) => {
+          (_stream) => {
             if (user) {
               const box = <HTMLVideoElement>document.getElementById(user);
               box.srcObject = _stream;
@@ -40,13 +38,13 @@ export const useStartPeerSession = (
         peerVideoConnection.removePeerConnection(socketId);
       });
 
-      peerVideoConnection.onUpdateUserList(async (users: any) => {
+      peerVideoConnection.onUpdateUserList(async (users) => {
         setConnectedUsers(users);
-        users.forEach((user: any) => {
+        users.forEach((user: string) => {
           peerVideoConnection.addPeerConnection(
             `${user}`,
             userMediaStream,
-            (_stream: any) => {
+            (_stream) => {
               if (user) {
                 const box = <HTMLVideoElement>document.getElementById(user);
                 box.srcObject = _stream;
@@ -56,7 +54,7 @@ export const useStartPeerSession = (
         });
       });
 
-      peerVideoConnection.onAnswerMade((socket: any) =>
+      peerVideoConnection.onAnswerMade((socket) =>
         peerVideoConnection.callUser(socket),
       );
       console.log(peerVideoConnection);
@@ -65,22 +63,20 @@ export const useStartPeerSession = (
     return () => {
       if (userMediaStream) {
         peerVideoConnection.clearConnections();
-        userMediaStream?.getTracks()?.forEach((track: any) => track.stop());
+        userMediaStream?.getTracks()?.forEach((track) => track.stop());
       }
     };
   }, [peerVideoConnection, room, userMediaStream]);
 
   const cancelScreenSharing = async () => {
     const senders = await peerVideoConnection.senders.filter(
-      (sender: any) => sender.track.kind === 'video',
+      (sender) => sender.track.kind === 'video',
     );
 
     if (senders) {
-      senders.forEach((sender: any) =>
+      senders.forEach((sender) =>
         sender.replaceTrack(
-          userMediaStream
-            .getTracks()
-            .find((track: any) => track.kind === 'video'),
+          userMediaStream.getTracks().find((track) => track.kind === 'video'),
         ),
       );
     }
@@ -89,7 +85,7 @@ export const useStartPeerSession = (
       localVideoRef.current.srcObject = userMediaStream;
     }
     if (displayMediaStream) {
-      displayMediaStream.getTracks().forEach((track: any) => track.stop());
+      displayMediaStream.getTracks().forEach((track) => track.stop());
     }
     setDisplayMediaStream(undefined);
   };
@@ -99,13 +95,11 @@ export const useStartPeerSession = (
       displayMediaStream || (await navigator.mediaDevices.getDisplayMedia());
 
     const senders = await peerVideoConnection.senders.filter(
-      (sender: any) => sender.track.kind === 'video',
+      (sender) => sender.track.kind === 'video',
     );
 
     if (senders) {
-      senders.forEach((sender: any) =>
-        sender.replaceTrack(stream.getTracks()[0]),
-      );
+      senders.forEach((sender) => sender.replaceTrack(stream.getTracks()[0]));
     }
 
     stream.getVideoTracks()[0].addEventListener('ended', () => {

src/interface/useStartPeerSession.interface.ts

@@ -1,7 +1,7 @@
 import { RefObject } from 'react';
 
 export default interface useStartPeerSession {
-  room: any;
-  userMediaStream: any;
+  room;
+  userMediaStream;
   localVideoRef: RefObject<HTMLVideoElement> | null;
 }

src/pages/Room.tsx

@@ -31,7 +31,7 @@ export default function MainPage() {
         <LocalVideo ref={localVideoRef} />
         {connectedUsers.map((user: string) => (
           <>
-            <p>{user}</p>
+            <p>USER : {user}</p>
             <RemoteVideo key={user} id={user} autoPlay playsInline />
           </>
         ))}

tsconfig.json

@@ -76,7 +76,7 @@
     "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
 
     /* Type Checking */
-    "strict": true /* Enable all strict type-checking options. */,
+    "strict": false /* Enable all strict type-checking options. */,
     // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
     // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */