script.js

window.addEventListener('load', () => {

  const obs = new OBSWebSocket()

  const scanQRCode = document.getElementById('scan-qr-code');
  const obsPort = document.getElementById('obs-port');
  const obsPassword = document.getElementById('obs-password');
  const connect = document.getElementById('submit');
  const results = document.getElementById('results');
  const sceneList = document.getElementById('scene-list');
  const currentScene = document.getElementById('current-scene');
  const sceneItems = document.getElementById('scene-items');
  const disableSource = document.getElementById('disable-source');
  const specialInputs = document.getElementById('special-inputs');
  const toggleMic = document.getElementById('toggle-mic');
  const toggleDesktopAudio = document.getElementById('toggle-desktop-audio');
  const changeScene = document.getElementById('change-scene');
  const transform = document.getElementById('transform');
  const screenshot = document.getElementById('screenshot');
  const image = document.getElementById('image');
  const stopScreenshotButton = document.getElementById('stop-screenshot');
  const enableReplayBuffer = document.getElementById('enable-replay-buffer');
  const saveReplayBuffer = document.getElementById('save-replay-buffer');

  scanQRCode.addEventListener('click', readQRCode);
  connect.addEventListener('click', connectToOBS);
  sceneList.addEventListener('click', getSceneList);
  currentScene.addEventListener('click', getCurrentScene);
  sceneItems.addEventListener('click', getSceneItems);
  disableSource.addEventListener('click', setDisableSource);
  specialInputs.addEventListener('click', getSpecialInputs);
  toggleMic.addEventListener('click', setToggleMic);
  toggleDesktopAudio.addEventListener('click', setToggleDesktopAudio);
  changeScene.addEventListener('click', setChangeScene);
  transform.addEventListener('click', transformItem);
  screenshot.addEventListener('click', getScreenshot);
  stopScreenshotButton.addEventListener('click', stopScreenshot);
  enableReplayBuffer.addEventListener('click', setEnableReplayBuffer);
  saveReplayBuffer.addEventListener('click', setSaveReplayBuffer);

  // Checks for OBS WebSocket disconnection.
  obs.on("ConnectionClosed", async (data) => {
    connect.innerText = "Disconnected!";
    connect.style.backgroundColor = "#f28b82";
    results.innerHTML = `Disconnected from OBS WebSocket`;
    console.log(`Disconnected from OBS WebSocket`)

    setTimeout(() => {
      connect.innerText = "Connect";
      connect.style.backgroundColor = "#83b8e7";
      results.innerHTML = "";
    }, 2500);
  });

  // Disable "Save Replay buffer" when replay buffer is disabled:
  obs.on("ReplayBufferStatusChanged", async (data) => {
    const isReplayBufferEnabled = await obs.call('GetReplayBufferStatus');
    if (!isReplayBufferEnabled.outputActive) {
      saveReplayBuffer.disabled = true;
    } else {
      saveReplayBuffer.disabled = false;
    }
  })


  // Check streaming status (When clicking on "Start Streaming" button)
  obs.on("StreamStateChanged", (data) => {
    if (data.outputState == "OBS_WEBSOCKET_OUTPUT_STARTED" && data.outputActive == true) {
      results.innerHTML = "Stream started!";
    }

    if (data.outputState == "OBS_WEBSOCKET_OUTPUT_STOPPED" && data.outputActive == false) {
      results.innerHTML = "Stream stopped!";
    }

    console.log("Stream State:", data);

  })

  // Check recording status (When clicking on "Start Recording" button)
  obs.on("RecordStateChanged", (data) => {
    if (data.outputState == "OBS_WEBSOCKET_OUTPUT_STARTED" && data.outputActive == true) {
      results.innerHTML = "Recording started!";
    }

    if (data.outputState == "OBS_WEBSOCKET_OUTPUT_STOPPED" && data.outputActive == false) {
      results.innerHTML = "Recording stopped!";
    }

    console.log("Record State:", data);
  })


  // Read qr code. Using Html5QrcodeScanner library
  async function readQRCode() {
    let htmlscanner = new Html5QrcodeScanner("my-qr-reader", { fps: 10 /*, qrbox: 250 */ });
    htmlscanner.render(onScanSuccess);

    function onScanSuccess(decodeText, decodeResult) {
      console.log(decodeResult)
      if (!decodeText.startsWith("obsws://")) {
        alert("This is not a valid obs-websocket QRCode");
        console.log(decodeResult)
        return
      }
      console.log(decodeText.split('/')[2].split(':')[1])
      obsPort.value = decodeText.split('/')[2].split(':')[1];
      obsPassword.value = decodeText.split('/')[3];
      connectToOBS();
      console.log(decodeResult)
      htmlscanner.clear();
      document.getElementById("scan-qr-code").addEventListener('click', readQRCode)
    }
  }

  async function connectToOBS() {
    try {

      // If connected and pressed the button again, disconnects from OBS WebSocket
      if (obs.socket) return obs.disconnect();

      // Connect to OBS WebSocket
      const connection = await obs.connect(`ws://localhost:${obsPort.value}`, `${obsPassword.value}`);
      const obsInfo = await obs.call('GetVersion');
      const availableRequests = obsInfo.availableRequests.toString();
      results.innerHTML = `
      Connected to OBS ${obsInfo.obsVersion} on port ${obsPort.value} using WebSocket version ${obsInfo.obsWebSocketVersion}.
      Operational System: ${obsInfo.platformDescription}
      
      Available requests: \n\t${availableRequests.replaceAll(',', '\n\t')}
      `
      connect.style.backgroundColor = "#66d18f";
      connect.innerText = "Connected!";
      console.log("Connected to OBS WebSocket");
      console.log(obsInfo);

      // Check if Replay buffer is enabled:
      const isReplayBufferEnabled = await obs.call('GetReplayBufferStatus');

      // Disable "Save Replay buffer" button is replay buffer is not enabled:
      if (!isReplayBufferEnabled.outputActive) {
        saveReplayBuffer.disabled = true;
      } else {
        saveReplayBuffer.disabled = false;
      }

    } catch (error) {
      results.innerHTML = `Error connecting to OBS: ${error}`;
      console.log(`Error connecting to OBS: ${error}`);
    }

  }

  // Get Scene list and send the output to cl1p.net
  async function getSceneList() {
    const getSceneList = await obs.call('GetSceneList');
    results.innerHTML = JSON.stringify(getSceneList.scenes, null, 2)
    console.log(`Total scenes amount: ${getSceneList.scenes.length}`)
    console.log('List of scenes:', getSceneList.scenes)

    sendToCl1p(getSceneList)
  }

  // Send the output to cl1p, which is like a notepad website, but with an API so you can send text programatically
  // More info: https://cl1p.net/sys/api.jsp
  async function sendToCl1p(data) {
    return;
    const information = JSON.stringify(data, null, 2)

    const cl1pFetch = await fetch('https://api.cl1p.net/clipname', {
      'method': 'POST',
      'mode': 'no-cors',
      'headers': {
        'content-type': 'text/html; charset=UTF-8',
        'cl1papitoken': 'YOUR_CL1P_API_TOKEN'
      },
      'body': information
    })
    console.log(cl1pFetch)
  }

  // Get Current Scene
  async function getCurrentScene() {
    const getCurrentScene = await obs.call('GetCurrentProgramScene');
    results.innerHTML = getCurrentScene.currentProgramSceneName
    console.log('Current scene: ', getCurrentScene.currentProgramSceneName)
  }

  // Sources of a scene. Put the name of the scene into the variable 'chosenScene'. I.e.: 'Game'
  async function getSceneItems() {
    const chosenScene = 'Scene'
    const getSceneItems = await obs.call('GetSceneItemList', { sceneName: chosenScene })
    results.innerHTML = JSON.stringify(getSceneItems.sceneItems, null, 2)
    console.log(getSceneItems.sceneItems)
  }

  // Enable / Disable source. Put the name of the scene into the variable 'chosenScene'. I.e.: 'Just Chatting'
  async function setDisableSource() {
    const chosenScene = 'Scene'
    if (results.innerHTML === 'Item disabled') {
      await obs.call('SetSceneItemEnabled', { sceneName: chosenScene, sceneItemId: 2, sceneItemEnabled: true })
      results.innerHTML = 'Item enabled'
      return
    }
    await obs.call('SetSceneItemEnabled', { sceneName: chosenScene, sceneItemId: 2, sceneItemEnabled: false })
    results.innerHTML = 'Item disabled'
  }

  // Get Inputs like 'Desktop Audio', 'Mic/Aux' or any other item from Audio Mixer dock
  async function getSpecialInputs() {
    const itemName = 'Mic/Aux'
    const getInputSettings = await obs.call('GetInputList', { inputName: itemName })
    results.innerHTML = JSON.stringify(getInputSettings, null, 2)
    console.log(getInputSettings)
    // const getSpecialInputs = await obs.call('GetSpecialInputs')
    // results.innerHTML = JSON.stringify(getSpecialInputs, null, 2)
  }


  // Mute / unmute microphone. Usually the mic is the item called 'Mic/Aux', but you can change it to reflect yours.
  async function setToggleMic() {
    const itemName = 'Mic/Aux'
    const isMuted = await obs.call('GetInputMute', { inputName: itemName })
    if (isMuted.inputMuted) {
      await obs.call('SetInputMute', { inputName: itemName, inputMuted: false })
      results.innerHTML = 'Mic unmuted'
      return
    }
    await obs.call('SetInputMute', { inputName: itemName, inputMuted: true })
    results.innerHTML = 'Mic muted'
  }

  // Mute / Unmute Desktop audio
  async function setToggleDesktopAudio() {
    const itemName = 'Desktop Audio'
    const isMuted = await obs.call('GetInputMute', { inputName: itemName })
    if (isMuted.inputMuted) {
      await obs.call('SetInputMute', { inputName: itemName, inputMuted: false })
      results.innerHTML = 'Audio unmuted'
      return
    }
    await obs.call('ToggleInputMute', { inputName: itemName, inputMuted: true })
    results.innerHTML = 'Audio muted'
  }

  // Change to scene and show the current scene
  async function setChangeScene() {
    const changeToScene = 'Just Chatting'
    await obs.call('SetCurrentProgramScene', { sceneName: changeToScene })
    getCurrentScene()
  }

  // Transform an item (aka 'Sources' in OBS). You can change position, size or any other value related to that.
  // You can use the function getSceneItems() to obtain the ID of the items/sources
  async function transformItem() {
    const nameOfScene = 'Game'
    const sourceId = 10
    const position = await obs.call('GetSceneItemTransform', { sceneName: nameOfScene, sceneItemId: sourceId })
    console.log(position.sceneItemTransform.positionX)
    if (position.sceneItemTransform.positionX > 100) {
      await obs.call('SetSceneItemTransform', { sceneName: nameOfScene, sceneItemId: sourceId, sceneItemTransform: { positionX: 50 } })
      results.innerHTML = JSON.stringify(position, null, 2)
      //position = 50
      return
    }
    await obs.call('SetSceneItemTransform', { sceneName: nameOfScene, sceneItemId: sourceId, sceneItemTransform: { positionX: 1920 - position.sceneItemTransform.sourceWidth - 30 } })
    results.innerHTML = JSON.stringify(position, null, 2)
    console.log(position)
  }

  // Take screenshot. In the example below, it takes a screenshot every 500 milisseconds (0.5 seconds)
  async function getScreenshot() {
    const sceneName = 'Scene';
    results.style.display = 'none';
    screenshotInterval = setInterval(async () => {
      const getScreenshot = await obs.call('GetSourceScreenshot', { sourceName: sceneName, imageFormat: "jpeg", imageWidth: 320, imageHeight: 200, imageCompressionQuality: 80 });
      image.src = getScreenshot.imageData;
      image.style.width = '640px';
      image.style.height = '400px';
      // console.log(image);
    }, 500);
  }

  // Stop taking screenshot. We got the ID of the setInterval function above to clear it on screenshotInterval variable.
  async function stopScreenshot() {
    clearInterval(screenshotInterval);
    console.log(screenshotInterval);
    console.log("screenshot paused");
    image.src = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
    results.style.display = 'block';
    //obs.call('TriggerHotkeyByKeySequence', {
    //  keyId: 'OBS_KEY_Z',
    //  keyModifiers: {
    //    control: true
    //  }
    //})
  }

  // Enable / Disable replay buffer. Disable "Save Replay buffer" button if replay buffer is disabled
  async function setEnableReplayBuffer() {
    const isReplayBufferEnabled = await obs.call('GetReplayBufferStatus');

    if (isReplayBufferEnabled.outputActive) {
      await obs.call('StopReplayBuffer');
      results.innerHTML = 'Replay buffer disabled';
      enableReplayBuffer.innerHTML = 'Enable Replay Buffer';
      enableReplayBuffer.style.backgroundColor = "#f28b82";
      saveReplayBuffer.disabled = true;
      return
    }
    await obs.call('StartReplayBuffer')
    results.innerHTML = 'Replay buffer enabled';
    enableReplayBuffer.innerHTML = 'Disable Replay Buffer';
    enableReplayBuffer.style.backgroundColor = "#66d18f";
    saveReplayBuffer.disabled = false;
  }


  // Sleep function:
  async function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }


  // Save replay buffer
  async function setSaveReplayBuffer() {
    await obs.call('SaveReplayBuffer');
    console.log("Replay buffer saved. Sleeping for some seconds...");
    await sleep(2000);

    const replayBufferFile = await obs.call('GetLastReplayBufferReplay');
    console.log(replayBufferFile);
    results.innerHTML = `Replay buffer saved to: ${replayBufferFile.savedReplayPath}`;
    setTimeout(() => {
      console.log(`Changing Media Source to ${replayBufferFile.savedReplayPath}...`);
      setChangeMediaSource(replayBufferFile.savedReplayPath);
    }, 2500);
  }


  // Change "Media Source" source local file from "Scene" scene to the replay buffer saved file.
  async function setChangeMediaSource(sourceFile) {
    const sceneName = 'Scene';
    const mediaSourceName = 'Media Source';

    const sourceId = await getSourceId(sceneName, mediaSourceName);

    await obs.call('SetInputSettings', { inputName: mediaSourceName, overlay: true, inputSettings: { local_file: sourceFile } });
    // const mediaSource = await obs.call('GetInputSettings', { inputName: mediaSourceName });
    // console.log(mediaSource);

    results.innerHTML = `Media Source changed to: ${sourceFile}`;

    // Change Media Source visibility:
    console.log("Enabling Media Source...");
    await obs.call('SetSceneItemEnabled', { sceneName: sceneName, sceneItemId: sourceId, sceneItemEnabled: true });
  }


  // Disable "Media Source" source from "Scene" scene when media playback ends
  obs.on("MediaInputPlaybackEnded", async (data) => {
    const sceneName = 'Scene';
    const mediaSourceName = 'Media Source';

    const sourceId = await getSourceId(sceneName, mediaSourceName);
    console.log("Source ID:", sourceId);

    if (data.inputName === mediaSourceName) {
      console.log("Disabling Media Source...");
      obs.call('SetSceneItemEnabled', { sceneName: sceneName, sceneItemId: sourceId, sceneItemEnabled: false })
      console.log("Media playback ended");
      results.innerHTML = "Media playback ended";
    }
  });



  // Helper function to get the ID of a scene item (source)
  async function getSourceId(sceneName, sourceName) {
    const { sceneItems } = await obs.call('GetSceneItemList', { sceneName });
    const source = sceneItems.find(item => item.sourceName === sourceName);
    console.log(source);
    return source.sceneItemId
  }



  // Not related to OBS websocket. 
  // Show a loudspeaker image when button 4 from your mouse is pressed (usually the lateral button from gaming mice).
  document.addEventListener('mousedown', (event) => {
    if (event.button === 4) {
      //console.log(`key=${event.key},code=${event.code}`);
      results.style.display = 'none'
      image.src = './loudspeaker.png'
      console.log('Mouse button pressed: ', event.button)
    }
  });

  // Not related to OBS websocket
  // When mouse button 4 is released, hide the loudspeaker image.
  document.addEventListener('mouseup', (event) => {
    if (event.button === 4) {
      //console.log(`key=${event.key},code=${event.code}`);
      image.src = ''
      results.style.display = 'block'
      console.log('Mouse button released: ', event.button)
    }
  });

})