H5 Overlay Sample

H5 clients can connect directly when they run in a local environment that permits WebSocket access to 127.0.0.1.

Typical use cases:

• Local browser source overlays.
• Local control panels.
• Debug pages for developers.

Browser example

<button id="connect">Connect</button>
<pre id="log"></pre>

<script type="module">
  const log = document.querySelector('#log')

  function print(message) {
    log.textContent += `${message}\n`
  }

  async function connectCandidate(port) {
    const socket = new WebSocket(`ws://127.0.0.1:${port}/v1/third-party`)

    return new Promise((resolve) => {
      const timer = setTimeout(() => {
        socket.close()
        resolve(null)
      }, 3000)

      socket.addEventListener(
        'message',
        (event) => {
          clearTimeout(timer)
          const hello = JSON.parse(event.data)
          if (
            hello.type === 'SERVER_HELLO' &&
            hello.product === 'tiktok_live_studio' &&
            hello.channel === 'third-party-im'
          ) {
            resolve(socket)
          } else {
            socket.close()
            resolve(null)
          }
        },
        { once: true }
      )

      socket.addEventListener('error', () => {
        clearTimeout(timer)
        resolve(null)
      })
    })
  }

  async function connect() {
    for (let port = 30000; port <= 30015; port += 1) {
      const socket = await connectCandidate(port)
      if (!socket) continue

      socket.send(JSON.stringify({
        type: 'AUTH',
        app_id: 'your_app_id',
        key_id: 'your_key_id',
        secret: 'your_secret',
        version: '1.0.0'
      }))

      socket.addEventListener('message', (event) => {
        const message = JSON.parse(event.data)
        print(JSON.stringify(message, null, 2))
      })

      print(`connected to ${port}`)
      return
    }

    print('LIVE Studio endpoint not found')
  }

  document.querySelector('#connect').addEventListener('click', connect)
</script>

Security notes

• Avoid shipping production credentials inside public web assets.
• Prefer local packaged clients or controlled development tools for credentialed access.
• Do not expose the local WebSocket connection through a remote proxy.