SlideShare a Scribd company logo
1 of 60
Download to read offline
ストリーミング視聴解析の
基礎セミナー
2018年3月15日
鍋島 公章
1Copyright (c) kosho.org
• 動画サービス
• QoE (Quality of Experiment)競争
• VoD会社の差別化要因
• 精緻なユーザ行動分析
• ビッグデータ解析が可能に
• 最低でも秒単位(望ましくは0.1秒単位)の視聴解析
• 短尺の動画広告が増加(15秒以下の広告が全体の1/4※)
• 外部状況
• CDN事業者は配信の付加価値(セキュリティ、FEO、解析)に投資
• ニーズ拡大
• 配信事業は頭打ち
• デファクト的な解析サービスはまだ無し
• 大手:Adobe Analytics、ベンチャー各社
• OTT各社は作りこんだシステムを利用
はじめに:ストリーミングの視聴解析
2
Copyright (c) kosho.org
第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
内部イベント
• 対象:HTML5+mp4
• 基本再生イベント
• 操作関連イベント
• 異常時イベント
Copyright (c) kosho.org
4
第1部:ビデオプレイヤーの内部イベント
• 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
• 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 読み込み失敗
• HTML5 + mp4
<video id="myvideo" >
<source src="jst.mp4" type=“video/mp4” >
</video>
• 補足
• コンテンツ取得は httpレンジリクエスト
内部イベントサンプル(HTML5 + mp4)
HTTPサーバ
mp4ファイル
クライアント
ファイルの部分取得
7
Copyright (c) kosho.org
• 基本再生
• ケース1:オートプレイ:なし、プリロード:なし
• ケース2:オートプレイ:あり
• ケース3:オートプレイ:なし、プリロード:あり
• 補足
• 実装はブラウザによりバラバラ
• 操作関連
• 停止、シーク、音量変更、再生速度変更
• エラー
• バッファリング発生
• エラー停止
内部イベントサンプル(HTML5 + mp4)
8
Copyright (c) kosho.org
• 今回テストしたプレイヤー環境
• OS
• Windows 7
• ブラウザ
• Chrome:64.0.3282.186
• IE:11.0.9600.18952
• Firefox:58.0.2
基本再生:テスト環境
9
Copyright (c) kosho.org
• 前提
• コンテンツのオートプレイ:なし
• コンテンツのプリロード:なし
• コード
<video id="myvideo" controls preload="none" width=320 height=240>
<source src="jst.mp4" type=“video/mp4”>
</video>
基本再生(ケース1)
10
Copyright (c) kosho.org
• 外部イベント:ブラウザに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ファイルの再生
(メタはメディアファイ
ルに含まれる)
• 外部イベント:再生ボタン押下(続き)
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
• 外部イベント:ブラウザに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なし
• 外部イベント:再生ボタン押下(続き)
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発生
• 外部イベント:ブラウザに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あり
• 外部イベント:再生ボタン押下
1, play 再生開始(キック)
2, timeupdate 再生位置変更
3, playing 再生開始(実効)
• 再生中イベント
1, timeupdate 再生位置変更
2, progress メディアダウンロード中
~上記の繰り返し~
• 終了時イベント
1, ended 再生終了
基本再生(ケース1:IE)
16
Copyright (c) kosho.org
Pauseしてもダウンロードを継続
終了時のpauseなし
• 前提
• コンテンツのオートプレイ:あり
• Webページ表示とともに自動再生
• コード
• <video id=“myvideo” controls autoplay width=320 height=240>
• <source src="jst.mp4" type=“video/mp4“ >
• </video>
基本再生(ケース2)
17
Copyright (c) kosho.org
• 外部イベント:ブラウザに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の再生ボタン押
下後とほぼ同じ
• 外部イベント:ブラウザに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の再生ボタン押
下後とほぼ同じ
• 外部イベント:ブラウザに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とほぼ
同じ
• コード
• <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
基本再生:プリロード(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
基本再生:プリロード(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
基本再生:プリロード(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と同じ
• プレイヤー操作
• 停止
• pause
• 音量変更
• volumechange
• 再生速度変更
• ratechange
• シーク
• seeking
• seeked
• 環境
• Chrome/Windows7
Copyright (c) kosho.org
25
操作関連
操作関連:停止
• 停止
timeupdate
progress
suspend
<Pauseボタン押下>
pause
• ボリューム変更
timeupdate
progress
suspend
<Volumeボタン押下>
volumechange
timeupdate
progress
suspend
volumechange
volumechange
timeupdate
progress
<Volumeボタン放す>Copyright (c) kosho.org 26
通常再生のイベントに
volumechangeが混ざる
操作関連:シーク
• サンプル
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が発生
ボタンリリース後は、
最初から再生と同等
のイベント発生
操作関連:再生速度変更
• 再生速度変更(倍速再生等)
• 素のChromeにはない
• Chromeの拡張機能で実装
• Video Speed Controller
• サンプル
timeupdate
progress
suspend
<Rateボタン押下>
ratechange
timeupdate
progress
suspend
ratechange
ratechange
timeupdate
progress
<Rateボタン放す>
Copyright (c) kosho.org 28
通常再生のイベントに
ratechangeが混ざる
• バッファリング
• 短期の内部的停止
• 明確な停止
• 処理エラー
• ネットワーク
• 内部エラー
Copyright (c) kosho.org
29
異常処理
異常処理:バッファリング
• 短期の(内部)停止
• 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の
変化による
イベント発生
異常処理:エラー
• ネットワーク
• timeupdate
• waiting
• stalled
<NETWORK_LOADINGのままダウン
ロード継続>
• エラー停止
• timeupdate
• waiting
• stalled
• error
• timeupdate
• pause
Copyright (c) kosho.org 31
• 拡張イベント
補足: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
• 設計:HTTP(REST) vs MQTT
• MQTT概要
• プレイヤー処理
1. 内部イベントに対する処理割り当て
2. 管理サーバから各種情報を取得
3. 解析サーバとMQTT通信路確立
4. ビーコン送信
Copyright (c) kosho.org
33
第2部:プレイヤーから解析系へのビーコン送信
• 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
• 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)
• 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確認
• Publish/Subscribe
• 両方法通信
• トピック志向
データ集計(視聴解析) 一斉通知(メッセージ送信)
Copyright (c) kosho.org
37
設計:Pub/Sub
①Subscribe②Publish
トピック
ブローカー
①Subscribe ②Publish
トピック
ブローカー
• 概要
• ブラウザは、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
• アプローチ
• 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管理画面
• プレイヤー処理手順
• 内部イベントに対する処理割り当て
• 管理サーバから各種情報を取得
• SID、UID、解析サーバとの通信用暗号鍵(SAS、Shared Access Signature)
• 解析サーバとの通信路確立
• MQTT
• ビーコン送信
• イベント毎の処理関数
Copyright (c) kosho.org
40
プレイヤーからのイベント送信
• 内部イベントに対する処理割り当て
<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
プレイヤー処理
イベント名リスト
処理割り当て
• 視聴解析に必要情報をストリーミングサーバが発行
• 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
(視聴解析サーバ)
• プレイヤー側コード
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
プレイヤー処理
• サーバ側コード
• 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
• 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接続後処理
• 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接続前に発生した
イベントをビーコン送信
• 内部イベント処理
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更新
• ビーコン送信
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
プレイヤー処理
送信
• Azureによる解析環境
• Device Explorer
• Time Series Insight
• Stream Analytics Job
• SAQL (Stream Analytics Query Language)
• Power BI
第3部:解析環境
49
Copyright (c) kosho.org
• 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
簡易管理
• 簡易管理
• 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
• 簡易グラフ
Time Series Insight
イベント毎の発生回数を表示
52
Copyright (c) kosho.org
• リアルタイム解析
Stream Analytics Job
SAQLによる分析
53
Copyright (c) kosho.org
• 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によるリアルタイム分析
• ビーコンデータ
• 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
• イベント別の集計
• アルゴリズム
• 単位時間(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による視聴解析
• 単位時間に集計したイベント別の意味合い
• 行動解析
• timeupdate:同時視聴数(視聴しているユーザ数)
• play:再生を開始したユーザ数
• pause:ポーズしたユーザ数(再生終了を含む)
• ended:再生を終了したユーザ数
• QoE解析
• waiting:帯域がぎりぎりのユーザ数(再生開始時のwaitingを含む)
• stalled:バッファリングが発生したユーザ数
• error:プレイヤーエラーのユーザ数
Copyright (c) kosho.org
57
SAQLによる視聴解析
• 同時視聴数
• アルゴリズム
• 単位時間(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による視聴解析
• ビジネスインテリジェンス
• 各種グラフ、解析
Power BI
青:再生開始
黄色:同時接続数
ピンク:再生終了
59
Copyright (c) kosho.org
• ビデオ視聴解析勉強会
• https://video-analytics.connpass.com/
• 定期的に勉強会を開催します
• アジェンダ
• 解析系プロダクトの紹介
• 視聴解析の手法
• クラスタ分析/RFM分析、チャーン分析、ABC分析、アソシエーション分析
• KPI(認知、検討、行動)、属性分析、DMP連携分析、パス解析、アトリビューション分析
おわりに
60
Copyright (c) kosho.org

More Related Content

What's hot

第8回 Tokyo Jazug Night Ignite 2017 落穂拾い Storage編
第8回 Tokyo Jazug Night Ignite 2017 落穂拾い Storage編第8回 Tokyo Jazug Night Ignite 2017 落穂拾い Storage編
第8回 Tokyo Jazug Night Ignite 2017 落穂拾い Storage編Takekazu Omi
 
第14回 KAIM M5StickV(K210)をDNNアクセラレータとして使おうとした試み
第14回 KAIM M5StickV(K210)をDNNアクセラレータとして使おうとした試み第14回 KAIM M5StickV(K210)をDNNアクセラレータとして使おうとした試み
第14回 KAIM M5StickV(K210)をDNNアクセラレータとして使おうとした試みtomitomi3 tomitomi3
 
もしCloudStackのKVMホストでPCIパススルーできるようになったら
もしCloudStackのKVMホストでPCIパススルーできるようになったらもしCloudStackのKVMホストでPCIパススルーできるようになったら
もしCloudStackのKVMホストでPCIパススルーできるようになったらTakuma Nakajima
 
[Azure Antenna] クラウドで HPC ~ HPC on Azure ~
[Azure Antenna] クラウドで HPC ~ HPC on Azure ~[Azure Antenna] クラウドで HPC ~ HPC on Azure ~
[Azure Antenna] クラウドで HPC ~ HPC on Azure ~Shuichi Gojuki
 
InnoDBのすゝめ(仮)
InnoDBのすゝめ(仮)InnoDBのすゝめ(仮)
InnoDBのすゝめ(仮)Takanori Sejima
 
[Cyber HPC Symposium 2019] Microsoft Azureによる、クラウド時代のハイパフォーマンスコンピューティング High...
[Cyber HPC Symposium 2019]  Microsoft Azureによる、クラウド時代のハイパフォーマンスコンピューティング High...[Cyber HPC Symposium 2019]  Microsoft Azureによる、クラウド時代のハイパフォーマンスコンピューティング High...
[Cyber HPC Symposium 2019] Microsoft Azureによる、クラウド時代のハイパフォーマンスコンピューティング High...Shuichi Gojuki
 
Innodb Deep Talk #2 でお話したスライド
Innodb Deep Talk #2 でお話したスライドInnodb Deep Talk #2 でお話したスライド
Innodb Deep Talk #2 でお話したスライドYasufumi Kinoshita
 
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)NTT DATA Technology & Innovation
 
Slurmのジョブスケジューリングと実装
Slurmのジョブスケジューリングと実装Slurmのジョブスケジューリングと実装
Slurmのジョブスケジューリングと実装Ryuichi Sakamoto
 
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリWebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリKohei Kadowaki
 
ネットワーク ゲームにおけるTCPとUDPの使い分け
ネットワーク ゲームにおけるTCPとUDPの使い分けネットワーク ゲームにおけるTCPとUDPの使い分け
ネットワーク ゲームにおけるTCPとUDPの使い分けモノビット エンジン
 
20171220_hbstudy80_pgstrom
20171220_hbstudy80_pgstrom20171220_hbstudy80_pgstrom
20171220_hbstudy80_pgstromKohei KaiGai
 
OpenStackを使用したGPU仮想化IaaS環境 事例紹介
OpenStackを使用したGPU仮想化IaaS環境 事例紹介OpenStackを使用したGPU仮想化IaaS環境 事例紹介
OpenStackを使用したGPU仮想化IaaS環境 事例紹介VirtualTech Japan Inc.
 
Anthos を使ったエンタープライズ向けクラスタの設計とアップグレード戦略のススメ(CloudNative Days Tokyo 2021 発表資料)
Anthos を使ったエンタープライズ向けクラスタの設計とアップグレード戦略のススメ(CloudNative Days Tokyo 2021 発表資料)Anthos を使ったエンタープライズ向けクラスタの設計とアップグレード戦略のススメ(CloudNative Days Tokyo 2021 発表資料)
Anthos を使ったエンタープライズ向けクラスタの設計とアップグレード戦略のススメ(CloudNative Days Tokyo 2021 発表資料)NTT DATA Technology & Innovation
 
Mattermost インストールハンズオン 2018年8月時点
Mattermost インストールハンズオン 2018年8月時点Mattermost インストールハンズオン 2018年8月時点
Mattermost インストールハンズオン 2018年8月時点Kohei Nishikawa
 
(JP) GPGPUがPostgreSQLを加速する
(JP) GPGPUがPostgreSQLを加速する(JP) GPGPUがPostgreSQLを加速する
(JP) GPGPUがPostgreSQLを加速するKohei KaiGai
 
SSDとGPUがPostgreSQLを加速する【OSC.Enterprise】
SSDとGPUがPostgreSQLを加速する【OSC.Enterprise】SSDとGPUがPostgreSQLを加速する【OSC.Enterprise】
SSDとGPUがPostgreSQLを加速する【OSC.Enterprise】Kohei KaiGai
 
GTC 2018 の基調講演から
GTC 2018 の基調講演からGTC 2018 の基調講演から
GTC 2018 の基調講演からNVIDIA Japan
 
Flow in VR Funhouse MOD Kit
Flow in VR Funhouse MOD KitFlow in VR Funhouse MOD Kit
Flow in VR Funhouse MOD KitNVIDIA Japan
 

What's hot (20)

第8回 Tokyo Jazug Night Ignite 2017 落穂拾い Storage編
第8回 Tokyo Jazug Night Ignite 2017 落穂拾い Storage編第8回 Tokyo Jazug Night Ignite 2017 落穂拾い Storage編
第8回 Tokyo Jazug Night Ignite 2017 落穂拾い Storage編
 
第14回 KAIM M5StickV(K210)をDNNアクセラレータとして使おうとした試み
第14回 KAIM M5StickV(K210)をDNNアクセラレータとして使おうとした試み第14回 KAIM M5StickV(K210)をDNNアクセラレータとして使おうとした試み
第14回 KAIM M5StickV(K210)をDNNアクセラレータとして使おうとした試み
 
もしCloudStackのKVMホストでPCIパススルーできるようになったら
もしCloudStackのKVMホストでPCIパススルーできるようになったらもしCloudStackのKVMホストでPCIパススルーできるようになったら
もしCloudStackのKVMホストでPCIパススルーできるようになったら
 
[Azure Antenna] クラウドで HPC ~ HPC on Azure ~
[Azure Antenna] クラウドで HPC ~ HPC on Azure ~[Azure Antenna] クラウドで HPC ~ HPC on Azure ~
[Azure Antenna] クラウドで HPC ~ HPC on Azure ~
 
InnoDBのすゝめ(仮)
InnoDBのすゝめ(仮)InnoDBのすゝめ(仮)
InnoDBのすゝめ(仮)
 
[Cyber HPC Symposium 2019] Microsoft Azureによる、クラウド時代のハイパフォーマンスコンピューティング High...
[Cyber HPC Symposium 2019]  Microsoft Azureによる、クラウド時代のハイパフォーマンスコンピューティング High...[Cyber HPC Symposium 2019]  Microsoft Azureによる、クラウド時代のハイパフォーマンスコンピューティング High...
[Cyber HPC Symposium 2019] Microsoft Azureによる、クラウド時代のハイパフォーマンスコンピューティング High...
 
最近のJuju/MAAS について
最近のJuju/MAAS について最近のJuju/MAAS について
最近のJuju/MAAS について
 
Innodb Deep Talk #2 でお話したスライド
Innodb Deep Talk #2 でお話したスライドInnodb Deep Talk #2 でお話したスライド
Innodb Deep Talk #2 でお話したスライド
 
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
 
Slurmのジョブスケジューリングと実装
Slurmのジョブスケジューリングと実装Slurmのジョブスケジューリングと実装
Slurmのジョブスケジューリングと実装
 
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリWebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
 
ネットワーク ゲームにおけるTCPとUDPの使い分け
ネットワーク ゲームにおけるTCPとUDPの使い分けネットワーク ゲームにおけるTCPとUDPの使い分け
ネットワーク ゲームにおけるTCPとUDPの使い分け
 
20171220_hbstudy80_pgstrom
20171220_hbstudy80_pgstrom20171220_hbstudy80_pgstrom
20171220_hbstudy80_pgstrom
 
OpenStackを使用したGPU仮想化IaaS環境 事例紹介
OpenStackを使用したGPU仮想化IaaS環境 事例紹介OpenStackを使用したGPU仮想化IaaS環境 事例紹介
OpenStackを使用したGPU仮想化IaaS環境 事例紹介
 
Anthos を使ったエンタープライズ向けクラスタの設計とアップグレード戦略のススメ(CloudNative Days Tokyo 2021 発表資料)
Anthos を使ったエンタープライズ向けクラスタの設計とアップグレード戦略のススメ(CloudNative Days Tokyo 2021 発表資料)Anthos を使ったエンタープライズ向けクラスタの設計とアップグレード戦略のススメ(CloudNative Days Tokyo 2021 発表資料)
Anthos を使ったエンタープライズ向けクラスタの設計とアップグレード戦略のススメ(CloudNative Days Tokyo 2021 発表資料)
 
Mattermost インストールハンズオン 2018年8月時点
Mattermost インストールハンズオン 2018年8月時点Mattermost インストールハンズオン 2018年8月時点
Mattermost インストールハンズオン 2018年8月時点
 
(JP) GPGPUがPostgreSQLを加速する
(JP) GPGPUがPostgreSQLを加速する(JP) GPGPUがPostgreSQLを加速する
(JP) GPGPUがPostgreSQLを加速する
 
SSDとGPUがPostgreSQLを加速する【OSC.Enterprise】
SSDとGPUがPostgreSQLを加速する【OSC.Enterprise】SSDとGPUがPostgreSQLを加速する【OSC.Enterprise】
SSDとGPUがPostgreSQLを加速する【OSC.Enterprise】
 
GTC 2018 の基調講演から
GTC 2018 の基調講演からGTC 2018 の基調講演から
GTC 2018 の基調講演から
 
Flow in VR Funhouse MOD Kit
Flow in VR Funhouse MOD KitFlow in VR Funhouse MOD Kit
Flow in VR Funhouse MOD Kit
 

Similar to Video analytics seminar 2018

PowerToysを使ってみよう
PowerToysを使ってみようPowerToysを使ってみよう
PowerToysを使ってみようTomokazu Kizawa
 
Unity * スマートフォン開発で学んだこと
Unity * スマートフォン開発で学んだことUnity * スマートフォン開発で学んだこと
Unity * スマートフォン開発で学んだことKatsutoshi Makino
 
オブジェクトストレージを使ってイメージビューアを作ってみる
オブジェクトストレージを使ってイメージビューアを作ってみるオブジェクトストレージを使ってイメージビューアを作ってみる
オブジェクトストレージを使ってイメージビューアを作ってみるHironobu Saitoh
 
Movable type seminar 20120703
Movable type seminar 20120703Movable type seminar 20120703
Movable type seminar 20120703Six Apart
 
Perl で作るメディアストリーミングサーバー
Perl で作るメディアストリーミングサーバーPerl で作るメディアストリーミングサーバー
Perl で作るメディアストリーミングサーバーHideo Kimura
 
ストリーミングのげんざい
ストリーミングのげんざいストリーミングのげんざい
ストリーミングのげんざいTetsuya Morimoto
 
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜Takashi Uemura
 
オープンソースカンファレンス osc 2014 関西@京都 ownCloud説明
オープンソースカンファレンス osc 2014 関西@京都 ownCloud説明オープンソースカンファレンス osc 2014 関西@京都 ownCloud説明
オープンソースカンファレンス osc 2014 関西@京都 ownCloud説明Tetsurou Yano
 
Hinemosで簡単にdev opsをサポート!
Hinemosで簡単にdev opsをサポート!Hinemosで簡単にdev opsをサポート!
Hinemosで簡単にdev opsをサポート!Hinemos
 
Azure Media Services 大全
Azure Media Services 大全Azure Media Services 大全
Azure Media Services 大全Daiyu Hatakeyama
 
【Unite Tokyo 2018】Audio機能の基礎と実装テクニック
【Unite Tokyo 2018】Audio機能の基礎と実装テクニック【Unite Tokyo 2018】Audio機能の基礎と実装テクニック
【Unite Tokyo 2018】Audio機能の基礎と実装テクニックUnityTechnologiesJapan002
 
20130329 rtm2
20130329 rtm220130329 rtm2
20130329 rtm2openrtm
 
2015 0807 ConoHa I am the bone of the OpenStack API CLI tool
2015 0807 ConoHa I am the bone of the OpenStack API CLI tool2015 0807 ConoHa I am the bone of the OpenStack API CLI tool
2015 0807 ConoHa I am the bone of the OpenStack API CLI toolNaoto Gohko
 
Frontrend vol.7 html5 audio
Frontrend vol.7   html5 audioFrontrend vol.7   html5 audio
Frontrend vol.7 html5 audioKei Funagayama
 
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)Toshiharu Sugiyama
 

Similar to Video analytics seminar 2018 (20)

PowerToysを使ってみよう
PowerToysを使ってみようPowerToysを使ってみよう
PowerToysを使ってみよう
 
Unity * スマートフォン開発で学んだこと
Unity * スマートフォン開発で学んだことUnity * スマートフォン開発で学んだこと
Unity * スマートフォン開発で学んだこと
 
オブジェクトストレージを使ってイメージビューアを作ってみる
オブジェクトストレージを使ってイメージビューアを作ってみるオブジェクトストレージを使ってイメージビューアを作ってみる
オブジェクトストレージを使ってイメージビューアを作ってみる
 
DLL読み込みの問題を読み解く
DLL読み込みの問題を読み解くDLL読み込みの問題を読み解く
DLL読み込みの問題を読み解く
 
最新UE4タイトルでのローカライズ事例 (UE4 Localization Deep Dive)
最新UE4タイトルでのローカライズ事例 (UE4 Localization Deep Dive)最新UE4タイトルでのローカライズ事例 (UE4 Localization Deep Dive)
最新UE4タイトルでのローカライズ事例 (UE4 Localization Deep Dive)
 
Movable type seminar 20120703
Movable type seminar 20120703Movable type seminar 20120703
Movable type seminar 20120703
 
Xebra
XebraXebra
Xebra
 
Perl で作るメディアストリーミングサーバー
Perl で作るメディアストリーミングサーバーPerl で作るメディアストリーミングサーバー
Perl で作るメディアストリーミングサーバー
 
RPAって何、どんなことできるの
RPAって何、どんなことできるのRPAって何、どんなことできるの
RPAって何、どんなことできるの
 
ストリーミングのげんざい
ストリーミングのげんざいストリーミングのげんざい
ストリーミングのげんざい
 
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜
 
オープンソースカンファレンス osc 2014 関西@京都 ownCloud説明
オープンソースカンファレンス osc 2014 関西@京都 ownCloud説明オープンソースカンファレンス osc 2014 関西@京都 ownCloud説明
オープンソースカンファレンス osc 2014 関西@京都 ownCloud説明
 
TeamFileご提案資料
TeamFileご提案資料TeamFileご提案資料
TeamFileご提案資料
 
Hinemosで簡単にdev opsをサポート!
Hinemosで簡単にdev opsをサポート!Hinemosで簡単にdev opsをサポート!
Hinemosで簡単にdev opsをサポート!
 
Azure Media Services 大全
Azure Media Services 大全Azure Media Services 大全
Azure Media Services 大全
 
【Unite Tokyo 2018】Audio機能の基礎と実装テクニック
【Unite Tokyo 2018】Audio機能の基礎と実装テクニック【Unite Tokyo 2018】Audio機能の基礎と実装テクニック
【Unite Tokyo 2018】Audio機能の基礎と実装テクニック
 
20130329 rtm2
20130329 rtm220130329 rtm2
20130329 rtm2
 
2015 0807 ConoHa I am the bone of the OpenStack API CLI tool
2015 0807 ConoHa I am the bone of the OpenStack API CLI tool2015 0807 ConoHa I am the bone of the OpenStack API CLI tool
2015 0807 ConoHa I am the bone of the OpenStack API CLI tool
 
Frontrend vol.7 html5 audio
Frontrend vol.7   html5 audioFrontrend vol.7   html5 audio
Frontrend vol.7 html5 audio
 
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)
 

More from Masaaki Nabeshima

ストリーミングサービス研究グループ
ストリーミングサービス研究グループストリーミングサービス研究グループ
ストリーミングサービス研究グループMasaaki Nabeshima
 
セキュリティ管理 入門セミナ
セキュリティ管理 入門セミナセキュリティ管理 入門セミナ
セキュリティ管理 入門セミナMasaaki Nabeshima
 
IPv4 IPv6 Multi Protocol Media Player
IPv4 IPv6 Multi  Protocol Media PlayerIPv4 IPv6 Multi  Protocol Media Player
IPv4 IPv6 Multi Protocol Media PlayerMasaaki Nabeshima
 
国内トラフィックエンジニアリングの現状
国内トラフィックエンジニアリングの現状国内トラフィックエンジニアリングの現状
国内トラフィックエンジニアリングの現状Masaaki Nabeshima
 
サイマルキャスト コストと可能性についての考察
サイマルキャスト コストと可能性についての考察サイマルキャスト コストと可能性についての考察
サイマルキャスト コストと可能性についての考察Masaaki Nabeshima
 
海賊版対策:CDN事業者からの視点
海賊版対策:CDN事業者からの視点海賊版対策:CDN事業者からの視点
海賊版対策:CDN事業者からの視点Masaaki Nabeshima
 
ストリーミング視聴解析の分類(ドラフト20180718)
ストリーミング視聴解析の分類(ドラフト20180718)ストリーミング視聴解析の分類(ドラフト20180718)
ストリーミング視聴解析の分類(ドラフト20180718)Masaaki Nabeshima
 
ストリーミング用マルチCDN
ストリーミング用マルチCDNストリーミング用マルチCDN
ストリーミング用マルチCDNMasaaki Nabeshima
 
ストリーミング視聴解析の基礎セミナー(続き)
ストリーミング視聴解析の基礎セミナー(続き)ストリーミング視聴解析の基礎セミナー(続き)
ストリーミング視聴解析の基礎セミナー(続き)Masaaki Nabeshima
 
CDNとCDSPビジネスの動向と展望
CDNとCDSPビジネスの動向と展望CDNとCDSPビジネスの動向と展望
CDNとCDSPビジネスの動向と展望Masaaki Nabeshima
 

More from Masaaki Nabeshima (20)

vMVPDの動向について
vMVPDの動向についてvMVPDの動向について
vMVPDの動向について
 
Open Caching Update
Open Caching UpdateOpen Caching Update
Open Caching Update
 
ストリーミングサービス研究グループ
ストリーミングサービス研究グループストリーミングサービス研究グループ
ストリーミングサービス研究グループ
 
セキュリティ管理 入門セミナ
セキュリティ管理 入門セミナセキュリティ管理 入門セミナ
セキュリティ管理 入門セミナ
 
ATSC 3.0, MMT, Multicast
ATSC 3.0, MMT, MulticastATSC 3.0, MMT, Multicast
ATSC 3.0, MMT, Multicast
 
IPv4 IPv6 Multi Protocol Media Player
IPv4 IPv6 Multi  Protocol Media PlayerIPv4 IPv6 Multi  Protocol Media Player
IPv4 IPv6 Multi Protocol Media Player
 
国内トラフィックエンジニアリングの現状
国内トラフィックエンジニアリングの現状国内トラフィックエンジニアリングの現状
国内トラフィックエンジニアリングの現状
 
サイマルキャスト コストと可能性についての考察
サイマルキャスト コストと可能性についての考察サイマルキャスト コストと可能性についての考察
サイマルキャスト コストと可能性についての考察
 
IPv4 IPv6 Media Player
IPv4 IPv6 Media PlayerIPv4 IPv6 Media Player
IPv4 IPv6 Media Player
 
IPv6 Survey 2019 Dec Update
IPv6 Survey 2019 Dec UpdateIPv6 Survey 2019 Dec Update
IPv6 Survey 2019 Dec Update
 
JP Web Sites IPv6 Survey
JP Web Sites IPv6 SurveyJP Web Sites IPv6 Survey
JP Web Sites IPv6 Survey
 
IPv6 Survey 2019
IPv6 Survey 2019IPv6 Survey 2019
IPv6 Survey 2019
 
海賊版対策:CDN事業者からの視点
海賊版対策:CDN事業者からの視点海賊版対策:CDN事業者からの視点
海賊版対策:CDN事業者からの視点
 
ストリーミング視聴解析の分類(ドラフト20180718)
ストリーミング視聴解析の分類(ドラフト20180718)ストリーミング視聴解析の分類(ドラフト20180718)
ストリーミング視聴解析の分類(ドラフト20180718)
 
ストリーミング用マルチCDN
ストリーミング用マルチCDNストリーミング用マルチCDN
ストリーミング用マルチCDN
 
ストリーミング視聴解析の基礎セミナー(続き)
ストリーミング視聴解析の基礎セミナー(続き)ストリーミング視聴解析の基礎セミナー(続き)
ストリーミング視聴解析の基礎セミナー(続き)
 
ISP CDN draft2
ISP CDN draft2ISP CDN draft2
ISP CDN draft2
 
CDNの必要性と将来性
CDNの必要性と将来性CDNの必要性と将来性
CDNの必要性と将来性
 
CDNとCDSPビジネスの動向と展望
CDNとCDSPビジネスの動向と展望CDNとCDSPビジネスの動向と展望
CDNとCDSPビジネスの動向と展望
 
P2P型CDN
P2P型CDNP2P型CDN
P2P型CDN
 

Recently uploaded

【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)Hiroki Ichikura
 
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案sugiuralab
 
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?akihisamiyanaga1
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものですiPride Co., Ltd.
 
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdfクラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdfFumieNakayama
 
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...博三 太田
 
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)UEHARA, Tetsutaro
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNetToru Tamaki
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Yuma Ohgami
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdftaisei2219
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...Toru Tamaki
 
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineerYuki Kikuchi
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A surveyToru Tamaki
 
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdfAWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdfFumieNakayama
 

Recently uploaded (14)

【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
 
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
 
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
 
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdfクラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
 
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察  ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
 
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
 
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
 
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdfAWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
 

Video analytics seminar 2018

  • 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 操作関連
  • 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