CDNetworks ドキュメントに戻る
Low Latency Streaming
CDNetworks ドキュメントセンター Low Latency Streaming WebRTC Players Web Player

Web Player

最終更新日：2025-09-15 15:48:49

本ガイドは、低遅延WebRTCプレイヤーをWebアプリケーションへ統合するための包括的な手順を提供します。

提供されたデモパッケージを出発点として、demo.htmlファイルの動作を分解し、ご自身のプロジェクトに自信を持って適用できるように説明します。

はじめに：デモパッケージをダウンロードする

デモパッケージには、すぐに利用可能な完全動作のサンプルと、開始に必要なすべてのファイルが含まれています。

ダウンロードしたパッケージには以下が含まれています：

  • demo.html: すべてのHTMLとJavaScriptが1つのファイルにまとまった動作例ページです。
  • wsrtcplayer.min.js: コアとなるソフトウェア開発キット（SDK）です。
  • css/ フォルダ：デモページのスタイリング用に main.css と rtc_main.css が含まれています。

提供されたデモを理解する

それでは、SDKを使ってビデオストリームを再生するしくみを理解するために、demo.html ファイルの内容を分解してみましょう。

ステップ 1：HTML構造について

demo.html ファイルは、ページのビジュアル要素を配置しています。主なポイントは以下の通りです：

  • <video> 要素：ここに動画が表示されます。JavaScriptがターゲットにできるよう、固有のidが付与されています。
  • コントロールボタン：これらのボタンはプレイヤーの開始及び停止に使用します。
  • SDKスクリプトタグ：プレイヤーライブラリをページに読み込み、利用を可能にします。プレイヤーを動作させるために必ず含める必要があります。
  • インラインスクリプトブロック：ファイルの一番下にある<script>ブロックに、プレイヤー制御用の全JavaScriptロジックが記述されています。

ステップ2：JavaScript ロジック（demo.html 内）

「demo.html」の一番下にある <script> タグ内には、プレイヤーを制御するコードがあります。その主要な部分を分析しましょう。

a. onEvent コールバック

まず、onEvent という名前の関数が定義されています。この関数は、再生開始やバッファリング発生時など、プレイヤーからのステータス更新を受け取るために使用されます。

// この関数は、プレイヤーから送信されるすべてのイベントを処理します。
function onEvent(type, data) {
  switch (type) {
    case 3: // プレーヤーからのカスタムイベント
      console.log("カスタマーイベント: " + data);
      break;
    case 2: // サーバーのSDP応答を受信しました
      console.log("SDP応答を受信しました。");
      break;
    case 1: // バッファリングまたはスタリングが発生しました
      console.log("バッファリングが発生しました。");
      break;
    case 0: // バッファリング後、再生が再開されました
      console.log("再生が再開されました。");
      break;
  }
}

b. プレイヤーの初期化と制御

次に、コードは「Play」ボタンのセットアップを行います。playButton をクリックすると、次の手順が実行されます：

  1. 旧Player のクリーンアップ：コードはすでに player オブジェクトが存在するかを確認し、player.destroy() を実行してすべてのリソースを解放します。このステップは、「Play」ボタンを複数回クリックした場合のエラーを防ぐために重要です。
  2. Player オプションの定義：新しい option オブジェクトが作成され、Playerの設定が行われます。
  3. Player インスタンスの作成：window.wsrtcplayer.createWSRTCPlayer(option) が呼び出されます。これはSDKを使用して新しいPlayerインスタンスを作成します。
  4. 再生開始：player.open(signal_url) が呼び出され、ストリームに接続して再生を開始します。

デモのカスタマイズ

提供されたdemo.htmlファイルは、完全かつ機能的なスタートポイントです。ここからお客様の要件に合わせてカスタマイズする主な方法をいくつかご紹介します。

1. カスタマーIDの使用（本番環境では必須）

このデモでは、customerIDがプレースホルダーとして使用されています。本番環境のアプリケーションでは、必ずCDNetworksより提供された固有のAccount Nameに置き換えてください。これは、お客様のサービスにカスタムのサーバーサイド構成を適用するために不可欠です。

const playerOptions = {
    element: videoElement,
    customerID: "YOUR_UNIQUE_ACCOUNT_NAME", // この値を変更してください
    listener: onEvent
};

2. ページ読み込み時の自動再生を有効にする

デフォルトでは、このデモはユーザーが「再生」ボタンをクリックするまで待機します。ページの読み込みと同時に動画が自動的に再生されるようにするためには、スクリプトの修正が必要です。demo.html の最下部にある <script> ブロック全体を、次のコードと置き換えてください。

<script>
    document.addEventListener('DOMContentLoaded', function () {
        
        // この関数はプレーヤーからのステータス更新を処理します。
        function onEvent(type, data) {
            const timestamp = (window.performance.now() / 1000).toFixed(3);
            console.log(timestamp + ": イベント受信 - 種類: " + type);
        }


        const videoElement = document.getElementById('video-player');
        const signalUrl = 'http://webrtc-pull.test.cdnetworks.com/live/stream1.sdp';


        // プレイヤーのオプションを定義します
        const playerOptions = {
            element: videoElement,
            customerID: "YOUR_UNIQUE_ACCOUNT_NAME", // 実際のAccount Nameをご利用ください
            listener: onEvent
        };


        // プレイヤーインスタンスを作成します
        const player = window.wsrtcplayer.createWSRTCPlayer(playerOptions);


        // 直ちにstream playbackを開始する
        if (player) {
            player.open(signalUrl);
        }
    });
</script>

コード内の const signalUrl を、ご自身がすぐにstream playbackを開始したいURLに必ず置き換えてください。

<const signalUrl = 'http://webrtc-pull.test.cdnetworks.com/live/stream1.sdp';>

3. プレーヤーステータスの表示

onEventリスナーを使用して、ユーザーにリアルタイムでフィードバックを提供できます。まず、ステータスメッセージを表示するための<div>をHTMLに追加してください:

<div id="status-display" style="padding: 10px; font-weight: bold;">接続中...</div>

次に、プレイヤーの状態に応じてこの要素のテキストを更新するように onEvent 関数を修正してください：

const statusDisplay = document.getElementById('status-display');


function onEvent(type, data) {
  switch (type) {
    case 0:
      statusDisplay.innerText = 'ステータス：再生中';
      statusDisplay.style.color = 'green';
      break;
    case 1:
      statusDisplay.innerText = 'ステータス：バッファ中...';
      statusDisplay.style.color = 'orange';
      break;
    case 2:
      statusDisplay.innerText = 'ステータス：接続済み';
      break;
  }
}

4. プレイヤーの外観をカスタマイズする（CSS）

このデモでは、ページにシンプルかつ機能的な外観を与えるために、2つのCSSファイルを使用しています：rtc_main.css（汎用ベーススタイル）とmain.css（デモ専用スタイル）です。これらのスタイルは自由に変更でき、最適な結果を得るにはご自身のアプリケーションのブランディングに合わせて、独自のスタイルシートで上書きすることをお勧めします。

推奨方法：ご自身のスタイルシートを作成すること

  1. cssフォルダーにmy-styles.cssという新しいファイルを作成します。
  2. 新しい CSS ファイルにカスタム CSS ルールを追加します。例：
    /* /css/my-styles.css 内 */
#video-player {
  border: 3px solid #007bff;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
  3. 他の2つのCSSファイルの後に、新しいスタイルシートを demo.html にリンクします。一番最後に配置することで、あなたのスタイルがデフォルトを上書きできるようになります。
    <link rel="stylesheet" href="css/rtc_main.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/my-styles.css" />

簡易修正（テスト用）

スタイルをすぐにテストしたい場合は、main.css ファイルの末尾に CSS ルールを追加してください。

API リファレンス

createWSRTCPlayer(options)

プレイヤーインスタンスを作成します。

  • options (オブジェクト)：設定用のオブジェクトです。
    • element (HTMLVideoElement) 【必須】：再生に使用する <video> 要素です。
    • customerID (String) 【オプション】：CDNetworksより提供されたユニークなアカウント名です。サーバー側のカスタム設定をプレイヤーとお客様のアカウントに関連付けます。
    • listener（関数）[任意]：playerイベントを受信するためのコールバック関数。

player.open(signal_url)

ビデオストリームの読み込みと再生を開始します。

player.close()

ビデオのstream playbackを停止し、ストリームの接続を切断します。

player.destroy()

再生を停止し、切断し、プレイヤーインスタンスが使用したすべての内部リソースをクリーンアップします。プレイヤーインスタンスの使用が終わったら、メモリリークを防ぐためにこの関数を呼び出してください。

イベントコールバック（listener）

コールバック関数は2つのパラメータを受け取ります：function(type, data)。

パラメータ 型 説明
type Number イベントタイプを表すコードです。詳細は下記の一覧をご参照ください。
data String イベントごとのデータです。このパラメータは特定のイベントタイプでのみ設定されます。

Event type コード：

  • 0: バッファリング後、再生が再開されました。
  • 1: バッファリングまたはスタリングが発生しました。
  • 2: サーバーからSDPアンサーを受信しました。dataパラメータにはSDP情報の文字列が含まれます。
  • 3: プレイヤーからのカスタムイベントです。dataパラメータにはカスタムイベント文字列が含まれます。

シグナリングURLフォーマット

シグナリングURLは以下の構造です：http(s)://domain/appName/streamName.sdp

  • domain: 追加されたDomain。
  • appName: アプリケーション名または公開ポイントであり、転送や録画などの設定における最小単位です。設定の分離に使われ、異なるライブチャンネルタイプを区別することもできます。
  • streamName: ライブストリームの名称で、各放送を区別するために使用されます。

ブラウザー互換性

オペレーティングシステム ブラウザータイプ 最低バージョン
Mac OS デスクトップ版Safari 11以上
Mac OS デスクトップ版Chrome 47以上
Windows デスクトップ版Chrome 56以上
Android モバイル版Chrome 88以上
iOS Mobile Safari 11以上
iOS WeChat アプリ内ブラウザー 12以上

注: Chromium エンジンを基盤としたブラウザは、対応する Chrome バージョンの要件に従う必要があります。Android ブラウザでのサポート状況は異なる場合があり、一部の端末では H.264 のハードウェアデコードがサポートされていないことがあります。

CDNetworks Inc., © 2025. 1840 Enterprise Way, Monrovia, CA 91016 – All rights reserved.