Amazon IVS を使用して Live Stream Viewer 分析をモニタリングする方法

前回の投稿では、Amazon CloudWatch SDK を介してAmazon Interactive Video Service (Amazon IVS) ライブ ストリームの健全性メトリクスを監視する方法について説明しました。ヘルス モニタリングは、ライブ ストリーミング アプリケーションのパフォーマンスを維持するために不可欠な非常に重要なトピックです。もう 1 つの重要な要素は、視聴者分析です。この投稿では、ストリームの視聴者に洞察を提供するいくつかの方法を見ていきます。

この投稿の大部分は、前回の投稿と似ています。これは、ビューア データも CloudWatch に保存され、SDK を介して取得できるためです。以下で説明するように、ライブ ストリームの現在の視聴者数を取得する方法がもう 1 つあります。これは、フロント エンドに表示できる数を取得する便利な方法です。

注:この記事はライブ ストリーム チャネルの視聴者に焦点を当てていますが、 ConcurrentChatConnectionsやメッセージDeliveredなど、Amazon IVS チャット ルームに関するメトリクスを取得することもできます。この投稿では取り上げませんが、詳細についてはドキュメントを参照してください。

CloudWatch コンソールを介して同時ビューを取得する

生データを取得せずにビューアー データを一目見たいだけの場合は、CloudWatch コンソールを介してConcurrentViewsを表示できます。まず、 All metricsを選択し、次にIVSを選択します。

次に、 [チャンネル別]を選択します。

次に、任意の Amazon IVS チャネルのConcurrentViewsを含む行のチェックボックスを選択します。

ストリーム セッションの同時ビューを見つける別の方法は、Amazon IVS コンソールを使用することです。チャンネルを選択し、チャンネルの詳細ページからストリーム IDを選択します。

ストリーム セッションの詳細には複数のチャートが含まれ、そのうちの 1 つにセッションの同時ビューが含まれます。

CloudWatch SDK を介して同時ビューを取得する

このデータを独自のアプリケーションに統合するには、CloudWatch SDK を介してデータを取得できます。ヘルスメトリクスと同様に、 ConcurrentViews取得するには、チャネルのARN 、 StartTime 、およびEndTimeが必要です。

開始時刻と終了時刻をランダムに選択する代わりに、ライブ ストリーム セッションから開始時刻と終了時刻を選択して、これらの時刻を動的に取得することはおそらく理にかなっています。 Amazon IVS SDK を介してストリーム セッションのリストを取得できます (以前の投稿で見たように)。

注意:現在ライブのストリームであっても、常にEndTimeが必要です。ライブ ストリームの場合、SDK を使用してメトリックを取得するときに、現在の時刻をEndTimeとしていつでも使用できます。

AWS SDK for JavaScript (v3) を介してこのデータを取得するには、 @aws-sdk/client-cloudwatchパッケージをインストールし、クライアントのインスタンス ( new CloudWatchClient() ) を作成する必要があります。クライアント インスタンスが作成されたら、必要な入力用にいくつかの変数を設定します。

 const startTime = new Date('2023-02-10T14:00:00.000Z'); const endTime = new Date('2023-02-10T14:30:00.000Z'); const arn = process.env.DEMO_CHANNEL_ARN;

次に、入力オブジェクトを作成します。入力オブジェクトには、 StartTime 、 EndTime 、およびMetricDataQueriesの配列が含まれます。クエリ配列には、 MetricName ( ConcurrentViews )、 Namespace ( AWS/IVS )、およびフィルター処理するDimensions (この場合はチャネル名) を指定する単一のオブジェクトが含まれます。

 const getMetricDataInput = { StartTime: startTime, EndTime: endTime, MetricDataQueries: [{ Id: "concurrentviews", MetricStat: { Metric: { MetricName: "ConcurrentViews", Namespace: "AWS/IVS", Dimensions: [{ Name: "Channel", Value: arn.split("/")[1] }] }, Period: 5, Stat: "Average", } }], MaxDatapoints: 100 };

ここでリクエストを送信し、結果をログに記録します。

 const getMetricDataRequest = new GetMetricDataCommand(getMetricDataInput); let metrics = await cloudWatchClient.send(getMetricDataRequest); console.log(metrics);

次のような出力が生成されます (簡潔にするために不要な SDK メタデータは削除されています)。

 { "MetricDataResults": [ { "Id": "concurrentviews", "Label": "ConcurrentViews", "Timestamps": [ "2023-02-10T14:29:00.000Z", "2023-02-10T14:28:00.000Z", "2023-02-10T14:27:00.000Z", "2023-02-10T14:26:00.000Z", "2023-02-10T14:22:00.000Z" ], "Values": [ 3, 3, 3, 3, 10 ], "StatusCode": "PartialData" } ] }

このデータをフィルター処理、並べ替え、および出力して、グラフの生成に役立つ形式を作成できます。

 const viewMetrics = metrics .MetricDataResults .find((metric) => metric.Id === 'concurrentviews'); const viewValues = viewMetrics.Values.reverse(); const viewData = []; viewMetrics .Timestamps .reverse() .forEach((t, i) => { viewData.push({ timestamp: t, concurrentviews: viewValues[i], }) }); console.log(JSON.stringify(viewData));

オブジェクトの配列を生成します。

 [ { "timestamp": "2023-02-10T14:22:00.000Z", "concurrentviews": "10.00" }, { "timestamp": "2023-02-10T14:26:00.000Z", "concurrentviews": "3.00" }, ... ]

このデータは、お気に入りのチャート ライブラリ (または、私が行ったような一般的なオンライン チャート ジェネレーター) で使用できます。

CloudWatch SDK を使用してチャート画像を生成する

前回の投稿では、CloudWatch SDK を介して画像を直接生成する方法について説明しました。このアプローチは、ビュー メトリックにも適用されます。

 const startTime = new Date('2023-02-10T14:00:00.000Z'); const endTime = new Date('2023-02-10T14:25:00.000Z'); const arn = process.env.DEMO_CHANNEL_ARN; const cloudWatchClient = new CloudWatchClient(); const getMetricWidgetImageInput = { MetricWidget: JSON.stringify({ metrics: [ [ "AWS/IVS", "ConcurrentViews", "Channel", arn.split("/")[1] ] ], start: startTime, end: endTime, period: 5, stat: "Average" }) }; const getMetricWidgetImageRequest = new GetMetricWidgetImageCommand(getMetricWidgetImageInput); const metricImage = await cloudWatchClient.send(getMetricWidgetImageRequest);

これは、チャート画像を含む配列バッファー ( Uint8Array ) を含むキーMetricWidgetImageを持つオブジェクトを返します。

 { "MetricWidgetImage": { "0": 137, "1": 80, "2": 78, ... } }

この配列バッファーを base64 文字列に変換するには:

 const buffer = Buffer.from(metricImage.MetricWidgetImage); console.log(buffer.toString('base64'));

これにより、次のことがわかります。

 iVBORw0KGgoAAAANSUhEUgAAAlgAAAGQCAIAAAD9V4nPAAAACXBIWXMA...

これは、次のような画像に変換できます。

チャンネルの現在のライブ ビュー セッションを取得する

前述のように、AWS SDK の Amazon IVS クライアント モジュールを介して、チャネル上のアクティブなライブ ストリームの現在のビュー セッションの数を簡単に取得できます。これには、 GetStreamメソッドを使用します。

 import { GetStreamCommand, IvsClient } from "@aws-sdk/client-ivs"; const client = new IvsClient(); const getStreamCommandInput = { channelArn: process.env.DEMO_CHANNEL_ARN, }; const getStreamRequest = new GetStreamCommand(getStreamCommandInput); const getStreamResponse = await client.send(getStreamRequest); console.log(getStreamResponse);

次のような出力が生成されます。

 { "stream": { "channelArn": "arn:aws:ivs:us-east-1:[redacted]:channel/[redacted]", "health": "HEALTHY", "playbackUrl": "https://[redacted].us-east-1.playback.live-video.net/api/video/v1/us-east-1.[redacted].channel.x4aGUUxIp5Vw.m3u8", "startTime": "2023-02-10T15:46:36.000Z", "state": "LIVE", "streamId": "st-[redacted]", "viewerCount": 5 } }

現在のライブ ストリームのビュー セッションのライブ カウントであるプロパティviewerCountに注意してください。

まとめ

この投稿では、CloudWatch および Amazon IVS SDK を介して Amazon IVS ライブ ストリームのビュー データを取得する方法を学びました。詳細については、ドキュメントをご覧ください。

クラウン