add webrtc stable to state.

src/component/internal/connection.ts

@@ -38,6 +38,7 @@ export class NekoConnection extends EventEmitter<NekoConnectionEvents> {
   private _onCloseHandle: (error?: Error) => void
 
   private _webrtcCongestionControlHandle: (stats: WebRTCStats) => void
+  private _webrtcStableHandle: (isStable: boolean) => void
 
   // eslint-disable-next-line
   constructor(
@@ -67,6 +68,10 @@ export class NekoConnection extends EventEmitter<NekoConnectionEvents> {
       Vue.set(this._state.websocket, 'connected', this.websocket.connected)
       Vue.set(this._state.webrtc, 'connected', this.webrtc.connected)
 
+      if (this._state.webrtc.stable && !this.webrtc.connected) {
+        Vue.set(this._state.webrtc, 'stable', false)
+      }
+
       if (this._state.status === 'connected' && this.activated) {
         Vue.set(this._state, 'status', 'connecting')
       }
@@ -81,6 +86,12 @@ export class NekoConnection extends EventEmitter<NekoConnectionEvents> {
       r.on('close', this._onCloseHandle)
     })
 
+    // synchronize webrtc stable with global state
+    this._webrtcStableHandle = (isStable: boolean) => {
+      Vue.set(this._state.webrtc, 'stable', isStable)
+    }
+    this.webrtc.on('stable', this._webrtcStableHandle)
+
     //
     // TODO: Use server side congestion control.
     //
@@ -206,6 +217,7 @@ export class NekoConnection extends EventEmitter<NekoConnectionEvents> {
 
     // TODO: Use server side congestion control.
     this.webrtc.off('stats', this._webrtcCongestionControlHandle)
+    this.webrtc.off('stable', this._webrtcStableHandle)
 
     // unbind events from all reconnectors
     Object.values(this._reconnector).forEach((r) => {

src/component/internal/webrtc.ts

@@ -23,6 +23,7 @@ export interface NekoWebRTCEvents {
   track: (event: RTCTrackEvent) => void
   candidate: (candidate: RTCIceCandidateInit) => void
   negotiation: (description: RTCSessionDescriptionInit) => void
+  stable: (isStable: boolean) => void
   stats: (stats: WebRTCStats) => void
   ['cursor-position']: (data: CursorPosition) => void
   ['cursor-image']: (data: CursorImage) => void
@@ -137,6 +138,13 @@ export class NekoWebRTC extends EventEmitter<NekoWebRTCEvents> {
       switch (this._state) {
         case 'connected':
           this.onConnected()
+          // Connected event makes connection stable.
+          this.emit('stable', true)
+          break
+        case 'disconnected':
+          // Disconnected event makes connection unstable,
+          // may go back to a connected state after some time.
+          this.emit('stable', false)
           break
         // We don't watch the disconnected signaling state here as it can indicate temporary issues and may
         // go back to a connected state after some time. Watching it would close the video call on any temporary

src/component/main.vue

@@ -137,6 +137,7 @@
         },
         webrtc: {
           connected: false,
+          stable: false,
           config: {
             max_reconnects: 15,
             timeout_ms: 10000,

src/component/types/state.ts

@@ -33,6 +33,7 @@ export interface WebSocket {
 
 export interface WebRTC {
   connected: boolean
+  stable: boolean
   config: ReconnectorConfig
   stats: WebRTCStats | null
   video: string | null