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

ApsaraVideo Liveを使用すると、ApsaraVideo Player SDKを複数のプラットフォームに統合でき、さまざまなデバイスに適応するストリーム取り込み方法を提供します。 ApsaraVideo Player SDKを任意のストリーム取り込み方法で使用して、さまざまなビジネスシナリオの要件を満たすことができます。このトピックでは、webページでライブストリーミングする方法について説明します。

前提条件

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

ステップ1: 取り込みURLとストリーミングURLを生成する

取り込みURLはライブストリームを取り込むために使用され、ストリーミングURLは再生用のライブストリームをプルするために使用されます。取り込みURLとストリーミングURLの生成方法については、「ライブ URL ジェネレーター」をご参照ください。

地址生成器

ステップ2: ライブストリームを取り込む

ライブストリームインジェストは、収集したオーディオストリームとビデオストリームをApsaraVideo Liveのライブセンターに配信するプロセスです。次の手順では、OBS Studioを使用してストリームを取り込む方法の例を示します。

説明

標準ストリーミングでは、web用のストリーム取り込みSDKは提供されません。 OBS StudioまたはPush SDKを使用してストリームを取り込むことができます。さまざまなストリーム取り込みツールを使用してストリームを取り込む方法については、「ライブストリーム取り込み」をご参照ください。

OBS Studioをダウンロードしてインストールします。ダウンロードリンク: OBS Studio。
OBS Studioを実行します。
メニューバーで、ファイル > 設定を選択します。

[設定] ページで、ストリームをクリックして次のパラメータを設定します。

001

パラメーター	説明
サービス	[カスタム...] を選択します。
サーバー	署名されている生成された取り込みURLを入力します。例: `rtmp:// demo.aliyundoc.com/app/stream?auth_key=1543302081-0-0-9c6e7c8190c10bdfb3c0************`
ストリームキー	このパラメータは空のままにします。

OBS Studioのホームページにアクセスしてください。 [ソース] セクションを見つけてソースを追加し、[ストリーミングの開始] をクリックします。
(オプション) Queen SDKプラグインをOBSにインストールして、レタッチ効果をデバッグします。詳細については、「OBS 用 Queen SDK プラグインのユーザーガイド」をご参照ください。
ApsaraVideo Liveコンソールで、[ストリーム管理] ページに移動します。 [アクティブストリーム] タブでは、取り込んだオーディオストリームまたはビデオストリームを表示および管理できます。

ステップ3: ライブストリームを再生する

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

次の手順では、ApsaraVideo Player SDK for Webを統合して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" />  // Optional. If you want to use the HTML5 player for playback, add the .css file to your project. 
  <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>  // Required. Import the .js file. 
</head>

プレーヤーのコンテナを指定します。
```
<body>
  <div id="J_prismPlayer"></div>
</body>
```
プレイヤーをインスタンス化します。
URLからコンテンツをストリーミングするには、ソースパラメーターをストリーミングURLに設定し、isLiveパラメーターをtrueに設定する必要があります。 Alibaba CloudストリーミングURLの取得方法については、「手順1: 取り込みURLとストリーミングURLの生成」をご参照ください。
URLからのストリーミングのサンプルコード:
```
<script>
  var player = new Aliplayer({
    id: 'J_prismPlayer',
    source: '<your play URL>'// The streaming URL that is generated in ApsaraVideo Live. 
    isLive: true,// Specify whether to play the live stream. 
    },function(player){
      console.log('The player is created.')
    });
</script>
```

デモのオンライントライアルとソースコード

PCのデモを試す

ApsaraVideo Player SDK for Webは、視覚化されたオンライントライアルを提供します。 [オンライン設定] ページでオンライントライアルを申請できます。基本的な再生機能を設定し、UIレイアウトをオンラインで設定できます。

説明

HTML5プレーヤーを使用してライブストリームを再生する場合、ストリーミングURLはApsaraVideo Real-time Communication (ARTC) 、Flash Video (FLV) 、またはHTTP live streaming (HLS) 形式にすることができます。リアルタイムメッセージングプロトコル (RTMP) 形式のストリーミングURLはサポートされていません。

モバイルデバイスのデモを試す

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

重要

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

二维码

デモの特徴関連ソースコード

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

Vueとの統合のためのデモのソースコード

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

デモの詳細については、

WeChatミニプログラム

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

ApsaraVideo Live:webページでのライブストリーム