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。

➡️ 下一步

准备好开始集成了吗？登录后即可获取实际密钥与更多进阶设置。

立即登录