* SignalR: disable Negotiate and set only Websockets transport

* Render UI only when settings and themehelper loaded * Fix remove user video before select screen for share * Fix chat styles * Add participant tracks state check * New welcome page
AMEST · Jul 4, 2022 · 5220f9a · 5220f9a
1 parent 5fbfecd
commit 5220f9a
Show file tree

Hide file tree

Showing 15 changed files with 185 additions and 88 deletions.
diff --git a/src/PeerMeeting.Host/ClientApp/public/css/bootstrap.default.css b/src/PeerMeeting.Host/ClientApp/public/css/bootstrap.default.css
@@ -2,11 +2,13 @@
  * Copyright 2022 Klabukov Erik.
  * SPDX-License-Identifier: GPL-3.0-only
  */
- :root{
+:root {
     --bs-body-bg: #fff;
-    --chat-color: rgb(255, 255, 255, 0.8)
- }
-#app{
+    --chat-color: rgb(255, 255, 255);
+    --welcome-hr: rgba(0, 0, 0, 0.1);
+}
+
+#app {
     color: #2c3e50;
 }
 

diff --git a/src/PeerMeeting.Host/ClientApp/src/App.vue b/src/PeerMeeting.Host/ClientApp/src/App.vue
@@ -111,6 +111,14 @@ export default {
   display: none!important;;
 }
 
+.container-center {
+  position: absolute;
+  width: 100%;
+  top: 35%;
+  -ms-transform: translateY(-15%);
+  transform: translateY(-15%);
+}
+
 /* Scroll */
 /* width */
 ::-webkit-scrollbar {

diff --git a/src/PeerMeeting.Host/ClientApp/src/RTCUtils.js b/src/PeerMeeting.Host/ClientApp/src/RTCUtils.js
@@ -88,12 +88,16 @@ var RTCUtils = {
     )
   },
   AddStream: function(connection, stream, mPeer, callback){
-    connection.attachStreams = []
-    connection.addStream(stream)
-    mPeer.onGettingLocalMedia(stream)
-    this.SetHarkHandler(connection, stream)
-    var event = this.CreateVideoElementEvent(connection.userid, stream)
-    callback(event)
+    var self = this;
+    connection.attachStreams.forEach(s => s.stop())
+    connection.attachStreams = [];
+    setTimeout(() =>{
+      connection.addStream(stream)
+      mPeer.onGettingLocalMedia(stream)
+      self.SetHarkHandler(connection, stream)
+      var event = this.CreateVideoElementEvent(connection.userid, stream)
+      callback(event)
+    },300)
   },
   CreateFakeStream: function(connection, mPeer, callback){
     connection.attachStreams = []

diff --git a/src/PeerMeeting.Host/ClientApp/src/WebRtcHub.js b/src/PeerMeeting.Host/ClientApp/src/WebRtcHub.js
@@ -1,13 +1,16 @@
 // Copyright 2021 Klabukov Erik.
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr'
+import { HubConnectionBuilder, LogLevel, HttpTransportType } from '@microsoft/signalr'
 /* eslint-disable */
 // Custom SignalR connection handler
 function WebRtcSignalR (connection, connectCallback) {
   try{
   var signalRConnection = new HubConnectionBuilder()
-    .withUrl('/ws/webrtc')
+    .withUrl('/ws/webrtc', { 
+      transport: HttpTransportType.WebSockets,
+      skipNegotiation: true
+    })
     .withAutomaticReconnect()
     .configureLogging(LogLevel.Information)
     .build()

diff --git a/src/PeerMeeting.Host/ClientApp/src/assets/lang.json b/src/PeerMeeting.Host/ClientApp/src/assets/lang.json
@@ -3,7 +3,8 @@
       "welcome": {
         "message": "Start & join meetings for free. No account needed, open service, write you name and open or join room!",
         "startMeeting": "Start meeting",
-        "roomName": "Room name"
+        "new": "New",
+        "recent": "Recent"
       },
       "login":{
         "title":"Write your name for participation in conference.",
@@ -66,7 +67,7 @@
         }
       },
       "callEnded":{
-        "title":"The call was over.н",
+        "title":"The call was over.",
         "message":"You have been removed from the room",
         "button": "Go to Home"
       }
@@ -75,7 +76,8 @@
       "welcome": {
         "message": "Начинайте встречи и присоединяйтесь к ним бесплатно. Аккаунт не нужен, откройте сервис, напишите свое имя и создайте или присоединитесь к комнате!",
         "startMeeting": "Начать встречу",
-        "roomName": "Имя комнаты"
+        "new": "Новая",
+        "recent": "Недавние"
       },
       "login":{
         "title":"Напишите свое имя для участия в конференции.",

diff --git a/src/PeerMeeting.Host/ClientApp/src/components/room/Chat.vue b/src/PeerMeeting.Host/ClientApp/src/components/room/Chat.vue
@@ -33,14 +33,18 @@
 </template>
 
 <script>
-import { HubConnectionBuilder, LogLevel } from "@microsoft/signalr";
+import {
+  HubConnectionBuilder,
+  LogLevel,
+  HttpTransportType,
+} from "@microsoft/signalr";
 import { v4 as uuidv4 } from "uuid";
 import CommonUtils from "@/CommonUtils";
 export default {
   name: "Chat",
   props: {
     roomId: String,
-    state: Object
+    state: Object,
   },
   data: () => ({
     connection: undefined,
@@ -67,7 +71,7 @@ export default {
         date: data.date,
       };
       this.listMessages.push(message);
-      if(!this.state.chatOpened){
+      if (!this.state.chatOpened) {
         this.scrollToBottom();
         this.$store.commit("changeHasNewMessages", true);
       }
@@ -85,18 +89,21 @@ export default {
       }, 100);
     },
   },
-  watch:{
+  watch: {
     // eslint-disable-next-line
-    "state.chatOpened": function(n,o){
-      if(n){
+    "state.chatOpened": function (n, o) {
+      if (n) {
         this.$store.commit("changeHasNewMessages", false);
       }
-    }
+    },
   },
   created: function () {
     var self = this;
     this.connection = new HubConnectionBuilder()
-      .withUrl("/ws/chat")
+      .withUrl("/ws/chat", {
+        transport: HttpTransportType.WebSockets,
+        skipNegotiation: true,
+      })
       .withAutomaticReconnect()
       .configureLogging(LogLevel.Information)
       .build();
@@ -122,7 +129,8 @@ export default {
   min-width: 300px;
   left: 0;
   top: 58px;
-  background-color: var(--chat-color, rgb(34, 34, 34, 0.6));
+  background-color: var(--chat-color, rgb(34, 34, 34));
+  border-right: 1px solid #ced4da;
 }
 .chat-messages-list {
   height: calc(100% - 64px);
@@ -133,7 +141,6 @@ export default {
   overflow-y: scroll;
   text-align: left;
   padding-top: 10px;
-  border-right: 1px solid #ced4da;
   border-radius: 0px;
 }
 .chat-textarea {
@@ -149,17 +156,23 @@ export default {
   height: 64px;
   border-radius: 0px;
   resize: none;
-  background-color: var(--chat-color, rgb(34, 34, 34, 0.6));
+  background-color: var(--chat-color,#303030);
   color: var(--bs-body-color);
+  border-right: 1px solid var(--chat-color,#303030);
+  border-left: 1px solid var(--chat-color,#303030);
+  border-bottom: 1px solid var(--chat-color,#303030);
 }
 .chat-textarea textarea:focus {
-  background-color: var(--chat-color, rgb(34, 34, 34, 0.6));
+  background-color: var(--chat-color,#303030);
   color: var(--bs-body-color);
 }
 .message-avatar {
   position: absolute;
   background-color: transparent;
 }
+.message-avatar .b-avatar-text{
+      background-color: #6c757d;
+}
 .message-body {
   padding-left: 48px;
 }
@@ -172,19 +185,19 @@ export default {
   white-space: pre-wrap;
   word-break: break-word;
 }
-.markdown-body{
+.markdown-body {
   color: var(--bs-body-color);
 }
 
-.markdown-body pre{
+.markdown-body pre {
   background-color: var(--bs-body-bg);
 }
 @-moz-document url-prefix() {
   .markdown-body::before {
-    content: unset!important;
+    content: unset !important;
   }
   .markdown-body::after {
-    content: unset!important;
+    content: unset !important;
   }
 }
 </style>
diff --git a/src/PeerMeeting.Host/ClientApp/src/components/room/participant/ParticipantBlock.vue b/src/PeerMeeting.Host/ClientApp/src/components/room/participant/ParticipantBlock.vue
@@ -179,7 +179,7 @@ export default {
       this.peerStats = new PeerStats(this.connection.connection.peers[event.userid].peer);
       this.peerStats.start((stats) => {
         self.stats = stats;
-      }, 3000);
+      }, 5000);
     },
     streamEventChangeCallback: function () {
       this.$forceUpdate();

diff --git a/src/PeerMeeting.Host/ClientApp/src/main.js b/src/PeerMeeting.Host/ClientApp/src/main.js
@@ -64,7 +64,7 @@ if (turnOnly !== undefined) {
 // Restore theme settings
 var themeHelper = new ThemeHelper()
 Vue.prototype.$themeHelper = themeHelper
-themeHelper.init().then(r => {
+var themeHelperInitTask = themeHelper.init().then(r => {
   var theme = window.localStorage['theme']
   if (theme !== undefined) {
     store.commit('changeTheme', theme)
@@ -106,7 +106,7 @@ if (document.cookie.indexOf('CSRF-TOKEN') > -1) {
 }
 
 // Add Sentry exception handling
-axios.get("/api/settings").then(response => {
+var sentryIntegrationTask = axios.get("/api/settings").then(response => {
   if(response.data == null || response.status != 200)
     return;
   Sentry.init({
@@ -115,16 +115,21 @@ axios.get("/api/settings").then(response => {
     integrations: [
       new Integrations.BrowserTracing({
         routingInstrumentation: Sentry.vueRouterInstrumentation(router),
-        tracingOrigins: ["localhost", "peer-meetings.nb-47-dev.tk", document.location.host, /^\//],
+        tracingOrigins: ["localhost", "peer-meetings.nb-47.ml", document.location.host, /^\//],
       }),
     ],
     tracesSampleRate: 0.5,
   });
 })
 
-new Vue({
-  i18n,
-  store,
-  router,
-  render: h => h(App)
-}).$mount('#app')
+Promise.all([
+  themeHelperInitTask, 
+  sentryIntegrationTask
+]).then(result => {
+  new Vue({
+    i18n,
+    store,
+    router,
+    render: h => h(App)
+  }).$mount('#app')
+})
diff --git a/src/PeerMeeting.Host/ClientApp/src/services/PeerMeetingRtcMulticonnection.js b/src/PeerMeeting.Host/ClientApp/src/services/PeerMeetingRtcMulticonnection.js
@@ -45,6 +45,12 @@ export default class PeerMeetingRtcMulticonnection {
         this.connection.leave();
     }
 
+    stop(){
+        clearInterval(this.patrticipantsFixTimer);
+        clearInterval(this.patrticipantsCardFixTimer);
+        this.connection.close();
+    }
+
     setOnStream(callback) {
         this.connection.onstream = callback;
     }

diff --git a/src/PeerMeeting.Host/ClientApp/src/services/PeerStats.js b/src/PeerMeeting.Host/ClientApp/src/services/PeerStats.js
@@ -29,7 +29,7 @@ export default class PeerStats {
     start(callback, interval) {
         if (!callback)
             throw "Callback cannot be null";
-        interval = interval || 3000;
+        interval = interval || 5000;
         var self = this;
         this.timer = setInterval(() => {
             self.PeerConnection.getStats().then(r => {

diff --git a/src/PeerMeeting.Host/ClientApp/src/services/RTCStateService.js b/src/PeerMeeting.Host/ClientApp/src/services/RTCStateService.js
@@ -16,10 +16,12 @@ export default class RTCStateService {
         hasWebcam: true,
         hasMicrophone: true,
     }
+    stateCheckTimer = null;
 
     constructor(connection, store) {
         this.rtcConnection = connection;
         this.store = store;
+        this.stateCheckTimer = setInterval(this.stateCheck, 1000, this);
     }
 
     renegotiateStreams(){
@@ -61,8 +63,6 @@ export default class RTCStateService {
 
     // Start screen sharing or stop and back to video + audio or audio only or empty
     screenSharing(callback = e => {}) {
-        this.rtcConnection.connection.attachStreams.forEach(s => s.stop())
-        console.log(this.rtcConnection.connection.attachStreams)
         this.state.screenEnabled = !this.state.screenEnabled;
         this.state.audioEnabled = this.state.hasMicrophone;
         this.state.videoEnabled = this.rtcConnection.dontCaptureUserMedia && !this.state.hasWebcam
@@ -93,7 +93,25 @@ export default class RTCStateService {
                 }, function (e) { console.error('screen sharing', e) });
             return
         }
+        this.rtcConnection.connection.attachStreams.forEach(s => s.stop())
         this.rtcConnection.connection.attachStreams = []
         RTCUtils.AddBaseStream(this.rtcConnection.connection, this.state, this.store.state.application.deviceSettings, callback)
     }
+
+    stateCheck(self) {
+        self.rtcConnection.connection.attachStreams.forEach(s => {
+            if(self.state.hasMicrophone)
+                s.getAudioTracks().forEach(track =>{
+                    var enabled = track.enabled;
+                    if(enabled && !self.state.audioEnabled) s.mute("audio");
+                    else if (!enabled && self.state.audioEnabled) s.unmute("audio");
+                })
+            if(!self.state.screenEnabled && self.state.hasWebcam)
+                s.getVideoTracks().forEach(track =>{
+                    var enabled = track.enabled;
+                    if(enabled && !self.state.videoEnabled) s.mute("video");
+                    else if (!enabled && self.state.videoEnabled) s.unmute("video");
+                })
+        });
+    }
 }
diff --git a/src/PeerMeeting.Host/ClientApp/src/views/CallEnded.vue b/src/PeerMeeting.Host/ClientApp/src/views/CallEnded.vue
@@ -14,13 +14,6 @@ export default {
 </script>
 
 <style scoped>
-.container-center {
-  position: absolute;
-  width: 100%;
-  top: 40%;
-  -ms-transform: translateY(-15%);
-  transform: translateY(-15%);
-}
 .card-center {
   margin-left: auto;
   margin-right: auto;

diff --git a/src/PeerMeeting.Host/ClientApp/src/views/Room.vue b/src/PeerMeeting.Host/ClientApp/src/views/Room.vue
@@ -198,12 +198,14 @@ export default {
   },
   unmount: function(){
     this.rtcConnection.leave();
+    this.rtcConnection.stop();
   },
   watch: {
     // eslint-disable-next-line
     $route(to, from) {
       this.roomId = to;
       this.rtcConnection.leave();
+      this.rtcConnection.stop();
       this.addToHistory();
       this.initialize();
       this.rtcConnection.join(this.roomId);
@@ -243,6 +245,9 @@ export default {
   align-items: center;
   position: relative;
 }
+.card-deck .card{
+  margin-right: unset !important;
+}
 @media (max-width: 380px) {
   .container-fluid {
     padding-left: 0px !important;