前回の投稿では、Amazon CloudWatch SDK を介して について説明しました。ヘルス モニタリングは、ライブ ストリーミング アプリケーションのパフォーマンスを維持するために不可欠な非常に重要なトピックです。もう 1 つの重要な要素は、視聴者分析です。この投稿では、ストリームの視聴者に洞察を提供するいくつかの方法を見ていきます。 Amazon Interactive Video Service (Amazon IVS) ライブ ストリームの健全性メトリクスを監視する方法 この投稿の大部分は、前回の投稿と似ています。これは、ビューア データも CloudWatch に保存され、SDK を介して取得できるためです。以下で説明するように、ライブ ストリームの現在の視聴者数を取得する方法がもう 1 つあります。これは、フロント エンドに表示できる数を取得する便利な方法です。 この記事はライブ ストリーム チャネルの視聴者に焦点を当てていますが、 やメッセージ など、Amazon IVS チャット ルームに関するメトリクスを取得することもできます。この投稿では取り上げませんが、詳細については を参照してください。 注: ConcurrentChatConnections Delivered ドキュメント CloudWatch コンソールを介して同時ビューを取得する 生データを取得せずにビューアー データを一目見たいだけの場合は、CloudWatch コンソールを介して を表示できます。まず、 を選択し、次に を選択します。 ConcurrentViews All metrics IVS 次に、 を選択します。 [チャンネル別] 次に、任意の Amazon IVS チャネルの を含む行のチェックボックスを選択します。 ConcurrentViews ストリーム セッションの同時ビューを見つける別の方法は、Amazon IVS コンソールを使用することです。チャンネルを選択し、チャンネルの詳細ページから を選択します。 ストリーム ID ストリーム セッションの詳細には複数のチャートが含まれ、そのうちの 1 つにセッションの 含まれます。 同時ビューが CloudWatch SDK を介して同時ビューを取得する このデータを独自のアプリケーションに統合するには、CloudWatch SDK を介してデータを取得できます。ヘルスメトリクスと同様に、 取得するには、チャネルの 、 、および が必要です。 ConcurrentViews ARN StartTime EndTime 開始時刻と終了時刻をランダムに選択する代わりに、ライブ ストリーム セッションから開始時刻と終了時刻を選択して、これらの時刻を動的に取得することはおそらく理にかなっています。 Amazon IVS SDK を介してストリーム セッションのリストを取得できます ( で見たように)。 以前の投稿 現在ライブのストリームであっても、常に が必要です。ライブ ストリームの場合、SDK を使用してメトリックを取得するときに、現在の時刻を としていつでも使用できます。 注意: EndTime 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 ライブ ストリームのビュー データを取得する方法を学びました。詳細については、 をご覧ください。 ドキュメント クラウン
