WordPress プラグイン · ブロック優先 · サーバー側トークン

WordPress プラグイン連携ガイド

WebLiveHub Stream を使用して WordPress サイトをホステッドバックエンドに接続し、WebLiveHub の配信コンテンツを埋め込みます。

はじめる PHP SDK 連携ガイド

WordPress 連携

WebLiveHub Stream で配信を埋め込む（ブロック優先）

v1.1.0

WebLiveHub Stream は、WordPress サイトを WebLiveHub のホステッドバックエンドに接続し、WebLiveHub の配信コンテンツを埋め込むプラグインです。

互換性

  • 必要な WordPress 最低バージョン： 6.0
  • 検証済み WordPress バージョン： 6.9
  • 必要な PHP バージョン： 8.0

仕組み

  1. WordPress サイトがホステッドバックエンドに接続します。
  2. プラグインが埋め込みトークンをサーバー側で生成します（投稿や固定ページに認証情報を含めません）。
  3. ページに WebLiveHub プレーヤーが表示されます。

開始前の準備

管理できる WordPress サイトと、配信者用に準備した WebLiveHub 接続が必要です。

  • Console → Hosted Backends で、使用するバックエンドのサービス URL をコピーします。そのバックエンドの Allowed Origins に、WordPress サイトのオリジンが含まれている必要があります。
  • Console → Users で、接続に使うアカウントの User ID（接続用 User ID）と、配信者の公開 User ID を確認します。2つは用途が異なります。Quick Setup には接続用 User ID とそのパスワードを入力し、ページ作成時には配信者の公開 User ID を入力します。接続用パスワードは WordPress 管理者パスワードや Google のログインパスワードとは異なります。
  • 配信者用ページでは、接続に使うアカウントと同じアカウントの公開 User ID を使います。接続パスワードは WordPress の設定に直接入力してください。ページ本文やサポートへのメッセージには記載しないでください。
  • カメラとマイクを使用できるブラウザーを使い、ブラウザーと OS の両方でこれらのデバイスの使用を許可します。

アカウント、バックエンド、または配信者の公開 User ID の準備ができていない場合は、サイト URL と利用目的を添えてお問い合わせページからご連絡ください。パスワードやトークンは送信しないでください。

配信者用ページを作成する

  1. v1.1.0 Release から Source code (zip) をダウンロードします。WordPress で Plugins → Add New Plugin → Upload Plugin の順に開き、ZIP をインストールして WebLiveHub Stream を有効化します。
  2. Settings → WebLiveHub Stream を開きます。Quick Setup で Hosted Backend サービス URL、接続用 User ID、対応するパスワードを保存します。保存によって設定が記録されたことは確認できますが、接続確認ではありません。配信を開始して、下記の手順で確認してください。
  3. ページ作成欄で配信者向けの用途を選び、配信者の公開 User ID を入力して、ページの下書きを作成します。複数の接続がある場合は、バックエンドと接続アカウントを明示的に選択してください。
  4. 下書きに入力済みのブロックを確認します。ページをプレビューし、問題がなければ公開します。下書きを作成しただけではページは公開されません。
  5. 配信者用ページを開き、ブラウザーと OS の両方でカメラとマイクを許可してから、ページの開始操作を使って実際のイベントを開始します。
  6. 読み込みオーバーレイが非表示になるか解除され、かつ配信タイマーが開始したことを確認します。イベント終了時は画面上の操作で配信を終了してください。

次回、実際に配信する際はこの配信者用ページを再利用し、開始の確認項目をもう一度確認してください。

ページを再利用する

正常に使えた配信者用ページは、次回以降のイベント用に残しておきます。配信者やレイアウトを変更するときは、ページ内の既存の WebLiveHub Stream ブロックを編集できます。

ブロックの手動追加、複数接続、ショートコード、カスタム CSS は、上級者向けの設定として引き続き利用できます。Quick Setup と下書き作成の手順では、これらを使う必要はありません。

デバイスの使用が拒否された場合や読み込みが続く場合は、ブラウザーと OS のカメラ／マイク権限を確認してください。サポートに連絡する際は、どの手順まで進んだか、プラグインとブラウザーのバージョン、パスワードとトークンを除いた画面上のエラーをお知らせください。

Host Label 早見表

Host Label の用途
Host Label使用する場面
connectテスト／PoC／一般的な既定値
live配信者モード（アップストリーム + 操作）
live-client視聴者モード（視聴）
高度な利用／旧方式：ショートコード

位置付け：ショートコードは、従来のワークフロー向けの任意の代替手段として使用してください。

基本

[weblivehub_stream streamer="STREAMER_USER_ID"]

高度な設定

[weblivehub_stream streamer="STREAMER_USER_ID" host_label="live" width="100%" height="600px"]
[weblivehub_stream streamer="STREAMER_USER_ID" host_label="live" style="width: 100%; height: 600px; display: block;"]

セキュリティ上の注意：ホステッドバックエンドの認証情報は、設定 → WebLiveHub Stream にのみ保存してください。投稿や固定ページに認証情報を貼り付けないでください。

WordPressで実際のライブ配信を予定していますか？用途と設定について、お問い合わせください。サイトURLと初回利用予定日を記載してください。未定の場合は「未定」と記載してください。パスワードやトークンは送らないでください。