WebLiveHub SDK

WebLiveHub SDK Public Integration Guide

This page is a public example. Log in to obtain your real Secret Key and download the complete SDK package.

🚀 Quick 🧱 Enterprise 🔒 Security 📱 Multi‑Platform 🎁 Free Quota

All keys and IDs shown here are placeholders. Replace them with actual values from the Console.

Quick Start

Copy the example and replace wl_id and password with real values.

  1. Log in to the Console and create or get your SDK Secret Key.
  2. Prepare a backend in your project (e.g. backend.php).
  3. Include the SDK embed.js and initialize.
  4. Create an iframe container and load live / VOD content.

💻 Single Iframe Example

Copy the example and replace wl_id and password with real values.

<?php
require_once __DIR__ . '/vendor/autoload.php';
use WebLiveHub\SDK\WLSDK;
WLSDK::setup([
      'hb_endpoint' => getenv('WL_HOSTED_BACKEND_URL') ?: '<HOSTED_BACKEND_ENDPOINT>',
      'user_id' => '<AUTH_USER_ID>',
      'password' => '<AUTH_PASSWORD>'
]);
?><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Single Iframe Embed</title>
  <?= WLSDK::script(); ?>
  <style>.player-frame { width:800px; height:450px; border:1px solid #ddd; border-radius:6px; display:block; }</style>
</head>
<body>
  <?= WLSDK::iframe([
      'hostLabel' => 'live',
      'streamer'  => '<STREAMER_USER_ID>',
      'attrs'     => [
          'id'    => 'stream-container',
          'class' => 'player-frame',
          'style' => 'background:#000;overflow:hidden;'
      ]
  ]); ?>
</body>
</html>

Multiple Iframes Example

Lazy loading multi‑iframe example. Replace wl_id and password.

<?php
require_once __DIR__ . '/vendor/autoload.php';
use WebLiveHub\SDK\WLSDK;
WLSDK::setup([
    'hb_endpoint' => getenv('WL_HOSTED_BACKEND_URL') ?: '<HOSTED_BACKEND_ENDPOINT>',
    'user_id' => '<AUTH_USER_ID>',
    'password' => '<AUTH_PASSWORD>'
]);
?><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Multiple Lazy Iframes</title>
  <?= WLSDK::script(); ?>
  <style>.grid-streams { display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); } .stream-box { border:1px solid #ddd; border-radius:6px; padding:10px; background:#fafafa; } .placeholder { width:100%; aspect-ratio:16/9; background:#000; display:flex; align-items:center; justify-content:center; color:#888; font-size:12px; border-radius:4px; }</style>
</head>
<body>
  <div class="grid-streams">
    <div class="stream-box">
      <strong>Stream #1</strong>
      <div class="placeholder" id="ph-1">Pending Load</div>
      <div style="margin-top:6px;">
        <?= WLSDK::lazyIframe([
            'hostLabel' => 'live',
            'streamer'  => '<STREAMER_USER_ID>',
            'attrs'     => [ 'data-target' => 'ph-1' ]
        ]); ?>
      </div>
    </div>
    <div class="stream-box">
      <strong>Stream #2</strong>
      <div class="placeholder" id="ph-2">Pending Load</div>
      <div style="margin-top:6px;">
        <?= WLSDK::lazyIframe([
            'hostLabel' => 'live',
            'streamer'  => '<STREAMER_USER_ID_2>',
            'attrs'     => [ 'data-target' => 'ph-2' ]
        ]); ?>
      </div>
    </div>
  </div>
</body>
</html>

🔐 Security Tips

  • Never hardcode real Secret Keys in frontend code.
  • Always generate tokens through your backend proxy (backend.php).
  • Add rate limits & logging for frequent token generation.
  • Rotate compromised or unused keys immediately.

➡️ Next Steps

Ready to integrate? Choose your path to get started:

Apply for SDK

Get instant access to developer console and real API keys

View Pricing

Explore plans and pricing for production use