Skip to content

Web Item ‐ Item UUID Listener

Jump to bottom
perditavojo edited this page Jun 29, 2024 · 1 revision

⚠️ This is currently an unreleased/unannounced feature. ⚠️


Web Items are just websites running in a browser, so they themselves could be VTS plugins and interact with VTube Studio directly. To interact with the VTS API (or at least with the item-related endpoints), the Web Item will need to know its own item instance UUID used to identify it inside of VTS.

For more general information about Web Items, check this page.

To get that ID, you can use the following javascript. You have to send the message vts_web_item_request_item_id to VTube Studio like this:

window.vuplex.postMessage('vts_web_item_request_item_id');

VTube Studio will then pass you the item UUID. You can use that ID to do stuff like move the item around, pin/unpin it, delete it (thus also closing the API connection since the browser process is shutting down) and more.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>VTS Web Item ID Listener Example</title>
   </head>

   <body>

      <h1>VTS Web Item ID Listener Example</h1>
      <p id="messageDisplay">Waiting for message...</p>
      <p id="itemID">Waiting for item ID...</p>

      <script>
         if (window.vuplex)
         {
             addMessageListener();
         }
         else
         {
             window.addEventListener('vuplexready', addMessageListener);
         }
         
         function addMessageListener()
         {
             window.vuplex.addEventListener('message', function(event)
             {
                 let json = event.data;
                 let jsonParsed = JSON.parse(json);
         
                 // {"apiName": "VTubeStudioWebItemAPI", "messageType": "ItemID", "value": "129b5746777b4d5390ba8b36f4b4a515"}
                 document.getElementById('messageDisplay').textContent = 'Received JSON: ' + json;
                 document.getElementById('itemID').textContent = 'Item ID: ' + jsonParsed.value;
             });

             window.vuplex.postMessage('vts_web_item_request_item_id');
         }
      </script>
   </body>
</html>

如果本使用手冊沒有回答到您的問題，請在 VTube Studio Discord 伺服器中詢問！

VTS 使用手冊

幫助

指南


Clone this wiki locally