Amazon IVS ライブ ストリームのヘルス メトリクスを取得し、チャートとしてレンダリングする方法

Amazon Interactive Video Service (Amazon IVS) を使用してユーザー生成コンテンツ (UGC) プラットフォームを構築することを計画している場合は、何らかのダッシュボードを統合して、ユーザーのライブ ストリームの状態を監視することをお勧めします。いつものように、ドキュメンテーションはストリームの健全性を監視するための優れた概要を提供します。

この投稿では、もう少し進んで、ストリーム セッションを取得する方法と、Amazon CloudWatch からライブ ストリームのヘルス メトリックを取得する方法の例をいくつか示します。おまけとして、UGC ダッシュボードに追加してリアルタイムの健康状態を監視できる便利なグラフをいくつか生成する方法についても説明します。

Amazon IVS ストリームの正常性メトリクスは、Amazon CloudWatch に保存されます。 AWS SDK for JavaScript v3 でこれらのメトリクスを取得するには、Amazon CloudWatch クライアント ( @aws-sdk/client-cloudwatch ) からGetMetricDataCommandメソッドドキュメントを使用できます。

このメソッドでは、以下に示すように、いくつかのプロパティが特定の期間と Amazon IVS チャネルにメトリクスをフィルター処理することを想定しています。

注:この投稿では、Amazon CloudWatch SDK を使用してストリームの正常性メトリクスを取得することに焦点を当てますが、重要なストリームの正常性メトリクスは Amazon EventBridge を介して観察することもできるため、ストリームが異常になった場合やサービス制限に違反した場合に必要なアクションを実行できます。詳細については、ドキュメントを参照してください。

Amazon IVS ストリーム セッションの取得

正常性メトリクスを取得するにはStartTimeとEndTimeが必要なので、Amazon IVS クライアント ( @aws-sdk/client-ivs ) を介して最近のストリーム セッションのリストを取得することは理にかなっています。これを行うには、 ListStreamSessionsCommand ( docs ) を使用して、関心のあるチャネルのARNを渡します。

 import { IvsClient, ListStreamSessionsCommand } from "@aws-sdk/client-ivs"; const ivsClient = new IvsClient(); const listStreamSessionsInput = { channelArn: process.env.DEMO_CHANNEL_ARN, maxResults: 3, // default=100 }; const listStreamSessionsRequest = new ListStreamSessionsCommand(listStreamSessionsInput); const listStreamSessionsResponse = await ivsClient.send(listStreamSessionsRequest); console.log(listStreamSessionsResponse)

ListStreamSessionsCommandからの応答はオブジェクトを返します。そのオブジェクトのstreamSessionsキーには、最新のセッションでソートされたストリーム セッションの配列が含まれています。アクティブなセッションは、 endTimeがないことで示されます。

 { "$metadata": { "httpStatusCode": 200, "requestId": "[redacted]", "cfId": "[redacted]", "attempts": 1, "totalRetryDelay": 0 }, "nextToken": "AQI...[redacted]...A==", "streamSessions": [ { "endTime": undefined, "hasErrorEvent": false, "startTime": "2023-01-20T14:30:11.000Z", "streamId": "st-[redacted]" }, { "endTime": "2023-01-19T16:12:37.000Z", "hasErrorEvent": false, "startTime": "2023-01-19T16:12:29.000Z", "streamId": "st-[redacted]" }, { "endTime": "2023-01-19T16:12:25.000Z", "hasErrorEvent": false, "startTime": "2023-01-19T16:12:22.000Z", "streamId": "st-[redacted]" } ] }

シングル ストリーム セッションの取得

この時点で、これらのタイムスタンプを使用してストリーム メトリックを取得できます。ただし、オーディオやビデオの取り込み構成など、もう少し詳細を取得すると役立つ場合があります。この情報を取得するには、 GetStreamSessionCommand ( docs ) を使用できます。このメソッドは、 ARNと、上記の結果で既に取得したstreamIdを想定しています。

 import { IvsClient, GetStreamSessionCommand } from "@aws-sdk/client-ivs"; import util from "node:util"; const ivsClient = new IvsClient(); const getStreamSessionInput = { channelArn: process.env.DEMO_CHANNEL_ARN, streamId: 'st-[redacted]' }; const getStreamSessionRequest = new GetStreamSessionCommand(getStreamSessionInput); const getStreamSessionResponse = await ivsClient.send(getStreamSessionRequest); console.log( util.inspect(getStreamSessionResponse, false, null, true) );

GetStreamSessionCommandメソッドは、セッション (この場合はアクティブなライブ ストリーム) に関する情報を返します。 ingestConfigurationには、コーデック、ビットレート、フレームレートなどの便利な項目が含まれていることに注意してくださいtruncatedEventsオブジェクトには、この特定のストリームに対してトリガーされたすべてのイベントが含まれています。

 { "$metadata": { "httpStatusCode": 200, "requestId": "[redacted]", "cfId": "[redacted]", "attempts": 1, "totalRetryDelay": 0 }, "streamSession": { "channel": { "arn": "[redacted]", "authorized": false, "ingestEndpoint": "[redacted]", "latencyMode": "LOW", "name": "demo-channel", "playbackUrl": "[redacted]", "recordingConfigurationArn": "[redacted]", "type": "STANDARD" }, "ingestConfiguration": { "audio": { "channels": 2, "codec": "mp4a.40.2", "sampleRate": 48000, "targetBitrate": 128000 }, "video": { "avcLevel": "3.1", "avcProfile": "Baseline", "codec": "avc1.42C01F", "encoder": "", "targetBitrate": 8500000, "targetFramerate": 30, "videoHeight": 1080, "videoWidth": 1920 } }, "recordingConfiguration": { "arn": "[redacted]", "destinationConfiguration": { "s3": { "bucketName": "[redacted]" } }, "state": "ACTIVE" }, "startTime": "2023-01-20T14:30:11.000Z", "streamId": "st-[redacted]", "truncatedEvents": [ { "eventTime": "2023-01-20T14:30:19.000Z", "name": "Recording Start", "type": "IVS Recording State Change" }, { "eventTime": "2023-01-20T14:30:18.000Z", "name": "Stream Start", "type": "IVS Stream State Change" }, { "eventTime": "2023-01-20T14:30:11.000Z", "name": "Session Created", "type": "IVS Stream State Change" } ] } }

AWS コンソールを介してストリームの健全性メトリクスを表示する

ストリーム ヘルス メトリクス データをアプリケーションに統合することを計画している場合は、AWS SDK のいずれかを使用することになります。ただし、健康指標データを表示する頻度を減らしたいだけの場合は、AWS コンソールから表示できます。 Amazon IVS 関連のヘルス メトリクスを表示するには、 [すべてのメトリクス]を選択し、Amazon CloudWatch コンソールからIVS を選択します。

ディメンションを選択して指標データを参照できます。

たとえば、チャネルごとにメトリックを表示するには、 [チャネル別]を選択し、目的の期間、チャネル、およびメトリックを選択します。

SDK を介してストリームのヘルス メトリックを取得する

Amazon CloudWatch SDK を使用して、ストリームの開始時間と終了時間に基づいてチャネルのヘルス メトリック データを取得する準備が整いました。 GetMetricDataCommand GetMetricDataCommandInputオブジェクト ( docs ) を想定しています。

前述のように、このオブジェクトにはStartTimeおよびEndTimeプロパティと、取得するヘルス メトリックに応じたクエリの配列を含むMetricDataQueriesプロパティがあります。ここで注目する Amazon IVS チャネルの正常性に関連する 4 つのプロパティがあります。 IngestAudioBitrate 、 IngestVideoBitrate 、 IngestFramerate 、およびKeyframeIntervalです。 AWS/IVS Namespaceとして使用し、 /に続くチャネル ARN の部分を取得して特定のチャネルでフィルタリングし、各メトリクスの配列を作成します。

 import { CloudWatchClient, GetMetricDataCommand } from "@aws-sdk/client-cloudwatch"; const cloudWatchClient = new CloudWatchClient();

 const getMetrics = async (arn, startTime, endTime) => { const streamHealthMetrics = [ "IngestAudioBitrate", "IngestVideoBitrate", "IngestFramerate", "KeyframeInterval" ]; const metricDataQueries = streamHealthMetrics.map((metric) => { return { Id: metric.toLowerCase(), MetricStat: { Metric: { MetricName: metric, Namespace: "AWS/IVS", Dimensions: [{ Name: "Channel", Value: arn.split("/")[1] }] }, Period: 5, Stat: "Average", } } }); const getMetricDataInput = { StartTime: startTime, EndTime: endTime, MetricDataQueries: metricDataQueries, MaxDatapoints: 100 }; const getMetricDataRequest = new GetMetricDataCommand(getMetricDataInput); const getMetricDataResponse = await cloudWatchClient.send(getMetricDataRequest); return getMetricDataResponse; }; // get metrics for a session const metrics = await getMetrics( process.env.DEMO_CHANNEL_ARN, new Date('2023-01-20T14:30:11.000Z'), new Date('2023-01-20T14:49:15.000Z') );

GetMetricDataCommandを呼び出した結果は、次の出力のようになります。

 { "$metadata": { "httpStatusCode": 200, "requestId": "[redacted]", "attempts": 1, "totalRetryDelay": 0 }, "MetricDataResults": [ { "Id": "ingestaudiobitrate", "Label": "IngestAudioBitrate", "Timestamps": [ "2023-01-20T14:49:10.000Z" ], "Values": [ 31049.333057821852 ], "StatusCode": "PartialData" }, { "Id": "ingestvideobitrate", "Label": "IngestVideoBitrate", "Timestamps": [ "2023-01-20T14:49:10.000Z" ], "Values": [ 3497988.4859657455 ], "StatusCode": "PartialData" }, { "Id": "ingestframerate", "Label": "IngestFramerate", "Timestamps": [ "2023-01-20T14:49:10.000Z" ], "Values": [ 29.143738984724312 ], "StatusCode": "PartialData" }, { "Id": "keyframeinterval", "Label": "KeyframeInterval", "Timestamps": [ "2023-01-20T14:49:10.000Z" ], "Values": [ 2.007629037 ], "StatusCode": "PartialData" } ], "NextToken": "[redacted]", "Messages": [] }

Amazon CloudWatch メトリクスは時間の経過とともにロールアップされるため、時間の経過とともに詳細な解像度が低下することに注意することが重要です。

• 1 秒のメトリクスは 3 時間利用できます。
• 60 秒のメトリクスは 15 日間利用できます。
• 5 分間のメトリクスは 63 日間利用できます。
• 1 時間のメトリクスは 455 日 (15 か月) 利用できます。

より広い時間範囲で同じクエリを実行する場合 (上記のデータの可用性に応じて)、単一のメトリックに基づいてデータをフィルター処理およびグループ化し、その結果を使用して値の優れたグラフをレンダリングできます。 .

 const videoBitrateMetrics = metrics .MetricDataResults .find((metric) => metric.Id === 'ingestvideobitrate'); const bitrateData = []; videoBitrateMetrics.Timestamps .sort((a, b) => new Date(a) > new Date(b) ? 1 : -1) .forEach((t, i) => { bitrateData.push({ timestamp: t, bitrate: videoBitrateMetrics.Values[i] / 1000, }) }); console.log(JSON.stringify(bitrateData));

これにより、次のようなオブジェクトの配列が生成されます。

 [ { "timestamp": "2023-01-20T14:47:05.000Z", "bitrate": 3497.9884859657454 } ]

このフィルタリングされたデータを使用して、UGC ダッシュボード用の優れた視覚化を作成できます。いくつかの簡単な例:

ビデオのビットレートを取り込む

音声ビットレートの取り込み

取り込みフレームレート:

キーフレーム間隔:

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

もう 1 つの非常に優れたオプションは、Amazon CloudWatch SDK を介して直接グラフを生成することです。詳細については、ドキュメントを確認してください。 Amazon CloudWatch SDK を使用してIngestFramerateメトリクスのグラフを生成する例を次に示します。

 const getMetricImage = async (arn, startDate, endDate) => { const cloudWatchClient = new CloudWatchClient(); const getMetricWidgetImageInput = { MetricWidget: JSON.stringify({ metrics: [ [ "AWS/IVS", "IngestFramerate", "Channel", arn.split("/")[1] ] ], start: startDate, end: endDate, period: 5 }) }; const getMetricWidgetImageRequest = new GetMetricWidgetImageCommand(getMetricWidgetImageInput); const getMetricWidgetImageResponse = await cloudWatchClient.send(getMetricWidgetImageRequest); return getMetricWidgetImageResponse; }; const metricImage = await getMetricImage( process.env.DEMO_CHANNEL_ARN, new Date('2023-01-20T14:30:11.000Z'), new Date('2023-01-20T14:49:15.000Z') );

GetMetricWidgetImageCommandを呼び出すと、次のような JSON オブジェクトが返されます。

 { '$metadata': { httpStatusCode: 200, requestId: '[redacted]', extendedRequestId: undefined, cfId: undefined, attempts: 1, totalRetryDelay: 0 }, MetricWidgetImage: Uint8Array(36660) [ 137, 80, 78, ... 36560 more items ] }

Uint8Array base64 文字列に変換できます。

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

base64 文字列を返します。

 iVBORw0KGgoAAAANSUhEUgAAAlgAAAGQCAIAAAD9V4nPA...

これを使用して画像をレンダリングできます。

追加のメトリクスをGetMetricWidgetImageCommandに渡すことで、複数のメトリクスを 1 つの画像に結合することもできます。

まとめ

この投稿では、Amazon IVS ライブ ストリームのヘルス メトリクスを取得し、それらをグラフとして表示する方法について説明しました。ライブ ストリームの視聴者に関連する Amazon CloudWatch を介して利用できるその他のメトリクスについて詳しく説明する今後の投稿にご期待ください。