New RelicでStreaming Video & Adsという動画品質を観測するための機能が追加されています。ストリーミングサービスなど、アプリの中に動画を組み込んでいる場合、動画品質まで分析できなければ、ユーザー体験を正確に把握することは難しくなります。
New Relicではこのようなサービスでも、End to Endでパフォーマンスとユーザー体験を知ることができるのです。まさにFull Stack Observabilityです。
Streaming Video & Adsでどのようなデータが見れるのかについては、以下のブログで紹介されているので見てみてください。
今回はこのStreaming Video & Adsでデータを確認するための導入をやってみようと思います。
動画を再生することができるサンプルアプリを用意し、ここにNew Relicのトラッカーを導入します。
サンプルアプリの構成
この検証で利用するサンプルアプリケーションは、以下のようなシンプルな構成のものを用意しました。ユーザー登録して、ログインすると動画が視聴できます。動画はHLSとMP4のものをサンプルとして用意しています。どちらかを選択してプレイヤーの再生ボタンを押すと動画を見ることができます。
主要な役割分担
-
バックエンド (
Node.js/Express.js):
APIサーバーとして、ユーザー認証や動画ファイルへのアクセスを提供
静的ファイル（HTML, JavaScriptなど）を配信する役割も担う -
フロントエンド (
HTML/JavaScript):
ユーザーインターフェースを構築し、バックエンドから取得した動画データを表示
Video.jsプレイヤーを使用し、動画の再生や品質を調整
では早速、このアプリケーションにNew Relicを導入し、ストリーミングのパフォーマンスやユーザー体験を可視化してみましょう！
New Relic 基本導入手順
1. Browserエージェントの導入
Streaming Video & Adsの監視を始めるには、まずNew Relic BrowserエージェントをWebアプリに導入する必要があります。もしまだ導入していない場合は、公式ドキュメントの手順に基づいてインストールしましょう。
2. Streaming Video & Adsの導入
-
Streaming Video & Adsの導入はNew RelicのUIからGuidedインストールで実行するのがいいでしょう。環境を選択していくと、それに応じた手順を表示してくれます。
New RelicでStreaming Video & Adsをクリックします。ここからAdd streaming entityをクリックします。
- 動画ストリーミングを組み込んでいるプラットフォームを選択します。今回はサンプルのWebアプリを準備しているので、
Browserを選択します。
- 次に使っているプレイヤーを選択します。今試そうとしている環境では
Video.jsを使っています。
- インストール方法を聞かれます。今回は
JavaScript snippetを使うことにします。
- エンティティの名前をつけます。
- 次の画面では、まず最新のJavaScriptスニペットをダウンロードするコマンドが出力されます。このコマンドで
newrelic-video-videojs.latest.min.jsを入手します。curl -L -o newrelic-video-videojs.latest.min.js https://download.newrelic.com/media-agents/browser/videojs/newrelic-video-videojs.latest.min.js
7. ダウンロードしたJavaScriptをアプリケーションに組み込みます。Browser agentを読み込んだ後で、プレイヤーが初期化される前にStreaming videoのJavaScriptスニペットを読み込めるように配置しましょう。今回の検証では<script>タグで適切な場所に配置し、JavaScriptを読み込めるようにしました。
<script src="newrelic-video-videojs.latest.min.js"></script>
8. Get Your Application Infoをクリックするとサンプルコードが表示されます。プレイヤーが初期化された後にこのコードを挿入してTrackerを初期化し、プレイヤーでのイベントの監視を開始します。
const options = {
info: {
"beacon": "bam.nr-data.net",
"applicationID": "アプリIDが自動で生成される",
"licenseKey": "ライセンスキーが自動で生成される"
}
};
// Initialize your player with new relic Tracker to send data
const tracker = new VideojsTracker(YOUR_PLAYER_INSTANCE, options);
9. See your dataをクリックして完了です。
データを確認してみよう！
1. Streaming Video & AdsのSummaryを確認
アプリを起動して動画を再生してみます。1分待つとデータがSummaryに表示されます。
バッファリングレートやビットレートなどの動画品質における重要指標が確認できました。
2. User sessionを確認
User sessionからは１つ１つのセッションを確認できます。私が再生したセッションがちゃんと記録されていました。
ドリルダウンするとセッションごとの情報もあります。
まとめ
New RelicのStreaming Video & Ads機能は、動画品質の健全性を監視し、ユーザー体験を向上させるための強力なツールです。皆さんのサービスに動画を組み込んでいる場合は、是非それも観測してみましょう。End to EndでObservabilityを実装し、ブラインドスポットを最小化することでより良いサービスを提供できるはずです！
その他
New Relicでは、新しい機能やその活用方法について、QiitaやXで発信しています！
無料でアカウント作成も可能なのでぜひお試しください！
New Relic株式会社のQiita Organizationでは、
新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。
無料のアカウントで試してみよう！
New Relic フリープランで始めるオブザーバビリティ！
