diff --git a/src/component/main.vue b/src/component/main.vue
index 92bd9d18..ba89d1af 100644
--- a/src/component/main.vue
+++ b/src/component/main.vue
@@ -81,8 +81,8 @@
     public state = {
       connection: {
         authenticated: false,
-        websocket: 'disconnected',
-        webrtc: 'disconnected',
+        websocket: this.websocket.supported ? 'disconnected' : 'unavailable',
+        webrtc: this.webrtc.supported ? 'disconnected' : 'unavailable',
         type: 'none',
         can_watch: false,
         can_control: false,
diff --git a/src/component/types/state.ts b/src/component/types/state.ts
index 59045873..06ec0175 100644
--- a/src/component/types/state.ts
+++ b/src/component/types/state.ts
@@ -12,8 +12,8 @@ export default interface State {
 /////////////////////////////
 export interface Connection {
   authenticated: boolean
-  websocket: 'disconnected' | 'connecting' | 'connected'
-  webrtc: 'disconnected' | 'connecting' | 'connected'
+  websocket: 'unavailable' | 'disconnected' | 'connecting' | 'connected'
+  webrtc: 'unavailable' | 'disconnected' | 'connecting' | 'connected'
   type: 'webrtc' | 'fallback' | 'none'
   can_watch: boolean
   can_control: boolean