Web Player

このガイドは、WebアプリケーションでWebRTC Player SDKを効果的に統合し利用するための詳細な手順を開発者に提供します。設定、構成、および使用手順を概説し、さまざまなプラットフォームで安定したビデオ再生を確保します。

SDKのダウンロード

WebRTC H5 Player SDKとデモ

SDKの使用方法

1. ビデオタグの作成

HTMLに<video>タグを作成し、自動再生とコントロール機能を追加して、モダンブラウザでのHTML5ビデオ再生をサポートします。

<video id="videotest" class="centeredVideo" controls autoplay width="1024" height="576">
    ご使用のブラウザはHTML5ビデオをサポートしていません。
</video>

2. JavaScriptファイルのインポート

HTMLドキュメントにSDKのJavaScriptファイルを含め、その機能を利用します。

<script src="wsrtcplayer.min.js"></script>

3. イベントコールバック関数の設定

再生イベントを効果的に管理するために、強力なイベントコールバック関数を定義します。これらの関数は、再生中断、データ受信、ネットワーク応答などの重要な状況を処理するのに役立ちます。

/***** カスタムコールバック関数
@argument arguments[0]: イベントタイプ:
0 - バッファから再生を再開
1 - バッファリングイベントが発生
2 - サーバーがセッション記述プロトコル（SDP）データで応答
@argument arguments[1]: サーバーからのSDP文字列、イベントタイプ2の場合のみ関連
*****/
function onEvent() {
    // ここに強力なイベント処理ロジックを追加します
}
window.wsrtcplayer.callback = onEvent;

4. プレーヤーの初期化

指定された構成オプションでプレーヤーインスタンスを初期化します。

var option = {
    element: document.getElementById('videotest'),
    customerID: "XXXX",
    listener: onEvent
};
var player = window.wsrtcplayer.createWSRTCPlayer(option);

5. 再生の開始

シグナリングURLを使用してストリームの再生を開始します。

// @param signal_url: 再生ストリームのシグナリングURL
player.open(signal_url);

WebRTCでは、シグナリングは通信セッションの設定、管理、および終了に使用されるプロセスです。シグナリングURLは、以下の形式で構成します：

signal_url: http(s)://domain/appName/streamName.sdp

• domain: ストリーミングサービスをホストするドメイン名。
• appName: アプリケーション名。さまざまなタイプのライブストリームを区別するために使用され、これはトランスコーディング、スクリーンショット、録画設定の基本単位でもあります。
• streamName: ライブストリーム名。異なるストリームを識別するために使用されます。

6. 再生の停止

再生を停止するには、close関数を呼び出します。

player.close();

例

具体的な例については、SDK内のdemo.htmlを参照してください。

WebRTC互換性

以下はWebRTC互換性の概要です：

注意: Chromeエンジンを使用するブラウザは、対応するChromeのバージョンを参照してください。Androidデバイスのブラウザ互換性は機種によって異なり、一部のモデルはH264デコードをサポートしていない場合があります。