Added button to control the OBS Virtual Webcam (#110)

* Added button to control the OBS Virtual Webcam

* Convert to Virtual Camera to Events

- Remove virutalcam from heartbeat
- Sync isVirtualCamActive during initial connection
- Use VirtualcamStateChanged events to update isVirtualCamActive

* npm run lint fixes

Co-authored-by: Tim Donahue <tdonahue@nytechco.com>

src/App.svelte

@@ -11,7 +11,7 @@
     mdiBorderVertical, mdiArrowSplitHorizontal,
     mdiAccessPoint, mdiAccessPointOff,
     mdiRecord, mdiStop, mdiPause, mdiPlayPause,
-    mdiConnection,
+    mdiConnection, mdiCameraOff, mdiCamera,
     mdiMotionPlayOutline, mdiMotionPlay
   } from '@mdi/js'
   import Icon from 'mdi-svelte'
@@ -80,6 +80,7 @@
   let isFullScreen
   let isStudioMode
   let isSceneOnTop
+  let isVirtualCamActive
   let isIconMode = window.localStorage.getItem('isIconMode') || false
   let isReplaying
   let editable = false
@@ -158,6 +159,14 @@
     await sendCommand('StopRecord')
   }
 
+  async function startVirtualCam () {
+    await sendCommand('StartVirtualCam')
+  }
+
+  async function stopVirtualCam () {
+    await sendCommand('StopVirtualCam')
+  }
+
   async function pauseRecording () {
     await sendCommand('PauseRecord')
   }
@@ -218,6 +227,7 @@
       // console.log(heartbeat);
     }, 1000) // Heartbeat
     isStudioMode = (await sendCommand('GetStudioModeEnabled')).studioModeEnabled || false
+    isVirtualCamActive = (await sendCommand('GetVirtualCamStatus')).outputActive || false
   })
 
   obs.on('ConnectionError', async () => {
@@ -230,6 +240,11 @@
     }
   })
 
+  obs.on('VirtualcamStateChanged', async (data) => {
+    console.log('VirtualcamStateChanged', data.outputActive)
+    isVirtualCamActive = data && data.outputActive
+  })
+
   obs.on('StudioModeStateChanged', async (data) => {
     console.log('StudioModeStateChanged', data.studioModeEnabled)
     isStudioMode = data && data.studioModeEnabled
@@ -298,6 +313,15 @@
                 <span class="icon"><Icon path={mdiRecord} /></span>
               </button>
             {/if}
+            {#if isVirtualCamActive}
+              <button class="button is-danger" on:click={stopVirtualCam} title="Stop Virtual Webcam">
+                <span class='icon'><Icon path={mdiCameraOff} /></span>
+              </button>
+            {:else}
+              <button class="button is-danger is-light" on:click={startVirtualCam} title="Start Virtual Webcam">
+                <span class='icon'><Icon path={mdiCamera} /></span>
+              </button>
+            {/if}
             <button class:is-light={!isStudioMode} class="button is-link" on:click={toggleStudioMode} title="Toggle Studio Mode">
               <span class="icon"><Icon path={mdiBorderVertical} /></span>
             </button>