Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Video analytics seminar 2018

347 views

Published on

ストリーミング視聴解析を、MQTT等の最新技術を使い実装するテクニックを解説します。

Published in: Technology
  • Be the first to comment

Video analytics seminar 2018

  1. 1. ストリーミング視聴解析の 基礎セミナー 2018年3月15日 鍋島 公章 1Copyright (c) kosho.org
  2. 2. • 動画サービス • QoE (Quality of Experiment)競争 • VoD会社の差別化要因 • 精緻なユーザ行動分析 • ビッグデータ解析が可能に • 最低でも秒単位(望ましくは0.1秒単位)の視聴解析 • 短尺の動画広告が増加(15秒以下の広告が全体の1/4※) • 外部状況 • CDN事業者は配信の付加価値(セキュリティ、FEO、解析)に投資 • ニーズ拡大 • 配信事業は頭打ち • デファクト的な解析サービスはまだ無し • 大手:Adobe Analytics、ベンチャー各社 • OTT各社は作りこんだシステムを利用 はじめに:ストリーミングの視聴解析 2 Copyright (c) kosho.org
  3. 3. 第1部:ビデオプレイヤーの内部イベント • 再生開始、再生中、終了等 第2部:プレイヤーから解析系へのビーコン送信 • ビーコン型解析 • 補足:サーバ側での視聴解析は困難に • マルチCDN • イベントのフック • 汎用IoTプロトコル:MQTT(双方向通信) • ブローカー:Azure IoT Hub 第3部:汎用解析系での解析/Azure • データ表示:Device Explorer、Time Series Insight • リアルタイム解析:SAQL • ビジネスインテリジェンス:Power BI 本資料のアウトライン HTML5 Video Player 視聴解析サーバ ストリーミング サーバ 動画 ビーコン ブラウザ 3 Copyright (c) kosho.org 内部イベント
  4. 4. • 対象:HTML5+mp4 • 基本再生イベント • 操作関連イベント • 異常時イベント Copyright (c) kosho.org 4 第1部:ビデオプレイヤーの内部イベント
  5. 5. • HTML 5 Video ビデオプレイヤーの内部イベント イベント 概要 イベント 概要 play 再生開始(キック) ratechange 再生速度(倍速再生等)変更 waiting 再生可能を待つ volumechange 音量変更 playing 再生開始(実効) emptied メディアバッファが空 timeupdate 再生位置変更(再生中) resize 画面サイズ取得済 seeking シーク中 durationchange コンテンツ長取得済 seeked シーク終了 loadedmetadata メタ情報取得済 pause 停止 loadeddata 再生可能(次のフレーム) ended 再生終了 canplay 再生可能(先送り可能) abort ダウンロード失敗(取得中止) canplaythrough 再生可能(バッファリングなし連続) stalled ダウンロードできない(取得継続) loadstart 読み込みを開始 error エラー発生 progress メディアダウンロード中 suspend メディアダウンロードがアイドル 5 Copyright (c) kosho.org
  6. 6. • readyState • networkState Copyright (c) kosho.org 6 ビデオプレイヤーの内部ステイタス ステイタス 概要 関連イベント HAVE_NOTHING 0 HAVE_METADATA 1 メタ情報読み込み済 loadmetadata HAVE_CURRENT_DATA 2 メディアを読み込み済(早送り不可能) loadeddata HAVE_FUTURE_DATA 3 メディアを読み込み済(早送り可能) canplay HAVE_ENOUGH_DATA 4 メディアを読み込み済(バッファリングなしに 連続再生可能) canplaythrough ステイタス 概要 関連イベント NETWORK_EMPTY 0 NETWORK_IDLE 1 アイドル suspend NETWORK_LOADING 2 ダウンロード中 loadstart, progress NETWORK_NO_SOURCE 3 読み込み失敗
  7. 7. • HTML5 + mp4 <video id="myvideo" > <source src="jst.mp4" type=“video/mp4” > </video> • 補足 • コンテンツ取得は httpレンジリクエスト 内部イベントサンプル(HTML5 + mp4) HTTPサーバ mp4ファイル クライアント ファイルの部分取得 7 Copyright (c) kosho.org
  8. 8. • 基本再生 • ケース1:オートプレイ:なし、プリロード:なし • ケース2:オートプレイ:あり • ケース3:オートプレイ:なし、プリロード:あり • 補足 • 実装はブラウザによりバラバラ • 操作関連 • 停止、シーク、音量変更、再生速度変更 • エラー • バッファリング発生 • エラー停止 内部イベントサンプル(HTML5 + mp4) 8 Copyright (c) kosho.org
  9. 9. • 今回テストしたプレイヤー環境 • OS • Windows 7 • ブラウザ • Chrome:64.0.3282.186 • IE:11.0.9600.18952 • Firefox:58.0.2 基本再生:テスト環境 9 Copyright (c) kosho.org
  10. 10. • 前提 • コンテンツのオートプレイ:なし • コンテンツのプリロード:なし • コード <video id="myvideo" controls preload="none" width=320 height=240> <source src="jst.mp4" type=“video/mp4”> </video> 基本再生(ケース1) 10 Copyright (c) kosho.org
  11. 11. • 外部イベント:ブラウザにURL投入 1, loadstart 読み込み開始 2, suspend メディアダウンロードがアイドル • 外部イベント:再生ボタン押下 1, play 再生開始(キック) 2, waiting 再生可能を待つ 3, progress メディアダウンロード中 4, suspend メディアダウンロードがアイドル 5, durationchange コンテンツ長取得済 6, resize 画面サイズ取得済 7, loadedmetadata メタ情報取得済 8, progress メディアダウンロード中 9, suspend メディアダウンロードがアイドル 10, loadeddata 再生可能(次のフレーム) 基本再生(ケース1:Chrome) 11 Copyright (c) kosho.org 教科書的なイベント生成 mp4ファイルの再生 (メタはメディアファイ ルに含まれる)
  12. 12. • 外部イベント:再生ボタン押下(続き) 11, canplay 再生可能(先送り可能) 12, playing 再生開始(実効) 13, canplaythrough 再生可能(バッファリングなし連続) • 再生中イベント 1, timeupdate 再生位置変更(複数回、1/4秒単位) 2, progress メディアダウンロード中 3, suspend メディアダウンロードがアイドル ~上記の繰り返し~ • 終了時イベント(メディア終端での自動停止) 1, pause 停止 2, ended 再生終了 基本再生(ケース1:Chrome) 12 Copyright (c) kosho.org
  13. 13. • 外部イベント:ブラウザにURL投入 1, loadstart 読み込み開始 2, suspend メディアダウンロードがアイドル • 外部イベント:再生ボタン押下 1, play 再生開始(キック) 2, waiting 再生可能を待つ 3, progress メディアダウンロード中 4, durationchange コンテンツ長取得済 5, resize 画面サイズ取得済 6, loadedmetadata メタ情報取得済 7, loadeddata 再生可能(次のフレーム) 8, canplay 再生可能(先送り可能) 9, playing 再生開始(実効) 10, canplaythrough 再生可能(バッファリングなし連続) 基本再生(ケース1:Firefox) 13 Copyright (c) kosho.org suspendなし
  14. 14. • 外部イベント:再生ボタン押下(続き) 11, progress メディアダウンロード中 12, suspend メディアダウンロードがアイドル • 再生中イベント 1, timeupdate 再生位置変更(複数回、1/4秒単位) 2, progress メディアダウンロード中 3, suspend メディアダウンロードがアイドル ~上記の繰り返し~ • 終了時イベント 1, durationchange コンテンツ長取得済 2, pause 停止 3, ended 再生終了 基本再生(ケース1:Firefox) 14 Copyright (c) kosho.org durationchange発生
  15. 15. • 外部イベント:ブラウザにURL投入 1, loadstart 読み込み開始 2, abort ダウンロード失敗(取得中止) 3, emptied メディアバッファが空 4, durationchange コンテンツ長取得済 5, loadedmetadata メタ情報取得済 6, loadedata 再生可能(次のフレーム) 7, canplay 再生可能(先送り可能) 8, progress メディアダウンロード中 9, canplaythrough 再生可能(バッファリングなし連続) 基本再生(ケース1:IE) preload=“none”でも先読みを実施 suspendなし 15 Copyright (c) kosho.org resizeなし abort, emptiedあり
  16. 16. • 外部イベント:再生ボタン押下 1, play 再生開始(キック) 2, timeupdate 再生位置変更 3, playing 再生開始(実効) • 再生中イベント 1, timeupdate 再生位置変更 2, progress メディアダウンロード中 ~上記の繰り返し~ • 終了時イベント 1, ended 再生終了 基本再生(ケース1:IE) 16 Copyright (c) kosho.org Pauseしてもダウンロードを継続 終了時のpauseなし
  17. 17. • 前提 • コンテンツのオートプレイ:あり • Webページ表示とともに自動再生 • コード • <video id=“myvideo” controls autoplay width=320 height=240> • <source src="jst.mp4" type=“video/mp4“ > • </video> 基本再生(ケース2) 17 Copyright (c) kosho.org
  18. 18. • 外部イベント:ブラウザにURL投入 1, loadstart 2, durationchange 3, resize 4, loadedmetadata 5, progress 6, suspend 7, loadeddata 8, canplay 9, play 10, playing 11, canplaythrough • 再生中イベント、終了時イベント • ケース1と同じ 基本再生(ケース2:Chrome) 18 Copyright (c) kosho.org ケース1の再生ボタン押 下後とほぼ同じ
  19. 19. • 外部イベント:ブラウザにURL投入 1, loadstart 2, progress 3, durationchange 4, resize 5, loadedmetadata 6, loadeddata 7, canplay 8, play 9, playing 10, canplaythrough • 再生中イベント、終了時イベント • ケース1と同じ 基本再生(ケース2:Firefox) 19 Copyright (c) kosho.org ケース1の再生ボタン押 下後とほぼ同じ
  20. 20. • 外部イベント:ブラウザにURL投入 1, loadstart 2, abort 3, emptied 4, durationchange 5, loadedmetadata 6, loadedata 7, canplay 8, progress 9, canplaythrough 10, play 11, playing • 再生中イベント、終了時イベント • ケース1と同じ 基本再生(ケース2:IE) 20 Copyright (c) kosho.org playが発生する以外ケース1とほぼ 同じ
  21. 21. • コード • <video id="myvideo" controls preload=“xxx" width=320 height=240> • <source src="../jst-short.mp4" type='video/mp4' > • </video> • パラメータ • none:プリロードなし • auto:メディアを読み込み • metadata:メタだけ読み込み 基本再生:プリロード 21 Copyright (c) kosho.org
  22. 22. 基本再生:プリロード(Chrome) 22 Copyright (c) kosho.org none auto metadata URL投入後 プレイボタン URL投入後 プレイボタン URL投入後 プレイボタン loadstart, suspend play, waiting, progress, suspend, durationchange, resize, loadedmetadata, progress, suspend, loadeddata, canplay, playing, canplaythrough loadstart, progress, durationchange, resize, loadedmetadata, progress, suspend, loadeddata, canplay, canplaythrough play, playing autoと同じ(コン テンツのプリロー ドはautoより多 い) play, playing
  23. 23. 基本再生:プリロード(IE) 23 Copyright (c) kosho.org none auto metadata URL投入後 プレイボタン URL投入後 プレイボタン URL投入後 プレイボタン loadstart, abort, emptied, durationchange, loadedmetadata, loadeddata, canplay, progress, canplaythrough play, playing noneと同じ+ コンテンツのプ リロードが続く (progress) play, playing noneと同じ play, playing
  24. 24. 基本再生:プリロード(Firefox) 24 Copyright (c) kosho.org none auto metadata URL投入後 プレイボタン URL投入後 プレイボタン URL投入後 プレイボタン loadstart, suspend play, waiting, progress, durationchange, resize, loadedmetadata, loadeddata, canplay, playing, canplaythrough loadstart, progress, durationchange, resize, loadedmetadata, loadeddata, canplay, canplaythough, progress, suspend play, playing autoと同じ (メディア読み 込みが少ない) autoと同じ
  25. 25. • プレイヤー操作 • 停止 • pause • 音量変更 • volumechange • 再生速度変更 • ratechange • シーク • seeking • seeked • 環境 • Chrome/Windows7 Copyright (c) kosho.org 25 操作関連
  26. 26. 操作関連:停止 • 停止 timeupdate progress suspend <Pauseボタン押下> pause • ボリューム変更 timeupdate progress suspend <Volumeボタン押下> volumechange timeupdate progress suspend volumechange volumechange timeupdate progress <Volumeボタン放す>Copyright (c) kosho.org 26 通常再生のイベントに volumechangeが混ざる
  27. 27. 操作関連:シーク • サンプル timeupdate progress suspend <Seekボタン押下> pause seeking progress suspend seeked canplay canplaythrough seeking seeking <Seekボタン放す> play waiting progress timeupdate seeked canplay timeupdate canplaythrough Copyright (c) kosho.org 27 ボタン押下後にcanplay, canplaythroughが発生 ボタンリリース後は、 最初から再生と同等 のイベント発生
  28. 28. 操作関連:再生速度変更 • 再生速度変更(倍速再生等) • 素のChromeにはない • Chromeの拡張機能で実装 • Video Speed Controller • サンプル timeupdate progress suspend <Rateボタン押下> ratechange timeupdate progress suspend ratechange ratechange timeupdate progress <Rateボタン放す> Copyright (c) kosho.org 28 通常再生のイベントに ratechangeが混ざる
  29. 29. • バッファリング • 短期の内部的停止 • 明確な停止 • 処理エラー • ネットワーク • 内部エラー Copyright (c) kosho.org 29 異常処理
  30. 30. 異常処理:バッファリング • 短期の(内部)停止 • timeupdate • waiting • progress • canplay • playing • canplaythrough • timeupdate • 明確な停止が発生 • timeupdate • waiting • stalled • progress • progress • seeking • waiting • timeupdate • seeked • canplay • playing • canplaythrough • timeupdateCopyright (c) kosho.org 30 seekが発生 readyStateの 変化による イベント発生
  31. 31. 異常処理:エラー • ネットワーク • timeupdate • waiting • stalled <NETWORK_LOADINGのままダウン ロード継続> • エラー停止 • timeupdate • waiting • stalled • error • timeupdate • pause Copyright (c) kosho.org 31
  32. 32. • 拡張イベント 補足:Video.js拡張 イベント 概要 イベント 概要 ready プレイヤー準備が完了 beforepluginsetup プラグイン設定の直前 dispose プレイヤー削除が完了 pluginsetup プラグイン設定が完了 firstplay 1回目の再生 usingcustomcontrols, usingnativecontrols カスタムもしくはネイティブコ ントロールが使用された playerresize プレイヤーのリサイズ完了 controlsdisabled, controlsenabled コントロールが有効化・無効 化された componentresize コンポーネントのリサイズ完了 tap コンポーネント追加が完了 enterFullWindow, exitFullWindow フルスクリーンに入る・出る posterchange ポスター画像が変化 fullscreenchange フルスクリーンが変化 textdata テキスト取得 useractive, userinactive ユーザアクティブが変化 texttrackchange テキストが変化 32 Copyright (c) kosho.org
  33. 33. • 設計:HTTP(REST) vs MQTT • MQTT概要 • プレイヤー処理 1. 内部イベントに対する処理割り当て 2. 管理サーバから各種情報を取得 3. 解析サーバとMQTT通信路確立 4. ビーコン送信 Copyright (c) kosho.org 33 第2部:プレイヤーから解析系へのビーコン送信
  34. 34. • Azure IoT Hub • サポートしているプロトコル比較 • 補足 • ビデオプレイヤー双方向性通信の用途 • プレイリスト変更 • チャット Copyright (c) kosho.org 34 設計:プロトコル選択 概要 ブラウザ用 ライブラリ プロトコルの重さ クロスドメイン 問題 REST HTTPでAPIを叩く ネイティブ対応 重い あり(後述) AMQP 専用プロトコル(高機能) 双方向 なし 軽い なし MQTT 専用プロトコル(シンプル) 双方向 Eclipse Paho 軽い なし AMQP: Advanced Message Queuing Protocol MQTT: Message Queueing Telemetry Transport
  35. 35. • REST API+HTTP • リソース名=URI Copyright (c) kosho.org 35 設計:REST 操作 HTTPメソッド リソース作成 POST リソース削除 DELETE データ取得 GET データ更新 PUT 課題①:一方向性(クライアン トからのリクエストのみ) 課題②:プロトコルの重さ HTTPリクエスト HTTPレスポンス PUT /data/mydata1.jsp HTTP/1.1 Host: example.jp User-Agent: Mozilla/5.0 (compatible; ;… Accept: image/gif, image/x-xbitmap, i,… Accept-Language: ja Accept-Encoding: gzip, deflate Content-Length: 11 Connection: Keep-Alive Hello World HTTP/1.1 200 OK Date: Thu, 26 Oct 2000 16:51:49 Server: Apache/1.3.14 (Unix)
  36. 36. • MQTT概要 • プロトコルフォーマット Copyright (c) kosho.org 36 設計:MQTT概要 MQTTコントロール MQTTコントロール 固定(2バイト)ヘッダ ペイロード MQTTセッション 可変ヘッダ グループ コントロール 概要 セッション管理 CONNECT 接続要求 CONNACK 接続確認応答 DISCONNECT クライアント切断 Publish PUBLISH パブリッシュ PUBACK パブリッシュ確認 PUBREC パブリッシュ受信 PUBREL パブリッシュのリリース PUBCOMP パブリッシュ完了 Subscribe SUBSCRIBE サブスクライブ SUBACK サブスクライブ確認 UNSUBSCRIBE アンサブスクライブ UNSUBACK アンサブスクライブ確認 PING PINGREQ Ping要求 PUGRESP Ping確認
  37. 37. • Publish/Subscribe • 両方法通信 • トピック志向 データ集計(視聴解析) 一斉通知(メッセージ送信) Copyright (c) kosho.org 37 設計:Pub/Sub ①Subscribe②Publish トピック ブローカー ①Subscribe ②Publish トピック ブローカー
  38. 38. • 概要 • ブラウザは、JavscriptをダウンロードしたドメインのみにHTTP通信を許す • 他ドメインへの通信 • 無条件に許すとセキュリティ上問題(悪意を持ったJavascriptはやりたい放題) • 通信先が明示的にCORS(Cross-Origin Resource Sharing)ヘッダを送信 • 課題 • Event hub, IoT HubともにCORSをサポートせず 設計:ブラウザJavascriptのクロスドメイン問題 HTML5 Video Player 視聴解析サーバ ストリーミング サーバ 動画 ビーコン Player.js HTTPレスポンス(CORSヘッダ) Access-Control-Allow-Origin "*" Access-Control-Allow-Headers "Content-Type,Authorization" 38 Copyright (c) kosho.org
  39. 39. • アプローチ • Azure Function Apps Proxyの利用 • HTTP以外のプロトコルでビーコン送信 • MQTT over WebSocket Copyright (c) kosho.org 39 設計:クロスドメイン対策 Function Apps HTML5 Video Player IoT Hub Reverse Proxy CORSヘッダ生成 Function Apps管理画面 CORS管理画面
  40. 40. • プレイヤー処理手順 • 内部イベントに対する処理割り当て • 管理サーバから各種情報を取得 • SID、UID、解析サーバとの通信用暗号鍵(SAS、Shared Access Signature) • 解析サーバとの通信路確立 • MQTT • ビーコン送信 • イベント毎の処理関数 Copyright (c) kosho.org 40 プレイヤーからのイベント送信
  41. 41. • 内部イベントに対する処理割り当て <video id="myvideo" controls preload="none" width=320 height=240> <source src=“jst.mp4" type='video/mp4' > </video> var $myPlayer = document.getElementById("myvideo"); $eventArray = [ "abort","canplay","canplaythrough","durationchange","emptied", "ended","error","loadeddata","loadedmetadata","loadstart","pause","play", "playing","progress","ratechange","resize","seeked","seeking","stalled", "suspend","timeupdate","volumechange","waiting"] for ($key in $eventArray) { $myPlayer.addEventListener($eventArray[$key], $.proxy(eventHandler, this,$eventArray[$key])); } Copyright (c) kosho.org 41 プレイヤー処理 イベント名リスト 処理割り当て
  42. 42. • 視聴解析に必要情報をストリーミングサーバが発行 • IoT Hubアクセスに必要となる鍵 • SAS (Shared Access Signature) • 視聴解析に必要となるID • UID (User ID):DMP(ユーザ情報)と紐付けた使い捨てID発行 • SID (Session ID):セッション毎のユニーク値 Copyright (c) kosho.org 42 プレイヤー処理 HTML5 Video Player ストリーミングサーバ UID SID SAS ビーコン with UID,SID,SAS ブラウザ IoT Hub (視聴解析サーバ)
  43. 43. • プレイヤー側コード function getUid() { $.ajax({contentType : "text/plain", type : "GET", async : false, url : "uid.php", timeout : 100000, success : function(uniqueID) { $uid=uniqueID;}}); } function getSid() { $.ajax({contentType : "text/plain", type : "GET", async : false, url : "sid.php", timeout : 100000, success : function(uniqueID) {$sid=uniqueID;}}); } function getSas(url) { $.ajax({contentType : "text/plain", type : "GET", async : false, url : "sas.php?url="+url, timeout : 100000, success : function(sas) { $sas=sas;}}); } Copyright (c) kosho.org 43 プレイヤー処理
  44. 44. • サーバ側コード • uid.php (ダミー) <?php echo uuid_create(UUID_TYPE_RANDOM); ?> • sid.php <?php echo uuid_create(UUID_TYPE_RANDOM); ?> • sas.php <?php $url = urlencode($_GET['url']); $key = base64_decode(‘here is a secret key from azure console'); $expiry = time() + 3600; $scope = $url . "¥n" . $expiry; $signature = urlencode(base64_encode(hash_hmac('sha256', $scope, $key, true))); echo "SharedAccessSignature sr=".$url."&sig=".$signature."&se=".$expiry; ?> Copyright (c) kosho.org 44 プレイヤー処理 “URL+有効時間” を秘密鍵でHMAC
  45. 45. • MQTT接続by Paho to IoT Hub • connect処理 (MQTT over Websocket over SSL) var host = ‘example-kosho-iot.azure-devices.net'; var client = new Paho.MQTT.Client(host,443,'/$iothub/websocket?iothub-no-client- cert=true','cl01'); client.onMessageArrived = onMessage; getSas(host+'/devices/cl01'); client.connect({ useSSL: true, userName: ‘example-kosho-iot.azure-devices.net/cl01/api-version=2016-11-14', password: $sas, mqttVersion: 4, onSuccess: onConnect, onFailure: failConnect }); Copyright (c) kosho.org 45 プレイヤー処理 chrome等からの接 続に必要 メッセージ受信処理 websocket指定 SSL必須 MQTT3.1.1 MQTT接続後処理
  46. 46. • MQTT接続by Paho to IoT Hub • onConnect function onConnect() { console.log("onConnected"); $connected = true; for (var $i=0;$i<$videoEventList.length;$i++) { sendBeacon($videoEventList[$i]); } client.subscribe("devices/cl01/messages/devicebound/#"); } Copyright (c) kosho.org 46 プレイヤー処理 トピックのサブスクライブ MQTT接続前に発生した イベントをビーコン送信
  47. 47. • 内部イベント処理 function eventHandler($eventName) { if ($eventName == "timeupdate") { if (parseInt($myPlayer.currentTime) <= $myPlayerNextTime) { return; } else { $myPlayerNextTime += 1; } } else if ($eventName == "play") { $myPlayerNextTime = 0; } var $data = { "videoName" : $videoName, "uid" : $uid, "sid" : $sid, "playerName" : $myPlayer.techName_, "eventName" : $eventName }; if ($connected) { sendBeacon($data); } else { $videoEventList.push($data); } if($eventName == "ended") { getSid(); } } Copyright (c) kosho.org 47 プレイヤー処理 timeupdateは1秒に1回 ビーコン データ作成 MQTT接続してい ればビーコン送信 セッションID更新
  48. 48. • ビーコン送信 function sendBeacon($data) { if (!$data.uid) { $data.uid = $uid; } if (!$data.sid) { $data.sid = $sid; } message = new Paho.MQTT.Message(JSON.stringify($data)); message.destinationName = "devices/all/messages/events/"; var ret = client.send(message); } Copyright (c) kosho.org 48 プレイヤー処理 送信
  49. 49. • Azureによる解析環境 • Device Explorer • Time Series Insight • Stream Analytics Job • SAQL (Stream Analytics Query Language) • Power BI 第3部:解析環境 49 Copyright (c) kosho.org
  50. 50. • Azureによる解析環境 Azure ビッグデータ HTML5 Video Player IoT Hub Streaming Analytics Job Device Explorer SQL Server Power BI Storage ブローカー リアルタイム 処理 (SAQL) 生データ保存 簡易グラフ ビジネス インテリジェンス データベース 50 Copyright (c) kosho.org Time Series Insight 簡易管理
  51. 51. • 簡易管理 • https://github.com/Azure/azure-iot-sdk-csharp/tree/master/tools/DeviceExplorer • 操作 • Configuration:IoT Hubへの接続管理 • Management:デバイス追加 • Data:データのモニタ • Message To Device • Call Method on Device Copyright (c) kosho.org 51 Device Explorer
  52. 52. • 簡易グラフ Time Series Insight イベント毎の発生回数を表示 52 Copyright (c) kosho.org
  53. 53. • リアルタイム解析 Stream Analytics Job SAQLによる分析 53 Copyright (c) kosho.org
  54. 54. • SAQL (Stream Analytics Query Language) • SQLに時間論理を追加 • タイムスタンプ • TimeStamp by:タイムスタンプの指定 • EventProcessedUtcTime • EventEnqueuedUtcTime • グループ化(期間指定) • TumblingWindow:ウィンドウが固定(例:10秒)、かぶりなし • HoppingWindow:ウィンドウ(例:10秒)が指定された時間(例:5秒)で移動、かぶりあり • SlidingWindow:ウィンドウ(例:10秒)がデータの発生消滅に合わせて移動、かぶりあり • 関数 • ISFIRST:最初かどうか • LAG:前回の値 • LAST:最後の値 • TopOne:トップ1件 • CollectTop:トップX件 Copyright (c) kosho.org 54 SAQLによるリアルタイム分析
  55. 55. • ビーコンデータ • HTML5 → IoT Hub {"videoName":"https://tech.jstream.jp/analytics/seminar01/play.php", "uid":"e4cee9ba-6777-4e88-b209-700c2a68e889", "sid":"a50bac4b-dacd-4fb7-9a03-57253afed8da", "eventName":"timeupdate"} • IoT Hub → Stream Analytcis Job {"videoName":"https://tech.jstream.jp/analytics/seminar01/play.php", "uid":"e4cee9ba-6777-4e88-b209-700c2a68e889", "sid":"a50bac4b-dacd-4fb7-9a03-57253afed8da", "eventName":"timeupdate“ "EventProcessedUtcTime":"2018-01-23T02:36:52.0839398Z", "PartitionId":1, "EventEnqueuedUtcTime":"2018-01-23T02:34:56.7150000Z“, "IoTHub":{"MessageId":null,"CorrelationId":null,"ConnectionDeviceId":"cl01","ConnectionDevic eGenerationId":"636565232697901524","EnqueuedTime":"2018-03- 14T09:18:55.9450000Z","StreamId":null}}} Copyright (c) kosho.org 55 Stream Analytics Job
  56. 56. • イベント別の集計 • アルゴリズム • 単位時間(1分間)内に発生したイベントをUID別に数え上げる • SAQL SELECT eventName, count(distinct uid) as u_count, System.Timestamp as time INTO [kosho-output4] FROM [kosho-input2] timestamp by EventEnqueuedUtcTime GROUP BY eventName, TumblingWindow(minute,1) • 出力 {"eventname":"playing”, "u_count":1,"time":"2018-01-25T02:19:00.0000000Z"} {"eventname":"timeupdate",“u_count”:6,”time”:”2018-01-25T02:19:00.0000000Z"} Copyright (c) kosho.org 56 SAQLによる視聴解析
  57. 57. • 単位時間に集計したイベント別の意味合い • 行動解析 • timeupdate:同時視聴数(視聴しているユーザ数) • play:再生を開始したユーザ数 • pause:ポーズしたユーザ数(再生終了を含む) • ended:再生を終了したユーザ数 • QoE解析 • waiting:帯域がぎりぎりのユーザ数(再生開始時のwaitingを含む) • stalled:バッファリングが発生したユーザ数 • error:プレイヤーエラーのユーザ数 Copyright (c) kosho.org 57 SAQLによる視聴解析
  58. 58. • 同時視聴数 • アルゴリズム • 単位時間(1分間)内に発生した”timeupdate”をUID別に数え上げる • SAQL SELECT count(distinct uid) as u_count, System.Timestamp as time INTO [kosho-output4] FROM [kosho-input2] timestamp by EventEnqueuedUtcTime WHERE eventName = ‘timeupdate’ GROUP BY TumblingWindow(minute,1) • 出力 {"u_count":1,"time":"2018-01-25T02:19:00.0000000Z"} {"u_count":3,"time":"2018-01-25T02:20:00.0000000Z”} {“u_count”:6,”time”:”2018-01-25T02:21:00.0000000Z"} Copyright (c) kosho.org 58 SAQLによる視聴解析
  59. 59. • ビジネスインテリジェンス • 各種グラフ、解析 Power BI 青:再生開始 黄色:同時接続数 ピンク:再生終了 59 Copyright (c) kosho.org
  60. 60. • ビデオ視聴解析勉強会 • https://video-analytics.connpass.com/ • 定期的に勉強会を開催します • アジェンダ • 解析系プロダクトの紹介 • 視聴解析の手法 • クラスタ分析/RFM分析、チャーン分析、ABC分析、アソシエーション分析 • KPI(認知、検討、行動)、属性分析、DMP連携分析、パス解析、アトリビューション分析 おわりに 60 Copyright (c) kosho.org

×