diff --git a/src/component/internal/messages.ts b/src/component/internal/messages.ts
index f67198b5..11b4960f 100644
--- a/src/component/internal/messages.ts
+++ b/src/component/internal/messages.ts
@@ -10,6 +10,7 @@ import NekoState from '../types/state'
 export interface NekoEvents {
   // connection events
   ['connection.status']: (status: 'connected' | 'connecting' | 'disconnected') => void
+  ['connection.type']: (status: 'fallback' | 'webrtc' | 'none') => void
   ['connection.webrtc.sdp']: (type: 'local' | 'remote', data: string) => void
   ['connection.webrtc.sdp.candidate']: (type: 'local' | 'remote', data: RTCIceCandidateInit) => void
   ['connection.closed']: (error?: Error) => void
diff --git a/src/component/main.vue b/src/component/main.vue
index 489ef6e8..398ec9d3 100644
--- a/src/component/main.vue
+++ b/src/component/main.vue
@@ -489,14 +489,10 @@
       }
     }
 
-    @Watch('state.connection.status')
-    onConnectionChange(status: 'connected' | 'connecting' | 'disconnected') {
-      this.events.emit('connection.status', status)
-    }
-
     @Watch('screencast')
-    onScreencastChange(value: boolean) {
-      if (value) {
+    @Watch('state.connection.webrtc.connected')
+    updateConnectionType() {
+      if (this.screencast) {
         Vue.set(this.state.connection, 'type', 'fallback')
       } else if (this.state.connection.webrtc.connected) {
         Vue.set(this.state.connection, 'type', 'webrtc')
@@ -505,6 +501,16 @@
       }
     }
 
+    @Watch('state.connection.status')
+    onConnectionStatusChange(status: 'connected' | 'connecting' | 'disconnected') {
+      this.events.emit('connection.status', status)
+    }
+
+    @Watch('state.connection.type')
+    onConnectionTypeChange(type: 'fallback' | 'webrtc' | 'none') {
+      this.events.emit('connection.type', type)
+    }
+
     clear() {
       // destroy video
       if (this._video) {