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