Fix obs-websocket v5, add replay button

README.md

@@ -24,13 +24,14 @@
 - Support for Studio Mode (preview and program scenes)
 - Live view of output, updating 1 fps
 - Fullscreen button and wakelock support (keeps screen on)
+- Replay Buffer button
 - Easy bookmarking/deeplink by specifying host in URL
 - Profile switching support
 - Scene Collections switching support
 - Custom transition support
 - Extra features:
   - Hide scenes that have `(hidden)` in their name
-  - Switch sources in scenes with `(switch)` in their name
+  - Switch sources in scenes with `(switch)` in their name visually by thumbnails
 
 
 ---

src/App.svelte

@@ -4,7 +4,16 @@
 
   // Imports
   import { onMount } from 'svelte'
-  import { mdiSquareRoundedBadge, mdiSquareRoundedBadgeOutline, mdiImageEdit, mdiImageEditOutline, mdiFullscreen, mdiFullscreenExit, mdiBorderVertical, mdiArrowSplitHorizontal, mdiAccessPoint, mdiAccessPointOff, mdiRecord, mdiStop, mdiPause, mdiPlayPause, mdiConnection } from '@mdi/js'
+  import {
+    mdiSquareRoundedBadge, mdiSquareRoundedBadgeOutline,
+    mdiImageEdit, mdiImageEditOutline,
+    mdiFullscreen, mdiFullscreenExit,
+    mdiBorderVertical, mdiArrowSplitHorizontal,
+    mdiAccessPoint, mdiAccessPointOff,
+    mdiRecord, mdiStop, mdiPause, mdiPlayPause,
+    mdiConnection,
+    mdiMotionPlayOutline, mdiMotionPlay
+  } from '@mdi/js'
   import Icon from 'mdi-svelte'
   import { compareVersions } from 'compare-versions'
 
@@ -72,10 +81,12 @@
   let isStudioMode
   let isSceneOnTop
   let isIconMode = window.localStorage.getItem('isIconMode') || false
+  let isReplaying
   let editable = false
   let address
   let password
   let scenes = []
+  let replayError = ''
   let errorMessage = ''
 
   $: isIconMode
@@ -117,6 +128,15 @@
     await sendCommand('SetStudioModeEnabled', { studioModeEnabled: !isStudioMode })
   }
 
+  async function toggleReplay () {
+    const data = await sendCommand('ToggleReplayBuffer')
+    console.debug('ToggleReplayBuffer', data.outputActive)
+    if (data.outputActive === undefined) {
+      replayError = 'Replay buffer is not enabled.'
+      setTimeout(function () { replayError = '' }, 5000)
+    } else isReplaying = data.outputActive
+  }
+
   async function switchSceneView () {
     isSceneOnTop = !isSceneOnTop
   }
@@ -209,6 +229,11 @@
     console.log('StudioModeStateChanged', data.studioModeEnabled)
     isStudioMode = data && data.studioModeEnabled
   })
+
+  obs.on('ReplayBufferStateChanged', async (data) => {
+    console.log('ReplayBufferStateChanged', data)
+    isReplaying = data && data.outputActive
+  })
 </script>
 
 <svelte:head>
@@ -284,6 +309,12 @@
                 <Icon path={isIconMode ? mdiSquareRoundedBadgeOutline : mdiSquareRoundedBadge} />
               </span>
             </button>
+            <button class:is-light={!isReplaying} class:is-danger={replayError} class="button is-link" title="Toggle Replay Buffer" on:click={toggleReplay}>
+              <span class="icon">
+                <Icon path={isReplaying ? mdiMotionPlayOutline : mdiMotionPlay} />
+              </span>
+              {#if replayError}<span>{replayError}</span>{/if}
+            </button>
             <ProfileSelect />
             <SceneCollectionSelect />
             <button class="button is-danger is-light" on:click={disconnect} title="Disconnect">

src/SceneSwitcher.svelte

@@ -19,9 +19,10 @@
 
   onMount(async function () {
     let data = await sendCommand('GetSceneList')
+    console.log('GetSceneList', data)
     programScene = data.currentProgramSceneName || ''
+    previewScene = data.currentPreviewSceneName
     scenes = data.scenes
-    console.log('GetSceneList', data)
     data = await sendCommand('GetStudioModeEnabled')
     if (data && data.studioModeEnabled) {
       isStudioMode = true
@@ -40,29 +41,37 @@
     scenes = data.scenes
   })
 
-  obs.on('SourceRenamed', async (data) => {
-    if (data.sourceType === 'scene') {
-      console.log('SourceRenamed', data.previousName, data.newName)
-      // Rename in scenes
-      for (let i = 0; i < scenes.length; i++) {
-        if (scenes[i] === data.previousName) {
-          scenes[i] = data.newName
-          break
-        }
+  obs.on('SceneCreated', async (data) => {
+    console.log('SceneCreated', data)
+  })
+
+  obs.on('SceneRemoved', async (data) => {
+    console.log('SceneRemoved', data)
+    for (let i = 0; i < scenes.length; i++) {
+      if (scenes[i].sceneName === data.sceneName) {
+        delete scenes[i]
+      }
+    }
+  })
+
+  obs.on('SceneNameChanged', async (data) => {
+    console.log('SceneNameChanged', data)
+    for (let i = 0; i < scenes.length; i++) {
+      if (scenes[i].sceneName === data.oldSceneName) {
+        scenes[i].sceneName = data.sceneName
       }
-      // Rename in sceneIcons
-      sceneIcons[data.newName] = sceneIcons[data.previousName]
     }
+    // Rename in sceneIcons
+    sceneIcons[data.sceneName] = sceneIcons[data.oldSceneName]
   })
 
-  obs.on('SwitchScenes', (data) => {
-    console.log('SwitchScenes', data['scene-name'], data.sources.length)
-    programScene = data || {}
-    programScene = programScene['scene-name']
+  obs.on('CurrentProgramSceneChanged', (data) => {
+    console.log('CurrentProgramSceneChanged', data)
+    programScene = data.sceneName || ''
   })
 
   obs.on('CurrentPreviewSceneChanged', async (data) => {
-    console.log('CurrentPreviewSceneChanged', data.sceneName)
+    console.log('CurrentPreviewSceneChanged', data)
     previewScene = data.sceneName
   })
 
@@ -77,7 +86,7 @@
   }
 
   function onNameChange (event) {
-    sendCommand('SetSourceName', { sourceName: event.target.title, newName: event.target.value })
+    sendCommand('SetSceneName', { sceneName: event.target.title, newSceneName: event.target.value })
   }
   function onIconChange (event) {
     sceneIcons[event.target.title] = event.target.value

src/SourceButton.svelte

@@ -4,26 +4,14 @@
   export let icon = '#ffffff'
   export let isProgram = false
   export let isPreview = false
-  let img = ''
+  export let img = ''
 
-  import { sendCommand } from './obs.js'
   import { createEventDispatcher } from 'svelte'
   const dispatch = createEventDispatcher()
 
-  $: if (buttonStyle === 'screenshot') { updateThumbnail(name) }
   $: style = icon.startsWith('#')
     ? `background-color: ${icon};`
     : `background-image: url(${icon});`
-
-  async function updateThumbnail (name) {
-    const data = await sendCommand('TakeSourceScreenshot', {
-      sourceName: name,
-      embedPictureFormat: 'jpg',
-      width: 192,
-      height: 108
-    })
-    img = data.img
-  }
 </script>
 
 <button
@@ -35,7 +23,7 @@
   style={buttonStyle === 'icon' ? style : ''}
   title={name}
   >
-  {#if img}<img src={img} alt={name} style="display:block" />{/if}
+  {#if img}<img src={img} alt={name} class="thumbnail" />{/if}
   {#if buttonStyle !== 'icon'}{name}{/if}
 </button>
 
@@ -82,4 +70,10 @@
     border-radius: 50%;
     box-shadow: 1px 1px 5px gray;
   }
+  .thumbnail {
+    display: block;
+    max-width: 100%;
+    max-height: calc(100% - 1rem);
+    margin: 0 auto;
+  }
 </style>

src/SourceSwitcher.svelte

@@ -3,7 +3,8 @@
   export let name = 'Backgrounds (hidden)'
   let items = []
   const itemsIndex = {}
-  let currentItemName = ''
+  let currentItemId = ''
+  const screenshottedIds = new Set()
 
   import { onMount } from 'svelte'
   import { obs, sendCommand } from './obs.js'
@@ -16,74 +17,119 @@
   async function refreshItems () {
     const data = await sendCommand('GetSceneItemList', { sceneName: name })
     items = data.sceneItems || items
-    await fillItems()
-  }
-
-  async function fillItems () {
     for (let i = 0; i < items.length; i++) {
-      const data = await sendCommand('GetSceneItemProperties', { 'scene-name': name, item: items[i].sourceName })
-      items[i] = data
-      itemsIndex[data.name] = i
-      if (data.visible) {
-        currentItemName = data.name
+      const item = items[i]
+      itemsIndex[item.sceneItemId] = i
+      if (item.sceneItemEnabled) {
+        currentItemId = item.sceneItemId
       }
     }
+    for (let i = 0; i < items.length; i++) {
+      items[i].img = await getItemScreenshot(items[i])
+    }
   }
 
-  obs.on('SceneItemVisibilityChanged', async (data) => {
-    if (data['scene-name'] === name) {
-      items[itemsIndex[data['item-name']]].visible = data['item-visible']
+  obs.on('SceneItemEnableStateChanged', async (data) => {
+    if (data.sceneName === name) {
+      const i = itemsIndex[data.sceneItemId]
+      items[i].sceneItemEnabled = data.sceneItemEnabled
+      if (items[i].sceneItemEnabled && !items[i].img) {
+        items[i].img = await getItemScreenshot(items[i])
+        if (screenshottedIds.has(items[i].sceneItemId)) {
+          items[i].img = await getItemScreenshot(items[i])
+          await sendCommand('SetSceneItemEnabled', {
+            sceneName: name,
+            sceneItemId: items[i].sceneItemId,
+            sceneItemEnabled: false
+          })
+          screenshottedIds.delete(items[i].sceneItemId)
+        }
+      }
     }
   })
 
-  obs.on('SourceOrderChanged', async (data) => {
-    if (data['scene-name'] === name) {
+  obs.on('SceneItemListReindexed', async (data) => {
+    if (data.sceneName === name) {
       await refreshItems()
     }
   })
 
-  obs.on('SceneItemAdded', async (data) => {
-    if (data['scene-name'] === name) {
+  obs.on('SceneItemCreated', async (data) => {
+    if (data.sceneName === name) {
       await refreshItems()
     }
   })
 
   obs.on('SceneItemRemoved', async (data) => {
-    if (data['scene-name'] === name) {
+    if (data.sceneName === name) {
       await refreshItems()
     }
   })
 
-  function backgroundClicker (itemName) {
+  function backgroundClicker (itemId) {
     return async function () {
-      await sendCommand('SetSceneItemProperties', {
-        'scene-name': name,
-        item: itemName,
-        visible: true
+      await sendCommand('SetSceneItemEnabled', {
+        sceneName: name,
+        sceneItemId: itemId,
+        sceneItemEnabled: true
+      })
+      if (currentItemId !== itemId) {
+        await sendCommand('SetSceneItemEnabled', {
+          sceneName: name,
+          sceneItemId: currentItemId,
+          sceneItemEnabled: false
+        })
+      }
+      currentItemId = itemId
+    }
+  }
+
+  async function getItemScreenshot (item) {
+    if (item.img) return item.img
+    let data = null
+    let retry = item.sceneItemEnabled ? 3 : 1
+    while (retry--) {
+      // Random sleep to avoid burst of thumbnail rendering
+      await new Promise((resolve) => setTimeout(resolve, Math.random() * 500 + 100))
+      data = await sendCommand('GetSourceScreenshot', {
+        sourceName: item.sourceName,
+        imageFormat: 'jpg',
+        width: 192,
+        height: 108
       })
-      if (currentItemName !== itemName) {
-        await sendCommand('SetSceneItemProperties', {
-          'scene-name': name,
-          item: currentItemName,
-          visible: false
+      if (data && data.imageData) {
+        return data.imageData
+      }
+    }
+  }
+
+  async function loadMissingScreenshots () {
+    for (let i = 0; i < items.length; i++) {
+      if (!items[i].img) {
+        await sendCommand('SetSceneItemEnabled', {
+          sceneName: name,
+          sceneItemId: items[i].sceneItemId,
+          sceneItemEnabled: true
         })
+        screenshottedIds.add(items[i].sceneItemId)
       }
-      currentItemName = itemName
     }
   }
 </script>
 
 <ol>
   {#each items as item}
   <li>
-    <SourceButton name={item.name}
-      on:click={backgroundClicker(item.name)}
-      isProgram={item.visible}
+    <SourceButton name={item.sourceName}
+      on:click={backgroundClicker(item.sceneItemId)}
+      isProgram={item.sceneItemEnabled}
+      img={item.img}
       buttonStyle={buttonStyle}
     />
   </li>
   {/each}
 </ol>
+<button class="button" on:click={loadMissingScreenshots}>Load missing thumbnails</button>
 
 <style>
   ol {

src/obs.js

@@ -4,7 +4,8 @@ export const obs = new OBSWebSocket()
 
 export async function sendCommand (command, params) {
   try {
-    command.indexOf('Set') === 0 && console.log(`Sending command: ${command} with params: ${params}`)
+    // if (command.indexOf('Set') === 0)
+    //  console.log('Sending command:', command, 'with params:', params)
     return await obs.call(command, params || {})
   } catch (e) {
     console.log('Error sending command', command, ' - error is:', e.message)