diff --git a/src/component/internal/connection.ts b/src/component/internal/connection.ts
index bca94c7c..f7945e47 100644
--- a/src/component/internal/connection.ts
+++ b/src/component/internal/connection.ts
@@ -35,7 +35,7 @@ export class NekoConnection extends EventEmitter<NekoConnectionEvents> {
     this._state = state
 
     // initial state
-    Vue.set(this._state, 'type', 'webrtc')
+    Vue.set(this._state, 'type', 'screencast')
 
     // websocket
     this.websocket.on('connected', () => {
@@ -56,12 +56,15 @@ export class NekoConnection extends EventEmitter<NekoConnectionEvents> {
       if (this.websocket.connected && this.webrtc.connected) {
         Vue.set(this._state, 'status', 'connected')
       }
+
+      Vue.set(this._state, 'type', 'webrtc')
     })
     this.webrtc.on('disconnected', () => {
       if (this._state.status === 'connected') {
         Vue.set(this._state, 'status', 'disconnected')
       }
 
+      Vue.set(this._state, 'type', 'screencast')
       this._webrtcReconnect()
     })
 
diff --git a/src/component/main.vue b/src/component/main.vue
index 3425f047..ca1dd121 100644
--- a/src/component/main.vue
+++ b/src/component/main.vue
@@ -8,7 +8,7 @@
         :muted="autoplay"
         playsinline
       />
-      <neko-screencast v-if="state.connection.type == 'screencast'" :api="api.room" />
+      <neko-screencast v-if="state.connection.type == 'screencast' && state.connection.screencast" :api="api.room" />
       <neko-overlay
         :webrtc="connection.webrtc"
         :scroll="state.control.scroll"