chore: 공통 사용 코드 정리

Author: codejs-kr

frontend/contents/js/utils.js

@@ -9,3 +9,15 @@ export const setRoomToken = () => {
 export const getRoomId = () => location.href.replace(/\/|:|#|%|\.|\[|\]/g, '');
 
 export const getUserId = () => Math.round(Math.random() * 99999);
+
+export const bindClipboardClickEvent = ($target) => {
+  $target.addEventListener('click', () => {
+    const link = location.href;
+    if (window.clipboardData) {
+      window.clipboardData.setData('text', link);
+      alert('Copy to Clipboard successful.');
+    } else {
+      window.prompt('Copy to clipboard: Ctrl+C, Enter', link); // Copy to clipboard: Ctrl+C, Enter
+    }
+  });
+};

frontend/views/examples/conference/js/main.js

@@ -1,7 +1,7 @@
 import PeerHandler from './modules/peer-handler.js';
 import MediaHandler from './modules/media-handler.js';
 import { isSafari, isMobile } from '/js/helpers/env.js';
-import { setRoomToken, getRoomId, getUserId } from '/js/utils.js';
+import { setRoomToken, getRoomId, getUserId, bindClipboardClickEvent } from '/js/utils.js';
 
 /*!
  *
@@ -120,22 +120,6 @@ function send(data) {
   socket.send(data);
 }
 
-/**
- * 클립보드 복사
- */
-function setClipboard() {
-  $uniqueToken.addEventListener('click', () => {
-    const link = location.href;
-
-    if (window.clipboardData) {
-      window.clipboardData.setData('text', link);
-      alert('Copy to Clipboard successful.');
-    } else {
-      window.prompt('Copy to clipboard: Ctrl+C, Enter', link); // Copy to clipboard: Ctrl+C, Enter
-    }
-  });
-}
-
 /**
  * 로컬 스트림 핸들링
  * @param stream
@@ -205,22 +189,24 @@ function handleMicButton(e) {
  * 방장 시작 처리
  */
 async function handleStartRoom() {
-  const stream = await peerHandler.getUserMedia(mediaConstraints);
-
-  if (stream) {
+  try {
+    const stream = await peerHandler.getUserMedia(mediaConstraints);
     onLocalStream(stream);
+  } catch (error) {
+    console.error('handleStartRoom :>> ', error);
   }
 }
 
 /**
  * 참석자 참여 처리
  */
 async function handleJoinRoom() {
-  const stream = await peerHandler.getUserMedia(mediaConstraints);
-
-  if (stream) {
+  try {
+    const stream = await peerHandler.getUserMedia(mediaConstraints);
     onLocalStream(stream);
     peerHandler.startRtcConnection();
+  } catch (error) {
+    console.error('handleJoinRoom :>> ', error);
   }
 }
 
@@ -256,14 +242,14 @@ function bindPeerEvent() {
  */
 function initialize() {
   setRoomToken();
-  setClipboard();
   roomId = getRoomId();
   userId = getUserId();
 
   // 이벤트 바인딩
   bindDomEvent();
   bindSocketEvent();
   bindPeerEvent();
+  bindClipboardClickEvent($uniqueToken);
 }
 
 initialize();

frontend/views/examples/conference/js/modules/peer-handler.js

@@ -33,7 +33,7 @@ function PeerHandler(options) {
     try {
       localStream = await navigator.mediaDevices.getUserMedia(constraints);
     } catch (error) {
-      console.error('Error getUserMedia', error);
+      return new Promise((_, reject) => reject(error));
     }
 
     return localStream;
@@ -69,7 +69,7 @@ function PeerHandler(options) {
         });
       })
       .catch((error) => {
-        console.error('Error setLocalDescription', error);
+        console.error('Error createOffer', error);
       });
   }
 
@@ -78,15 +78,15 @@ function PeerHandler(options) {
    * @param peer
    * @param msg offer가 보내온 signaling massage
    */
-  function createAnswer(peer, msg) {
+  function createAnswer(peer, offerSdp) {
     console.log('createAnswer', arguments);
 
     if (localStream) {
       addTrack(peer, localStream);
     }
 
     peer
-      .setRemoteDescription(new RTCSessionDescription(msg.sdp))
+      .setRemoteDescription(new RTCSessionDescription(offerSdp))
       .then(() => {
         peer
           .createAnswer()
@@ -99,7 +99,9 @@ function PeerHandler(options) {
               sdp: SDP,
             });
           })
-          .catch(onSdpError);
+          .catch((error) => {
+            console.error('Error createAnswer', error);
+          });
       })
       .catch((error) => {
         console.error('Error setRemoteDescription', error);
@@ -114,7 +116,7 @@ function PeerHandler(options) {
     console.log('createPeerConnection', arguments);
 
     peer = new RTCPeerConnection(peerConnectionConfig);
-    console.log('new peer', peer);
+    console.log('New peer ', peer);
 
     peer.onicecandidate = (event) => {
       if (event.candidate) {
@@ -177,13 +179,6 @@ function PeerHandler(options) {
     return peer;
   }
 
-  /**
-   * onSdpError
-   */
-  function onSdpError() {
-    console.log('onSdpError', arguments);
-  }
-
   /**
    * addStream 이후 스펙 적용 (크로스브라우징)
    * 스트림을 받아서 PeerConnection track과 stream을 추가 한다.
@@ -248,33 +243,33 @@ function PeerHandler(options) {
    * @param data
    */
   function signaling(data) {
-    console.log('onmessage', data);
+    console.log('signaling', data);
 
-    const msg = data;
-    const sdp = msg.sdp || null;
+    const sdp = data?.sdp;
+    const candidate = data?.candidate;
 
     // 접속자가 보내온 offer처리
     if (sdp) {
       if (sdp.type === 'offer') {
         peer = createPeerConnection();
-        createAnswer(peer, msg);
+        createAnswer(peer, sdp);
 
         // offer에 대한 응답 처리
       } else if (sdp.type === 'answer') {
-        peer.setRemoteDescription(new RTCSessionDescription(msg.sdp));
+        peer.setRemoteDescription(new RTCSessionDescription(sdp));
       }
 
       // offer or answer cadidate처리
-    } else if (msg.candidate) {
-      const candidate = new RTCIceCandidate({
-        sdpMid: msg.id,
-        sdpMLineIndex: msg.label,
-        candidate: msg.candidate,
+    } else if (candidate) {
+      const iceCandidate = new RTCIceCandidate({
+        sdpMid: data.id,
+        sdpMLineIndex: data.label,
+        candidate: candidate,
       });
 
-      peer.addIceCandidate(candidate);
+      peer.addIceCandidate(iceCandidate);
     } else {
-      //console.log()
+      // do something
     }
   }
 

frontend/views/examples/data-channel/js/modules/peer-handler.js

@@ -50,7 +50,7 @@ function PeerHandler(options) {
         });
       })
       .catch((error) => {
-        console.error('Error setLocalDescription', error);
+        console.error('Error createOffer', error);
       });
   }
 
@@ -76,7 +76,9 @@ function PeerHandler(options) {
               sdp: SDP,
             });
           })
-          .catch(onErrorSdp);
+          .catch((error) => {
+            console.error('Error createAnswer', error);
+          });
       })
       .catch((error) => {
         console.error('Error setRemoteDescription', error);
@@ -134,13 +136,6 @@ function PeerHandler(options) {
     return peer;
   }
 
-  /**
-   * onErrorSdp
-   */
-  function onErrorSdp() {
-    console.log('onErrorSdp', arguments);
-  }
-
   /**
    * signaling
    * @param data
@@ -208,7 +203,6 @@ function PeerHandler(options) {
     });
 
     const readSlice = (offset) => {
-      console.log('readSlice', offset);
       const slice = file.slice(offset, offset + CHUNK_SIZE);
       fileReader.readAsArrayBuffer(slice);
     };