WebLiveHub SDK

WebLiveHub SDK 公開統合ガイド

このページは公開デモです。ログイン後、実際の Secret Key を取得し完全な SDK パッケージをダウンロードできます。

🚀 高速 🧱 エンタープライズ 🔒 セキュア 📱 マルチプラットフォーム 🎁 無料枠

このページ内のキーや識別子はダミーです。コンソールで生成した実値に置き換えてください。

クイックスタート

サンプルをコピーし wl_id と password を差し替えて利用できます。

  1. コンソールにログインし SDK Secret Key を取得。
  2. プロジェクトにバックエンド (backend.php 等) を用意。
  3. SDK の embed.js を読み込み初期化。
  4. iframe コンテナを用意してライブ / VOD をロード。

💻 単一 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 の遅延読み込み例

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 をフロントにハードコードしない。
  • トークン生成は必ずバックエンド (backend.php) 経由で。
  • 頻繁なトークン取得処理にはレート制限とログを追加。
  • 漏洩の恐れがある場合は速やかに新しい Secret Key を再生成。

➡️ 次のステップ

統合を始める準備はできましたか？ログインして実キーと詳細設定を取得しましょう。

ログイン