Fix : Resolve Coturn Server Issue

KMS 서버를 이용한 화상채팅 비디오 안나오는 이슈 ssl인증서 경로 수정후 해결
Resolves : #1

Author: LminWoo99

src/main/resources/static/css/rtc/kurentostyle.css

@@ -1,25 +1,10 @@
-/*
- * (C) Copyright 2016 Kurento (http://kurento.org/)
- *
- * Licensed under the  GNU General Public License v3.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
+
 @CHARSET "UTF-8";
 
 body {
     font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
-    color: #404040;
-    background: #0ca3d2;
+    background-color: #36393f;
+    color: #ffffff;
 }
 
 input[type=checkbox], input[type=radio] {
@@ -237,6 +222,7 @@ input[type=button]:active, input[type=submit]:active {
     width: 100%;
     height: 70%;
     object-fit: cover;
+    border-radius: 10px;
 }
 
 
@@ -253,6 +239,7 @@ input[type=button]:active, input[type=submit]:active {
     width: 100%;
     height: 70%;
     object-fit: cover;
+    border-radius: 10px;
 }
 
 
@@ -269,6 +256,8 @@ input[type=button]:active, input[type=submit]:active {
     width: 100%;
     height: 70%;
     object-fit: cover;
+    border-radius: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 효과 추가 */
 }
 
 
@@ -285,6 +274,8 @@ input[type=button]:active, input[type=submit]:active {
     width: 100%;
     height: 70%;
     object-fit: cover;
+    border-radius: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 효과 추가 */
 }
 
 
@@ -300,6 +291,8 @@ input[type=button]:active, input[type=submit]:active {
 .participant video, .participant.main video {
     width: 100%;
     height: 70%;
+    border-radius: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 효과 추가 */
     object-fit: cover;
 }
 
@@ -315,6 +308,8 @@ input[type=button]:active, input[type=submit]:active {
 
 .participant video, .participant.main video {
     width: 100%;
+    border-radius: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 효과 추가 */
     height: 70%;
     object-fit: cover;
 }
@@ -333,6 +328,8 @@ input[type=button]:active, input[type=submit]:active {
     width: 100%;
     height: 70%;
     object-fit: cover;
+    border-radius: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 효과 추가 */
 }
 
 
@@ -356,49 +353,35 @@ input[type=button]:active, input[type=submit]:active {
     animation-fill-mode: forwards;
 }
 
-@
--webkit-keyframes disapear {
-
-50
-%
+@-webkit-keyframes disapear { 50%
 {
     -webkit-transform: translateX(-5%)
 ;
     transform: translateX(-5%)
 ;
 }
 
-100
-%
+100%
 {
-    -webkit-transform: translateX (200%
-)
-;
-    transform: translateX (200%
-)
-;
+    -webkit-transform: translateX(200%);
+    transform: translateX(200%);
 }
 }
-@
-keyframes disapear {
+@keyframes disapear {
 
-50
-%
+50%
 {
     -webkit-transform: translateX(-5%)
 ;
     transform: translateX(-5%)
 ;
 }
 
-100
-%
+100%
 {
-    -webkit-transform: translateX (200%
-)
+    -webkit-transform: translateX(200%)
 ;
-    transform: translateX (200%
-)
+    transform: translateX(200%)
 ;
 }
 }

src/main/resources/templates/kurentoroom.html

@@ -17,8 +17,27 @@
     <link rel="styleSheet" href="/css/rtc/floating_chat.css" type="text/css" media="screen">
 </head>
 <script>
+    let isFlipped = true; // 초기 상태: 좌우 반전 켜기
+
+    function toggleFlip() {
+        const videoElement = document.querySelector('#participants video');
+        if (videoElement) {
+            if (isFlipped) {
+                videoElement.style.transform = 'scaleX(-1)';
+                document.getElementById('flipBtn').value = 'flip Off'; // 버튼 상태: 버튼 상태 끄기
+            } else {
+                videoElement.style.transform = 'scaleX(1)';
+                document.getElementById('flipBtn').value = 'flip'; // 버튼 상태: 좌우 반전 켜기
+            }
+            isFlipped = !isFlipped; // 버튼 상태 변경
+        }
+    }
 </script>
 <style>
+    body {
+        background-color: #2C2F33;
+        color: #FFFFFF;
+    }
 </style>
 <body>
 <div id="container">
@@ -37,6 +56,7 @@
                                data-flag="true">
                         <input type="button" class="btn btn-outline-success localAudioToggle" id="audioBtn" value="audio Off"
                                data-flag="true">
+                        <input type="button" class="btn btn-outline-success flipVideoToggle" id="flipBtn" value="flip" data-flag="false" onclick="toggleFlip()">
                     </div>
                 </div>
             </div>
@@ -60,7 +80,7 @@ <h2 id="room-header"></h2>
         <div class="chat">
             <div class="header">
             <span class="title">
-                Tell Me Your Story
+                대화를 시작하세요
             </span>
                 <button>
                     <i class="fa fa-times" aria-hidden="true"></i>

src/main/resources/templates/roomlist.html

@@ -538,7 +538,7 @@ <h5 th:if="${user != null}">
             </p>
             <button class="btn btn-primary btn-sm" id="configRoom" data-bs-toggle="modal" data-bs-target="#confirmPwdModal" th:data-id="${room.roomId}">채팅방 설정</button>
             </div>
-        </li>>
+        </li>
     </ul>
     </script>
     <script th:inline="javascript">

src/main/resources/templates/rtcroom.html

@@ -120,7 +120,6 @@ <h1>모두의 마당</h1>
 </script>
 <script>
     document.addEventListener('DOMContentLoaded', function() {
-        // ... 기존 코드 ...
 
         // 좌우 반전 버튼 이벤트 리스너
         var flipButton = document.getElementById('flip_video');