ウェブページでのライブストリーム - ApsaraVideo Live - Alibaba Cloud ドキュメントセンター

ApsaraVideo Live は、複数のプラットフォーム SDK と、さまざまなデバイスに対応したアダプティブなアップストリーミング方式をサポートしています。任意のプレーヤー SDK と任意のアップストリーミング方式を組み合わせて、ビジネスシナリオに適合させることができます。

前提条件

ApsaraVideo Live が有効化されました。詳細については、「ApsaraVideo Live の使用を開始する」をご参照ください。
ライブストリーミングで使用する取り込みドメインとストリーミングドメインが設定されています。詳細については、「ステップ 1: 取り込みドメインとストリーミングドメインを追加する」、「ステップ 2: CNAME レコードを追加して高速化を有効にする」、および「ステップ 3: 取り込みドメインとストリーミングドメインを関連付ける」をご参照ください。

ステップ 1: アップストリーミング URL とストリーミング URL の生成

プッシュ URL を使用してライブストリームをプッシュし、ストリーミング URL を使用してストリームをプルして再生します。詳細については、「プッシュ URL とストリーミング URL を生成する」をご参照ください。

[URL ジェネレーター] ページで、[ストリーミングドメイン]、関連付けられた [アップストリーミングドメイン] (認証はデフォルトでモード A、URL の有効期限は 30 分)、[AppName]、[StreamName]、および [トランスコーディングテンプレート] を設定します。[生成] をクリックして、アップストリーミング URL とストリーミング URL を作成します。

ステップ 2: ライブストリームのアップストリーミング

アップストリーミングでは、キャプチャした音声と映像を ApsaraVideo Live センターに配信します。次の例では、OBS Studio を使用してアップストリーミングします：

説明

標準ストリーミングでは、Web 用のストリームインジェスト SDK は提供されていません。代わりに OBS Studio または Push SDK をご利用ください。ストリームインジェストツールの詳細については、「ライブストリームインジェスト」をご参照ください。

OBS Studio をダウンロードしてインストールします。ダウンロードリンク： OBS Studio。
OBS Studio を実行します。
メニューバーで、[File] > [Settings] を選択します。

[Settings] ページで、[Stream] をクリックし、次のパラメーターを設定します。

001

パラメーター	説明
サービス	[Custom] を選択します。
サーバー	生成された認証付きのアップストリーミング URL を入力します。例： `rtmp://demo.aliyundoc.com/app/stream?auth_key=1543302081-0-0-9c6e7c8190c10bdfb3c0************`。
ストリームキー	ストリームキーは空のままにします。

OBS のメインウィンドウの [Sources] エリアでソースを追加し、[ストリーミング開始] をクリックします。
ストリーム管理に移動します。[アクティブなストリーム] タブで、アップストリーミングされたストリームを表示および管理できます。

ステップ 3: ライブストリームの再生

ApsaraVideo Player SDK for Web を使用してライブストリームを再生できます。詳細については、「Web プレーヤー」をご参照ください。

ApsaraVideo Player SDK for Web を統合してウェブページでライブストリームを再生するには、次の手順を実行します：

指定された .js ファイルをプロジェクトに追加します：

ApsaraVideo Player SDK for Web は、フロントエンド .js ライブラリに依存しません。プレーヤーを初期化するには、次の .js ファイルをプロジェクトに追加します：

<head>
  <link rel="stylesheet" href="  https://g.alicdn.com/apsara-media-box/imp-web-player/2.28.3/skins/default/aliplayer-min.css" />  // オプション。HTML5 プレーヤーを使用して再生する場合は、.css ファイルをプロジェクトに追加します。
  <script charset="utf-8" type="text/javascript" src="  https://g.alicdn.com/apsara-media-box/imp-web-player/2.28.3/aliplayer-min.js"></script>  // 必須。.js ファイルをインポートします。
</head>

プレーヤー用のコンテナを指定します：
```
<body>
  <div id="J_prismPlayer"></div>
</body>
```
プレーヤーをインスタンス化します。
URL からコンテンツをストリーミングするには、source パラメーターをストリーミング URL に設定し、isLive パラメーターを true に設定します。詳細については、「手順 1: 取り込み URL とストリーミング URL を生成する」をご参照ください。
URL からのストリーミングのサンプルコード：
```
<script>
  var player = new Aliplayer({
    id: 'J_prismPlayer',
    source: '<your play URL>',// ApsaraVideo Live で生成されたストリーミング URL。
    isLive: true,// ライブストリームを再生するかどうかを指定します。
    },function(player){
      console.log('プレーヤーが作成されました。')
    });
</script>
```

デモのオンライン試用とソースコード

PC 用デモの試用

ApsaraVideo Player SDK for Web は、視覚的なオンライン試用を提供しています。オンライン設定ページにアクセスして、基本的な再生機能を設定し、UI レイアウトをカスタマイズできます。

説明

HTML5 プレーヤーをライブストリーミングに使用する場合、ストリーミング URL は ARTC、FLV、または HLS 形式である必要があります。RTMP 形式はサポートされていません。

オンライン設定ページには、[基本設定]、[詳細設定]、[スキンのカスタマイズ]、[再生プレビュー]、[コード] の 5 つのタブがあります。基本設定フォームでは、[ビデオタイプ] (VOD またはライブ)、[再生方式] (URL)、[再生 URL]、[カバー] URL、[幅] (デフォルト: 100%)、[高さ] (デフォルト: 500 px) を設定でき、[自動再生]、[インライン再生]、[プリロード]、[ループ] などのオプションのトグルスイッチを使用できます。

モバイルデバイス用デモの試用

モバイルブラウザ用のデモを入手するには、モバイルデバイスで DingTalk アプリを使用して、次の QR コードをスキャンします。

重要

Android デバイスでは、WeChat と QQ の内部ブラウザが、お客様の承認または認識なしに ApsaraVideo Player SDK の設定を変更する場合があります。この場合、ApsaraVideo Player SDK の特定の機能は使用できません。

二维码

各機能のデモソースコード

Aliplayer Web サイトの「機能」ページで、ApsaraVideo Player SDK for Web の機能を使用し、対応するソースコードを表示できます。基本機能、コンポーネント、高度な機能の詳細については、機能ページをご覧ください。功能展示

Vue 統合デモのソースコード

ApsaraVideo Player SDK for Web は、SDK を Vue フレームワークと統合するためのデモソースコードを提供しています。

デモの詳細については、「Vue ベースの ApsaraVideo Player のデモ」をご参照ください。

WeChat ミニプログラム

WeChat ミニプログラムには、DOM API と BOM API がありません。この場合、jQuery や Zepto など、フロントエンド開発で一般的に使用される特定のライブラリは、WeChat ミニプログラムにロードできません。同様に、ブラウザのサポートに依存する ApsaraVideo Player SDK for Web は、WeChat ミニプログラムでは実行できません。したがって、WeChat ミニプログラムでビデオを再生するには、WeChat ミニプログラムによって提供されるデフォルトのビデオコンポーネントを使用する必要があります。詳細については、vod-mini-program をご覧ください。

参考資料

ApsaraVideo Player SDK for Web を使用する場合、一般的な機能の設定は、プレーヤー、再生方法、またはブラウザ環境によって異なる場合があります。詳細については、「基本機能」をご参照ください。
ApsaraVideo Player SDK for Web は、再生コントロールや長尺動画の再生などの高度な機能も提供しています。詳細については、「高度な機能」をご参照ください。
ApsaraVideo Player SDK for Web の API リファレンスについては、「Aliplayer API リファレンス」をご参照ください。
ApsaraVideo Player SDK for Web の FAQ については、「Web 用 Player SDK の FAQ」をご参照ください。