https://d226lax1qjow5r.cloudfront.net/blog/blogposts/getting-started-with-advanced-insights/Blog_Advanced-Insights_1200x600.png

アドバンスド・インサイトの開始

最終更新日 April 26, 2021

所要時間:1 分

GraphQLとAdvanced Insightsでセッションレベルのビデオデータへのアクセスを始める

ビデオアプリケーションのパフォーマンスについて、もっと詳しく知りたいとお考えではないでしょうか。ビデオアプリケーションの使用状況を追跡して、ユーザーがセッションごとに何分費やしているかを確認したいかもしれません。あるいは、品質情報を分析して、顧客の動画体験をよりよく理解したいと考えているかもしれません。Advanced Insights のことは聞いたことがあるが、何から始めたらよいかわからないとお考えですか?それなら、ここから始めましょう!

アドバンスド・インサイトはまだですか? お問い合わせくださいお問い合わせください!

Advanced Insights と GraphQL を使用して、ビデオセッション情報のクエリをすばやく開始する方法を紹介します。チュートリアルでは、Inspector Tool を例に、Inspector のような独自のカスタムダッシュボードを作成するために必要なデータを取得する方法を説明します。

このガイドでは、主にパブリッシャのビットレートデータを取得して、Video API 診断ツール Inspector の Quality Metrics または Publisher Details コンポーネントと同様の、特定のセッションの品質チャートを作成することに焦点を当てます。

Image showig the bitrate comparison

このチュートリアルの最後には、カスタムダッシュボードでパブリッシャービットレートチャートを作成するために必要なすべてのデータを取得するためのAdvanced Insightsクエリの作成方法がわかります。

Image showing custom dashboard of sample publisher metrics

最後まで読み飛ばしたいですか?このチュートリアルのすべてのソースコードは GitHub

前提条件

このチュートリアルでは、Video API のユーザであり、使用状況データを持つアカウントを持っていることを前提としています。まだアカウントをお持ちでない場合、または Video API を使用した構築を開始していない場合は、以下のチュートリアルに従ってください。 簡単なチュートリアルをご覧ください!

はじめに

Advanced Insightsは、Vonage Video APIデータにアクセスするためのクエリを作成するためのGraphQLに依存しています。GraphQLに慣れていなくてもご心配なく!Advanced Insights の GraphQL クエリをテストするための便利な開発環境もご用意しています。 インサイトGraphiQLエクスプローラー(GraphiQLの "i "に注目)。インサイトダッシュボードから直接アクセスできます。

An image showing the Insights Dashboard

GraphQL

Advanced InsightsでVideoデータにアクセスする前に、まずはGraphQLの仕組みについて少し理解する必要があります。

一般的に、GraphQLクエリを作成すると、GraphQLスキーマに対して検証され、JSONのようなレスポンスを受け取ります。私たちの場合は、Advanced Insightsスキーマに対して検証されます。

An image example of GraphQL query on number insights

スキーマとは、APIでクエリできるデータを記述したgraphQLオブジェクトタイプのセットです。インサイトのスキーマに関するドキュメントは インサイトGraphiQLエクスプローラー.

GraphQLオブジェクトは、型とその型に関連するフィールドによって定義される。

An image showing the definition of GraphQL objects

例えば、次のようなGraphQLスキーマを使って、あるヒーローの名前を知りたいとしよう(『GraphQL入門』より)。 GraphQL入門).

type Query {
	  me: User
    }
type User {
      id: ID
      name: String
    }

この仮定のクエリ:

{
      me {
        name
      }
    }

は次のようなJSONを生成する:

{
      “me”: {
        “name”: “Luke Skywalker”
      }
    }

高度なインサイトとGraphQL

それでは、Advanced Insights と GraphQL を使って Video データにアクセスしてみましょう。最初のクエリの目的は、セッション ID のリストを取得することです。

まず、プロジェクトIDを指定しよう。これはプロジェクトのAPIキーになる。

{
      project(projectId: Your API Key Here) {
        ...
      }
    }

セッションIDを探すので、次のようにする必要がある。 sessionData.

{
      project(projectId: Your API Key Here) {
    	sessionData{
          ...
    	}
      }
    }

のオプションを確認したい場合は、Insights GraphiQLエクスプローラー内の信頼できるスキーマエクスプローラーを使用します。 sessionDataInsightsのGraphiQLエクスプローラで信頼できるスキーマエクスプローラを使用できます。を検索すると sessionDataを検索すると、以下の結果が得られます:

An image showing the results of searching for session data

このことから sessionDataの中に sessionSummariesで示されるように、少なくとも start引数を必要とするフィールドを指定しなければならない。 !型の最後に start型の末尾に

クエリーで開始日を指定してみましょう。

注:Advanced Insightsのデータ保持期間は21日間です。保存期間より古い日付が指定された場合、エラーが表示されます。エラーの一覧は こちら.

{
      project(projectId: Your API Key Here){
        sessionData{
          sessionSummaries(start: Your timestamp here){  
            ...
          }
        }
      }
    }

セッションIDのリストが欲しいので、以下のリソースで指定したい。 sessionSummaries.スキーマから利用可能なリソースを表示するには sessionDataに移動し(単に sessionDataを検索してください)。 SessionSummaries!(を選択し(タイプは黄色)、"Fields "の下にある [SessionSummary]!タイプを選択します。

An image showing the session summary

SessionSummaryはリストを返すことを意味します。

{
      project(projectId: Your API Key Here){
        sessionData{
          sessionSummaries(start: Your timestamp here){
            resources{
              sessionId
            }
          }
        }
      }
    }

これでクエリが完成しました。これをInsights GraphiQL Explorerにコピー&ペーストしてください(アカウントにログインしていることを確認してください)。APIキーの projectIDフィールドにAPIキーを入力し、開始時間を指定してください!

このクエリーを実行すると、次のような結果が返ってくるはずだ。

{
	  "data": {
		"project": {
		  "sessionData": {
			"sessionSummaries": {
			  "resources": [
				{
				  "sessionId": "Your Session ID Here"
				},
				{
				  "sessionId": "Your Session ID Here"
				}
			  ]
			}
		  }
		}
	  }
    }

結果に示されているように、セッションIDのリストをJSON形式で取得する必要があります。

クエリの追加(オプション)

スキーマを見ると mediaModeの下にある別のフィールドであることがわかる。 SessionSummary.これをクエリーに追加する:

{
      project(projectId: Your API Key Here){
        sessionData{
          sessionSummaries(start: Your timestamp here){
            resources{
              sessionId,
              mediaMode
            }
          }
        }
      }
    }

リターンズ

{
	  "data": {
		"project": {
		  "sessionData": {
			"sessionSummaries": {
			  "resources": [
				{
				  "sessionId": "Your Session ID Here",
				  “mediaMode”: “routed”
				},
				{
				  "sessionId": "Your Session ID Here",
				  “mediaMode”: “routed”
				}
			  ]
			}
		  }
		}
	  }
    }

クエリにもう1つフィールドを追加するだけで、セッションがルーティングされたのか、リレーされたのかを知ることができた。 ルーティングされたのか、リレーされたのかを知ることができます。

アドバンスド・インサイトで質の高い指標を得る

GraphQLクエリーの作成

簡単な GraphQL クエリを作成し、Video プロジェクト データにアクセスする方法がわかったところで、Video ビットレート情報にアクセスするためのクエリを作成しましょう。

まず、パブリッシャービットレートチャートを作成するために必要なデータを把握する必要があります。まず、Inspectorツールでチャートを見てみましょう。

An image showing the quality metrics

Inspectorでこのチャートにアクセスするには、まず、関心のあるセッションのIDを入力しなければなりません。つまり セッションIDをクエリに含める必要があります。また パブリッシャービットレートも探しているので、おそらくそれも指定したいでしょう。品質は個々のストリームごとに分けられているので(インスペクタチャートの各線の色は異なるストリームを表しています)、ビットレートを ストリーム.最後に、しかし最も重要なことは、何らかの形で ビットレートデータ.アドバンスド・インサイトでは、ビットレート情報は ストリーム統計.

どのフィールドが必要なのか、大まかな見当がつきました。これで、GraphQLクエリを作り始めましょう!

すぐに、プロジェクトID(別名APIキー)を指定する必要がある。ここでも sessionDataセッションレベルのデータを照会するためです。興味のあるセッションがわかっているので sessionsフィールドを使うことができます。スキーマから、このフィールドはセッション ID の配列を必要とすることがわかります。私たちは単一のセッションにしか興味がないので、単一のセッションIDを入力するだけです(複数のセッションIDを入力した場合、クエリは入力されたすべてのセッションの指定されたデータを返します)。

クエリーは次のようになるはずだ:

{
      project(projectId: Your API Key Here){
        sessionData{
          sessions(sessionIds: ["Your Session ID Here"]){
            ...
          }
        }
      }
    }

Advanced Insights では、ストリームは会議ごとにグループ化されています。つまり、ストリームデータにアクセスするには、クエリでミーティングを指定する必要があります。スキーマの sessionsで利用可能なリソースを見ると(黄色の Sessionをクリックする必要があります)、使用可能なフィールドとして meetingsを利用可能なフィールドとして見ることができます。のリソースをさらに掘り下げると meetingsのリソースを掘り下げてみると publishersはmeetingの下にあるフィールドです。完璧だ!私たちはパブリッシャーのデータを探しています。 publishersもクエリに含めてみましょう。

{
      project(projectId: Your API Key Here){
        sessionData{
          sessions(sessionIds: ["Your Session ID Here"]){
            resources{
              meetings{
	            resources{
                  publishers{
                    ...
                  }
                }
              }
            }
          }
        }
      }
    }

ストリームレベルの情報を得ようとしていることは分かっているので、フィールドを探索しよう。 publishersフィールドを調べてみよう。スキーマから(ここにパターンがあるか? publishersというフィールドがある。 streamStatsCollection.聞き覚えがあるだろうか?そうです!ビデオのビットレートデータはStream Statisticsの下に保存されています!というフィールドがあります。 PublisherStreamStatsCollectionのリソースを調べると、Video ストリームにアクセスできるさまざまな品質関連フィールドが見つかります。このガイドでは、動画のビットレートにしか興味がないので、フィールド videoBitrateKbpsフィールドを追加しましょう。ビットレート・チャートを作成するには、ビットレートの読み取りに関連付けられた時間も必要です。そこで createdAtフィールドを追加しましょう。

クエリーは次のようになるはずだ:

{
      project(projectId: Your API Key Here){
        sessionData{
          sessions(sessionIds: ["Your Session ID Here"]){
            resources{
              meetings{
    			resources{
                  publishers{
                    resources{
                      streamStatsCollection{
                        resources{
                          videoBitrateKbps,
                          createdAt
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

このクエリーだけで、ストリームごとのパブリッシャービデオのビットレートを得ることができる。より明確にするために、ストリームの品質に名前を付けたいと思うだろう。そのために、利用可能なリソースに戻り streamStatsCollectionに戻り streamIDを追加します。

{
      project(projectId: Your API Key Here){
        sessionData{
          sessions(sessionIds: ["Your Session ID Here"]){
            resources{
              meetings{
    			resources{
                  publishers{
                    resources{
                      stream{
	                    streamId
                      }
                      streamStatsCollection{
                        resources{
                          videoBitrateKbps,
                          createdAt
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

Insights GraphiQL Explorerでこのクエリを実行すると、次のような結果が返されます:

{
      "data": {
        "project": {
    	  "sessionData": {
    	    "sessions": {
    	      "resources": [{
    		    "meetings": {
    		      "resources": [{
    			    "publishers": {
    			      "resources": [{
    				    "stream": {
    					  "streamId": "e70fef65-f107-428b-9c03-02351812654f"
    					  },
    					  "streamStatsCollection": {
    					    "resources": [{
    						  "videoBitrateKbps": 6.61,
    						  "createdAt": "2020-03-22T12:24:05.407Z"
    						},{
    					      "videoBitrateKbps": 7.95,
    					      "createdAt": "2020-03-22T12:24:13.194Z"
    				        },{
    					      "videoBitrateKbps": 8.17,
    					      "createdAt": "2020-03-22T12:24:14.438Z"
    					    },{
    						  "videoBitrateKbps": 7.6,
    					      "createdAt": "2020-03-22T12:24:28.729Z"
    				        }]
    			          }
                        }]
    			      }
    			   }]
    		     }
    		  }]
    		}
          }
        }
      }
    }

上記の結果は単純化したものである。フィールドのリストがもっと長い複数のストリームが表示されるかもしれない。 videoBitrateKbpsフィールドが表示されるかもしれない。

これで、パブリッシャー・ビットレート・チャート・コンポーネントを再作成するために必要なすべてのデータを提供する完全なクエリができました!これで、このGraphQLクエリーを使用して、Inspectorのようなインタラクティブなダッシュボードを作成する準備が整いました!

An image showing the interactive dashboard of publisher bitrate

まずは サンプルアプリケーションでセッションIDを検索し、そのセッションのパブリッシャービットレート情報を示すチャートを取得することができます。この例では、ApolloとReactを使ってダッシュボードを作りました。(追記 ブログ記事を参照してください。

ボーナスクエリ

Advanced Insightsクエリの作成方法と、必要なフィールドを取得するためのスキーマエクスプローラの使用方法をご理解いただけたところで、Advanced Insightsを最大限に活用するためのその他の便利なクエリをいくつかご紹介します。

パブリッシャーとサブスクライバーの合計分の取得

{
      project(projectId: Your API Key Here){
        sessionData{
          sessions(sessionIds: ["Your Session ID Here"]){
            resources{
              meetings{
                resources{
    		      publisherMinutes,
                  subscriberMinutes
                }
              }
            }
          }
        }
      }
    }

加入者ビデオパケット損失と遅延の取得

{
      project(projectId: Your API Key Here){
        sessionData{
          sessions(sessionIds: ["Your Session ID Here"]){
            resources{
              meetings{
                resources{
                  subscribers{
                    resources{
                      streamStatsCollection{
                        resources{
                          videoPacketLoss,
                          videoLatencyMs
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

これで、独自のカスタムクエリを作成し、貴社の顧客が貴社の Video アプリケーションをどのように体験しているか、さらに詳しく知る準備が整いました!他の ダッシュボードアプリケーションのサンプルInsights のプロジェクトレベルのデータと Advanced Insights のセッションレベルのデータを 1 つのダッシュボードに統合し、動画アプリケーションのデータを視覚化します。Insights と Advanced Insights の開発者向けドキュメントは以下をご覧ください。 こちら.

シェア:

https://a.storyblok.com/f/270183/400x400/760bf82fcd/zining-wang.png
Zining Wangヴォネージの卒業生

ジーニングはVonageの元プロダクト・マネージャーで、開発者向けツールに注力していた。