dockerizing

Author: seongbin9786

.dockerignore

@@ -0,0 +1,11 @@
+.git
+.vscode
+/files/*
+/files_server_side_record/*
+/node_modules
+/security/cert.key
+/security/cert.pem
+*.mp4
+*.webm
+*.sock
+video_list.txt

.gitignore

@@ -4,4 +4,6 @@
 /security/cert.key
 /security/cert.pem
 *.mp4
-*.webm
+*.webm
+*.sock
+video_list.txt

Dockerfile

@@ -0,0 +1,15 @@
+FROM node:14
+
+WORKDIR /usr/src/app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+RUN npm run gen-pem
+
+EXPOSE 3000
+
+ENTRYPOINT npm run start-serverside

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start-serverside": "__public_path__=public_serverside_record node server_ffmpeg_wrapper.js",
     "start-clientside": "__public_path__=public_clientside_record node server_mediarecorder.js",
-    "gen-pem": "rm security/cert.* && openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout security/cert.key -out security/cert.pem -config security/req.cnf -sha256",
+    "gen-pem": "rm -f security/cert.* && openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout security/cert.key -out security/cert.pem -config security/req.cnf -sha256",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],

public_clientside_record/index.js

@@ -188,6 +188,7 @@ function handleSuccess(stream) {
 
 async function init(constraints) {
   try {
+    // getDisplayMedia();
     const stream = await navigator.mediaDevices.getUserMedia(constraints);
     handleSuccess(stream);
   } catch (e) {
@@ -204,7 +205,7 @@ document.querySelector("button#start").addEventListener("click", async () => {
     audio: {
       echoCancellation: { ideal: hasEchoCancellation },
     },
-    video: VIDEO_CONSTRAINTS_MOBILE,
+    video: VIDEO_CONSTRAINTS,
   };
   console.log("Using media constraints:", constraints);
   await init(constraints);

public_serverside_record/index.js

@@ -3,20 +3,26 @@
 const ICE_SERVERS_CONFIG = {
   iceServers: [
     {
-      urls: "stun:stun.l.google.com:19302",
+      urls: "stun:115.85.180.162",
     },
+    // TURN 서버 추가했는데 잘 되는듯?
     {
-      urls: "stun:stun1.l.google.com:19302",
-    },
-    {
-      urls: "stun:stun2.l.google.com:19302",
-    },
-    {
-      urls: "stun:stun3.l.google.com:19302",
-    },
-    {
-      urls: "stun:stun4.l.google.com:19302",
+      urls: "turn:115.85.180.162",
+      username: "classvar",
+      credential: "classvar",
     },
+    // {
+    //   urls: "stun:stun1.l.google.com:19302",
+    // },
+    // {
+    //   urls: "stun:stun2.l.google.com:19302",
+    // },
+    // {
+    //   urls: "stun:stun3.l.google.com:19302",
+    // },
+    // {
+    //   urls: "stun:stun4.l.google.com:19302",
+    // },
   ],
 };
 
@@ -137,18 +143,17 @@ function call() {
 
   pcClient.onicecandidate = (event) => {
     socket.emit(NEW_PEER_ICE_CANDIDATE, event.candidate);
-    // trace("ICE candidate:", event.candidate);
+    trace("ICE candidate:", event.candidate);
   };
 
   socket.on(NEW_PEER_ICE_CANDIDATE, (candidate) => {
-    // trace("receiving new remote Ice Candidate: ");
     pcClient
       .addIceCandidate(candidate)
       .then(() => {
         trace("client: new Remote Ice Candidate: ", candidate);
       })
       .catch((e) => {
-        trace("Error adding new Remote Ice Candidate: ", e);
+        trace("Error adding new Remote Ice Candidate: ", candidate, e);
       });
   });
 
@@ -260,6 +265,27 @@ function call() {
           trace("Failed to setLocalDescription: " + error.toString());
         });
     });
+
+    setTimeout(() => {
+      pcClient.getSenders().map((sender) => {
+        const kindOfTrack = sender.track?.kind;
+        if (sender.transport) {
+          const iceTransport = sender.transport.iceTransport;
+          const logSelectedCandidate = () => {
+            const selectedCandidatePair =
+              iceTransport.getSelectedCandidatePair();
+            console.log(
+              `SELECTED ${kindOfTrack || "unknown"} SENDER CANDIDATE PAIR`,
+              selectedCandidatePair
+            );
+          };
+          iceTransport.onselectedcandidatepairchange = logSelectedCandidate;
+          logSelectedCandidate();
+        } else {
+          // retry at some time later
+        }
+      });
+    }, 3000);
   }
 }
 

server_ffmpeg_wrapper.js

@@ -24,6 +24,7 @@ const {
 3. ConnectionStateChange 
 */
 let pcServer;
+let uFrag;
 const IS_CALLER = true;
 
 io.on("connection", async (serverSocket) => {
@@ -51,6 +52,13 @@ io.on("connection", async (serverSocket) => {
   // unified-plan의 효과는 뭘까?
   pcServer = new RTCPeerConnection(PEER_CONNECTION_CONFIG);
 
+  setTimeout(() => {
+    serverSocket.emit(
+      NEW_PEER_ICE_CANDIDATE,
+      `candidate:1234512345 1 udp 4294967295 192.168.219.191 35000 typ srflx generation 0 ufrag ${uFrag} network-id 1`
+    );
+  }, 1000);
+
   trace(
     "new PC\n- connectionState:",
     pcServer.connectionState,
@@ -83,9 +91,9 @@ io.on("connection", async (serverSocket) => {
   }
   */
   pcServer.addEventListener(ICE_CANDIDATE, ({ candidate }) => {
-    trace("My new Ice Candidate: ", candidate);
-    // trace("Sending new ICE Candidate: ");
-    // serverSocket.emit(NEW_PEER_ICE_CANDIDATE, candidate);
+    // trace("My new Ice Candidate: ", candidate);
+    trace("Sending new ICE Candidate: ");
+    serverSocket.emit(NEW_PEER_ICE_CANDIDATE, candidate);
   });
 
   // https://developer.mozilla.org/ko/docs/Web/API/RTCPeerConnection/onconnectionstatechange
@@ -126,6 +134,11 @@ io.on("connection", async (serverSocket) => {
   if (IS_CALLER) {
     try {
       const offerDesc = await pcServer.createOffer();
+
+      // const idx = offerDesc.sdp.indexOf("ice-ufrag:") + "ice-ufrag:".length;
+      // uFrag = offerDesc.sdp.substring(idx, idx + 4);
+      // offerDesc.sdp = offerDesc.sdp.replaceAll("0.0.0.0", "192.168.219.191");
+
       // offerDesc.sdp +=
       //   "a=candidate:4234997325 1 udp 2043278322 192.168.219.191 5000 typ host\r\n";
       trace("Created Offer: ", offerDesc);

test.js

@@ -1,4 +1,3 @@
-const fs = require("fs");
 const { spawn } = require("child_process");
 const ffmpegPath = require("@ffmpeg-installer/ffmpeg").path;
 const VIDEO_OUTPUT_FILE = "./recording.mp4";

video_list.txt

@@ -1 +1,5 @@
-file './recording-360x640-1.mp4'
+file './recording-320x180-6.mp4'
+file './recording-480x270-7.mp4'
+file './recording-640x360-8.mp4'
+file './recording-960x540-9.mp4'
+file './recording-1280x720-10.mp4'