Video analytics seminar 2018

1. ストリーミング視聴解析の基礎セミナー 2018年3月15日鍋島公章 1Copyright (c) kosho.org

2. • 動画サービス • QoE (Quality of Experiment)競争 • VoD会社の差別化要因 • 精緻なユーザ行動分析 • ビッグデータ解析が可能に • 最低でも秒単位(望ましくは0.1秒単位)の視聴解析 • 短尺の動画広告が増加(15秒以下の広告が全体の1/4※) • 外部状況 • CDN事業者は配信の付加価値(セキュリティ、FEO、解析)に投資 • ニーズ拡大 • 配信事業は頭打ち • デファクト的な解析サービスはまだ無し • 大手：Adobe Analytics、ベンチャー各社 • OTT各社は作りこんだシステムを利用はじめに：ストリーミングの視聴解析 2 Copyright (c) kosho.org

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. • 対象：HTML5+mp4 • 基本再生イベント • 操作関連イベント • 異常時イベント Copyright (c) kosho.org 4 第1部：ビデオプレイヤーの内部イベント

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. • 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. • HTML5 + mp4 <video id="myvideo" > <source src="jst.mp4" type=“video/mp4” > </video> • 補足 • コンテンツ取得は httpレンジリクエスト内部イベントサンプル(HTML5 + mp4) HTTPサーバ mp4ファイルクライアントファイルの部分取得 7 Copyright (c) kosho.org

8. • 基本再生 • ケース1：オートプレイ：なし、プリロード：なし • ケース2：オートプレイ：あり • ケース3：オートプレイ：なし、プリロード：あり • 補足 • 実装はブラウザによりバラバラ • 操作関連 • 停止、シーク、音量変更、再生速度変更 • エラー • バッファリング発生 • エラー停止内部イベントサンプル(HTML5 + mp4) 8 Copyright (c) kosho.org

9. • 今回テストしたプレイヤー環境 • OS • Windows 7 • ブラウザ • Chrome：64.0.3282.186 • IE：11.0.9600.18952 • Firefox:58.0.2 基本再生：テスト環境 9 Copyright (c) kosho.org

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. • 外部イベント：ブラウザに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. • 外部イベント：再生ボタン押下（続き） 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. • 外部イベント：ブラウザに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. • 外部イベント：再生ボタン押下（続き） 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. • 外部イベント：ブラウザに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. • 外部イベント：再生ボタン押下 1, play 再生開始(キック) 2, timeupdate 再生位置変更 3, playing 再生開始(実効) • 再生中イベント 1, timeupdate 再生位置変更 2, progress メディアダウンロード中～上記の繰り返し～ • 終了時イベント 1, ended 再生終了基本再生(ケース1：IE) 16 Copyright (c) kosho.org Pauseしてもダウンロードを継続終了時のpauseなし

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. • 外部イベント：ブラウザに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. • 外部イベント：ブラウザに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. • 外部イベント：ブラウザに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. • コード • <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. 基本再生：プリロード(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. 基本再生：プリロード(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. 基本再生：プリロード(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. • プレイヤー操作 • 停止 • pause • 音量変更 • volumechange • 再生速度変更 • ratechange • シーク • seeking • seeked • 環境 • Chrome/Windows7 Copyright (c) kosho.org 25 操作関連

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. 操作関連：シーク • サンプル 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. 操作関連：再生速度変更 • 再生速度変更(倍速再生等) • 素の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. • バッファリング • 短期の内部的停止 • 明確な停止 • 処理エラー • ネットワーク • 内部エラー Copyright (c) kosho.org 29 異常処理

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. 異常処理：エラー • ネットワーク • timeupdate • waiting • stalled <NETWORK_LOADINGのままダウンロード継続> • エラー停止 • timeupdate • waiting • stalled • error • timeupdate • pause Copyright (c) kosho.org 31

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. • 設計：HTTP(REST) vs MQTT • MQTT概要 • プレイヤー処理 1. 内部イベントに対する処理割り当て 2. 管理サーバから各種情報を取得 3. 解析サーバとMQTT通信路確立 4. ビーコン送信 Copyright (c) kosho.org 33 第2部：プレイヤーから解析系へのビーコン送信

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. • 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. • 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. • Publish/Subscribe • 両方法通信 • トピック志向データ集計(視聴解析) 一斉通知(メッセージ送信) Copyright (c) kosho.org 37 設計：Pub/Sub ①Subscribe②Publish トピックブローカー ①Subscribe ②Publish トピックブローカー

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. • アプローチ • 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. • プレイヤー処理手順 • 内部イベントに対する処理割り当て • 管理サーバから各種情報を取得 • SID、UID、解析サーバとの通信用暗号鍵(SAS、Shared Access Signature) • 解析サーバとの通信路確立 • MQTT • ビーコン送信 • イベント毎の処理関数 Copyright (c) kosho.org 40 プレイヤーからのイベント送信

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. • 視聴解析に必要情報をストリーミングサーバが発行 • 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. • プレイヤー側コード 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. • サーバ側コード • 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. • 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. • 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. • 内部イベント処理 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. • ビーコン送信 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. • Azureによる解析環境 • Device Explorer • Time Series Insight • Stream Analytics Job • SAQL (Stream Analytics Query Language) • Power BI 第3部：解析環境 49 Copyright (c) kosho.org

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. • 簡易管理 • 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. • 簡易グラフ Time Series Insight イベント毎の発生回数を表示 52 Copyright (c) kosho.org

53. • リアルタイム解析 Stream Analytics Job SAQLによる分析 53 Copyright (c) kosho.org

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. • ビーコンデータ • 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. • イベント別の集計 • アルゴリズム • 単位時間(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. • 単位時間に集計したイベント別の意味合い • 行動解析 • timeupdate：同時視聴数(視聴しているユーザ数) • play：再生を開始したユーザ数 • pause:ポーズしたユーザ数(再生終了を含む) • ended：再生を終了したユーザ数 • QoE解析 • waiting：帯域がぎりぎりのユーザ数(再生開始時のwaitingを含む） • stalled：バッファリングが発生したユーザ数 • error：プレイヤーエラーのユーザ数 Copyright (c) kosho.org 57 SAQLによる視聴解析

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. • ビジネスインテリジェンス • 各種グラフ、解析 Power BI 青：再生開始黄色：同時接続数ピンク：再生終了 59 Copyright (c) kosho.org

60. • ビデオ視聴解析勉強会 • https://video-analytics.connpass.com/ • 定期的に勉強会を開催します • アジェンダ • 解析系プロダクトの紹介 • 視聴解析の手法 • クラスタ分析/RFM分析、チャーン分析、ABC分析、アソシエーション分析 • KPI（認知、検討、行動）、属性分析、DMP連携分析、パス解析、アトリビューション分析おわりに 60 Copyright (c) kosho.org

Video analytics seminar 2018

Masaaki Nabeshima

Video analytics seminar 2018