refactor: conference, dynamic-resolution

Author: codejs-kr

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["eamodio.gitlens"]
+}

frontend/contents/js/base.js

@@ -5,7 +5,7 @@
  * @homepage codejs.co.kr
  */
 
-$(function() {
+$(function () {
   const browserVersion = DetectRTC.browser.version;
   const isFirefox = DetectRTC.browser.isFirefox;
   const isChrome = DetectRTC.browser.isChrome;
@@ -46,7 +46,7 @@ $(function() {
     }
 
     // 캠 체크, 체크 텀이 필요함
-    setTimeout(function() {
+    setTimeout(function () {
       if (checkPage && !DetectRTC.hasWebcam) {
         showNeedCamMessage();
       }

frontend/contents/js/lib/eventemitter.js

@@ -155,4 +155,6 @@ EventEmitter.prototype.emit = function(type) {
   } else {
     return false;
   }
-};
+};
+
+export default EventEmitter;

frontend/contents/js/lib/inherit.js

@@ -13,3 +13,5 @@ const inherit = (function(Parent, Child) {
     Child.super = Parent.prototype;
   };
 })();
+
+export default inherit;

frontend/views/examples/conference/index.ejs

@@ -25,8 +25,6 @@
   </div>
 
 
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
-  <script src="js/modules/peer-handler.js"></script>
-  <script src="js/modules/media-handler.js"></script>
-  <script src="js/main.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.4.0/socket.io.js"></script>
+  <script type="module" src="js/main.js"></script>
   <% include ../../partials/footer %>

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

@@ -1,3 +1,6 @@
+import PeerHandler from './modules/peer-handler.js';
+import MediaHandler from './modules/media-handler.js';
+
 /*!
  *
  * WebRTC Lab
@@ -13,18 +16,24 @@ $(function () {
   const animationTime = 500;
   const isSafari = DetectRTC.browser.isSafari;
   const isMobile = DetectRTC.isMobileDevice;
-  const mediaOption = {
+  const mediaConstraints = {
     audio: true,
     video: {
-      mandatory: {
-        maxWidth: 1920,
-        maxHeight: 1080,
-        maxFrameRate: 30,
+      width: {
+        ideal: 1280,
+        min: 640,
+        max: 1920,
+      },
+      height: {
+        ideal: 720,
+        min: 360,
+        max: 1080,
+      },
+      frameRate: {
+        ideal: 25,
       },
-      optional: [
-        { googNoiseReduction: true }, // Likely removes the noise in the captured video stream at the expense of computational effort.
-        { facingMode: 'user' }, // Select the front/user facing camera or the rear/environment facing camera if available (on Phone)
-      ],
+      // Select the front/user facing camera or the rear/environment facing camera if available (on Phone)
+      facingMode: 'user',
     },
   };
 
@@ -41,7 +50,7 @@ $(function () {
   const $uniqueToken = $('#unique-token');
 
   async function getUserMedia() {
-    const stream = await peerHandler.getUserMedia(mediaOption, isOffer);
+    const stream = await peerHandler.getUserMedia(mediaConstraints, isOffer);
     onLocalStream(stream);
   }
 
@@ -51,14 +60,12 @@ $(function () {
   function onDetectUser() {
     console.log('onDetectUser');
 
-    $waitWrap.html(
-      [
-        '<div class="room-info">',
-        '<p>당신을 기다리고 있어요. 참여 하실래요?</p>',
-        '<button id="btn-join">Join</button>',
-        '</div>',
-      ].join('\n')
-    );
+    $waitWrap.html(`
+        <div class="room-info">
+          <p>당신을 기다리고 있어요. 참여 하실래요?</p>
+          <button id="btn-join">Join</button>
+        </div>
+      `);
 
     $('#btn-join').click(function () {
       $(this).attr('disabled', true);
@@ -228,6 +235,10 @@ $(function () {
       $this.toggleClass('active');
       mediaHandler[$this.hasClass('active') ? 'muteAudio' : 'unmuteAudio']();
     });
+
+    $('#btn-change-resolution').click(function () {
+      peerHandler.changeResolution();
+    });
   }
 
   initialize();

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

@@ -86,3 +86,5 @@ function MediaHandler() {
   this.unmuteAudio = unmuteAudio;
   this.playForIOS = playForIOS;
 }
+
+export default MediaHandler;

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

@@ -1,3 +1,6 @@
+import EventEmitter from '/js/lib/eventemitter.js';
+import inherit from '/js/lib/inherit.js';
+
 /**
  * PeerHandler
  * @param options
@@ -12,8 +15,6 @@ function PeerHandler(options) {
   const RTCSessionDescription =
     window.RTCSessionDescription || window.mozRTCSessionDescription || window.webkitRTCSessionDescription;
   const RTCIceCandidate = window.RTCIceCandidate || window.mozRTCIceCandidate || window.webkitRTCIceCandidate;
-  const browserVersion = DetectRTC.browser.version;
-  const isEdge = DetectRTC.browser.isEdge && browserVersion >= 15063; // 15버전 이상
 
   const that = this;
   const send = options.send;
@@ -31,22 +32,14 @@ function PeerHandler(options) {
   };
 
   let localStream = null;
+  let resolution = {
+    width: 1280,
+    height: 720,
+  };
   let peer = null; // offer or answer peer
   let peerConnectionOptions = {
     optional: [{ DtlsSrtpKeyAgreement: 'true' }],
   };
-  let mediaConstraints = {
-    mandatory: {
-      OfferToReceiveAudio: true,
-      OfferToReceiveVideo: true,
-    },
-  };
-
-  // edge is not supported
-  if (isEdge) {
-    peerConnectionOptions = {};
-    mediaConstraints = {};
-  }
 
   /**
    * getUserMedia
@@ -78,19 +71,20 @@ function PeerHandler(options) {
       addTrack(peer, localStream); // addTrack 제외시 recvonly로 SDP 생성됨
     }
 
-    peer.createOffer(
-      (SDP) => {
+    peer
+      .createOffer()
+      .then((SDP) => {
         peer.setLocalDescription(SDP);
         console.log('Sending offer description', SDP);
 
         send({
           to: 'all',
           sdp: SDP,
         });
-      },
-      onSdpError,
-      mediaConstraints
-    );
+      })
+      .catch((error) => {
+        console.error('Error setLocalDescription', error);
+      });
   }
 
   /**
@@ -238,6 +232,31 @@ function PeerHandler(options) {
     }
   }
 
+  /**
+   * 전송중인 영상 해상도를 다이나믹하게 변경합니다.
+   */
+  function changeResolution() {
+    localStream.getVideoTracks().forEach((track) => {
+      console.log('changeResolution', track, track.getConstraints(), track.applyConstraints);
+
+      if (resolution.height > 90) {
+        resolution = {
+          width: 160,
+          height: 90,
+        };
+      } else {
+        resolution = {
+          width: 1280,
+          height: 720,
+        };
+      }
+
+      track.applyConstraints(resolution).then(() => {
+        console.log('changeResolution result', track.getConstraints());
+      });
+    });
+  }
+
   /**
    * signaling
    * @param data
@@ -278,6 +297,9 @@ function PeerHandler(options) {
    */
   this.getUserMedia = getUserMedia;
   this.signaling = signaling;
+  this.changeResolution = changeResolution;
 }
 
 inherit(EventEmitter, PeerHandler);
+
+export default PeerHandler;