Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie ストリーミング視聴解析の基礎セミナー(続き)
Ähnlich wie ストリーミング視聴解析の基礎セミナー(続き) (20)
Mehr von Masaaki Nabeshima
Mehr von Masaaki Nabeshima (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (8)
ストリーミング視聴解析の基礎セミナー(続き)
- 2. 第1部：ビデオプレイヤーの内部イベント • 再生開始、再生中、終了等 第2部：プレイヤーから解析系へのビーコン送信 • ビーコン型解析 • イベントのフック • 汎用IoTプロトコル：MQTT(双方向通信) • ブローカー：Azure IoT Hub 第3部:汎用解析系での解析/Azure • データ表示：Device Explorer、Time Series Insight • リアルタイム解析：SAQL • ビジネスインテリジェンス：Power BI 前回おさらい：前回アウトライン 2 Copyright (c) kosho.org
- 3. • HTML 5 Video 前回おさらい：ビデオプレイヤーの内部イベント 分類 イベント 概要 分類 イベント 概要 再生状況 play 再生開始(キック) 準備状況 emptied メディアバッファが空 waiting 再生可能を待つ resize 画面サイズ取得済 playing 再生開始(実効) durationchange コンテンツ長取得済 timeupdate 再生位置変更(再生中) loadedmetadata メタ情報取得済 seeking シーク中 loadstart 読み込みを開始 seeked シーク終了 progress メディアダウンロード中 pause 停止 suspend メディアダウンロードがアイドル ended 再生終了 loadeddata 再生可能(次のフレーム) ratechange 再生速度(倍速再生等)変更 canplay 再生可能(先送り可能) volumechange 音量変更 canplaythrough 再生可能(バッファリングなし連続) エラー abort ダウンロード失敗(取得中止) stalled ダウンロードできない(取得継続) error エラー発生 3 Copyright (c) kosho.org
- 4. • Video.js拡張 Copyright (c) kosho.org 4 前回おさらい：ビデオプレイヤーの内部イベント 分類 イベント 概要 分類 イベント 概要 再生状況 ready プレイヤー準備が完了 準備状況 beforepluginsetup プラグイン設定の直前 dispose プレイヤー削除が完了 pluginsetup プラグイン設定が完了 firstplay 1回目の再生 usingcustomcontrols, usingnativecontrols カスタムもしくはネイティブコ ントロールが使用された playerresize プレイヤーのリサイズ完了 controlsdisabled, controlsenabled コントロールが有効化・無効 化された componentresize コンポーネントのリサイズ完了 tap コンポーネント追加が完了 enterFullWindow, exitFullWindow フルスクリーンに入る・出る posterchange ポスター画像が変化 fullscreenchange フルスクリーンが変化 textdata テキスト取得 useractive, userinactive ユーザアクティブが変化 texttrackchange テキストが変化
- 5. • ブラウザ・ビデオプレイヤーの状況把握について追加 • ダウンロード速度、使用プロトコル • W3C Web Performance Timing API • Resource Timing API • 再生品質 • Media Source Extensions (MSE) • VideoPlaybackQuality • CDNキャッシュヒット • HTTPヘッダ情報(x-cache) Copyright (c) kosho.org 5 今回の目的
- 6. • W3C Web Performance Timing API • ブラウザのパフォーマンス計測用API • W3C Web Performance Working Groupが策定 • APIs Copyright (c) kosho.org 6 ダウンロード速度計測 API 概要 User Timing API ブラウザ表示に関する時間取得 Resource Timing API リソースのロードに関する時間取得 Frame Timing API フレーム表示に関する時間取得 Server Timing API サーバが送信するヒント情報の取得 High Resolution Time API マイクロ秒単位のタイムスタンプ
- 7. • 使い方 • timingList = window.performance.getEntriesByType("resource"); • 取得可能な情報 Copyright (c) kosho.org 7 Resource Timing API 値 概要 例 name URL https://example.jp/a.png entryType タイプ resouece(固定) duration ダウンロード時間 (responseEnd-startTime) 5345.0000000011641 transferTime ダウンロード量(HTTPヘッダ含む) 93315 encodedBodySize コンテンツ長(エンコード後) 92990 decodedBodySize コンテンツ長(本体) 92990 nextHopPrototol プロトコル http/1.1, h2, http/2+quic/39 initiatorType 取得タイプ(HTMLタグ名) link, img, script, css, iframe, xmlhttprequest <link ...>, <img …>, <script>, <css …>, <iframe …> その他：xmlhttprequest
- 8. • 取得可能な情報(タイミング値) Copyright (c) kosho.org 8 Resource Timing API 値 概要 例 startTime ダウンロード処理開始 613.7000000016997 redirectStar httpリダイレクト開始 0 redirectEnd httpリダイレクト処理終了 0 fetchStart 実処理開始 613.7000000016997 domainLookupStart DNSルックアップ開始 796.4000000065425 domainLookupEnd DNSルックアップ終了 913.7000000046100 connectStart TCP接続開始 913.7000000046100 secureConnectionStart SSL開始 916.4000000018859 connectEnd TCP接続完了 943.7000000034459 requestStart クエスト送信 945.2000000019325 responseStart レスポンス受信開始 957.8000000037719 responseEnd レスポンス受信完了 5958.7000000028638 単位：マイクロ秒 リダイレクトが発生 しない場合は0
- 9. • 注意点1:配列 • timingList=window.performance.getEntriesByType(“resource”) • ダウンロードしたすべてのファイルに対するタイミング情報が配列として得られる • timingList[0] • name: https://example.com/jquery.js • startTime: 133 … • timingList[1] • name: https://example.net/icon.png • startTime: 135 … • timingList[2] • name: https://example.jp/hello00.ts • startTime: 936 … • … Copyright (c) kosho.org 9 Resource Timing API jsやpngファイルも含む全外部ファイル
- 10. サンプル(F12開発者ツール、Console) Copyright (c) kosho.org 10 Resource Timing API 結果は配列 手入力
- 11. • 注意点2：クロスドメイン • 集計サイトが別にある場合(クロスドメイン) • デフォルトで取得可能な情報：startTime、responseEnd • 上記以外は0が返る • 詳細情報の取得 • Timing-Allow-Origin:* Copyright (c) kosho.org 11 Resource Timing API HTML5 Video Player 視聴解析サイト video.html 視聴ページ ブラウザ メディアサーバ
- 12. • Media Source Extensions (MSE) • ブラウザ用HTTPベース・メディアストリーミングのソースハンドリングAPI • 実装的な意味合い • HLSやDASH実装は、メディアチャンクを、MSE経由でブラウザに渡す • ブラウザは受け取ったメディアチャンクを再生処理 • アダプティブストリーミング等の高度な処理はdash.js等で実装する Copyright (c) kosho.org 12 Media Source Extensions (MSE) hls.js dash.js ブラウザ内部 MSE API メディア サーバ 00.ts 01.ts 02.ts
- 13. • インターフェイス • サンプルプレイヤー • https://tech.jstream.jp/analytics/mse/mse-sample.html Copyright (c) kosho.org 13 Media Source Extensions インターフェイス 概要 MediaSource 再生ソース SouceBuffer チャンクバッファ SouceBufferList チャンクバッファのリスト VideoPlaybackQuality 再生品質 TrackDefault トラック情報 TrackDefaultList トラック情報のリスト
- 14. • 取得可能な情報 • 使い方 • var video = document.getElementById('myVideo’); • videoPlaybackQuality = video.getVideoPlaybackQuality(); • 注意点:実装状況 • Chrome：サポートせず • Firefox: totalFrameDelayサポートせずCopyright (c) kosho.org 14 VideoPlaybackQuality 値 概要 creationTime 経過時間 totalVideoFrames 総フレーム数 droppedVideoFrames ドロップしたフレーム数 corruptedVideoFrames 壊れたフレームの数 totalFrameDelay フレーム表示の遅れ
- 15. • 例 https://tech.jstream.jp/analytics/mse/mse-sample.html • timeUpdate(約250ms単位)のタイミングでconsole.log表示 • チャンク長：1秒 • 30FPS Copyright (c) kosho.org 15 VideoPlaybackQuality creationTime, totalVideoFrames, droppedVideoFrames, corruptedVideoFrames, totalFrameDelay timeUpdate値 チャンク番号 30FPS ((148-119)/1)
- 16. • キャッシュヒット情報が格納されているHTTPヘッダ • x-cache • J-Stream CDNext、Cloudfront、EdgeCast、Fastly • 例 • x-cache: hit • cf-cache-status • CloudFlare • 注意点：クロスドメイン • Access-Control-Expose-Headers: X-Cache Copyright (c) kosho.org 16 CDNキャッシュヒット HTML5 Video Player ブラウザ メディアサーバ
- 17. • 内部イベント • 再生状況、準備状況、エラー • ダウンロード速度、使用プロトコル • W3C Web Performance Timing API • Resource Timing API：ダウンロードの詳細なタイミング、使用したプロトコル • 再生品質 • Media Source Extensions (MSE) • VideoPlaybackQuality：ドロップ、破損、遅れ • Timing-Allow-Origin:* • CDNキャッシュヒット • HTTPヘッダ情報(x-cache) • Access-Control-Expose-Headers Copyright (c) kosho.org 17 まとめ：ブラウザ・ビデオプレイヤーの状況把握