WebLiveHub SDK

WebLiveHub SDK 公開整合教學

此頁為公開示範。登入後可在控制台取得你的實際 Secret Key 並下載完整 SDK 套件。

🚀 快速 🧱 企業級 🔒 安全 📱 多平台 🎁 免費額度

本頁所有密鑰與識別僅為佔位符，請替換為控制台中生成的實際值。

快速開始

複製範例並替換 wl_id、password 即可使用。

  1. 登入控制台，建立或取得你的 SDK Secret Key。
  2. 在你的網頁專案中準備一個後端（例如 backend.php）。
  3. 引用 SDK embed.js 並初始化。
  4. 建立 iframe 容器並載入串流或點播內容。

💻 單個 iframe 嵌入範例

複製範例並替換 wl_id、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>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>

多個 iframe 嵌入範例

多個 iframe 的 lazy 載入範例，替換 wl_id、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>

🔐 安全建議

  • 不要在前端硬編碼真正的 Secret Key。
  • 所有 token 生成請透過你的後端代理（backend.php）完成。
  • 對頻繁取得 token 的流程加入速率限制與日誌。
  • 如有洩漏風險，請立即重新生成新的 Secret Key。

➡️ 下一步

準備好開始串接了嗎？登入後即可取得實際密鑰與更多進階設定。

立即登入