video player meets MQTT

1. ビデオプレイヤーと
バックエンドのMQTT接続
リアルタイム視聴解析と両方向通信
2018年4月25日
鍋島 公章
1Copyright (c) kosho.org

2. • 視聴解析：盛り上がってきてる
• QoE (Quality of Experiment)競争：VoD会社の差別化要因
• 最低でも秒単位(望ましくは0.1秒単位)の視聴解析：短尺の動画広告
• ビッグデータ解析：CRM、DMP(Data Management Platform)連携
• 解析サービス・プロダクト：いまいち
• プレイヤーの内部イベント：詳しい情報は取れない、標準化もまだ
• デファクト的な解析サービス：まだ無し、Adobe Analytics、ベンチャー各社
• OTT各社：作りこんだシステムを利用
• 汎用解析系：IoTを代表に盛り上がってる
• プロトコル：MQTT、CoAP、AMQP
• ブローカー：Mosquitto、AWS IoT Core、Azure IoT Hub
• リアルタイム解析：Spark、 SAQL
• ビジネスインテリジェンス：いろいろ
ストリーミングの視聴解析
2
Copyright (c) kosho.org

3. • ビデオプレイヤーの内部イベントを、汎用解析系に入れてみた
• HTML 5 Video + Paho MQTT + Azure IoT Hub + SAQL + Power BI
• デモPlayer
Copyright (c) kosho.org
3
本日のライトニング・トーク
https://tech.jstream.jp/analytics/seminar02/play-sub.php
メッセージ表示あり版
Power BI

4. • 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 メディアダウンロードがアイドル
4
Copyright (c) kosho.org

5. • 内部イベントに対する処理割り当て
<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
5
プレイヤー処理
イベント名リスト
処理割り当て

6. • プロトコル
• プロトコルフォーマット：軽量
Copyright (c) kosho.org
6
MQTT (Message Queueing Telemetry Transport)
MQTTコントロール
MQTTコントロール
固定（2バイト）ヘッダ
ペイロード
MQTTセッション
可変ヘッダ
グループ コントロール 概要
セッション管理
CONNECT 接続要求
CONNACK 接続確認応答
DISCONNECT クライアント切断
Publish
PUBLISH パブリッシュ
PUBACK パブリッシュ確認
PUBREC パブリッシュ受信
PUBREL パブリッシュのリリース
PUBCOMP パブリッシュ完了
Subscribe
SUBSCRIBE サブスクライブ
SUBACK サブスクライブ確認
UNSUBSCRIBE アンサブスクライブ
UNSUBACK アンサブスクライブ確認
PING
PINGREQ Ping要求
PUGRESP Ping確認

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

8. • REST API＋HTTP
• リソース名＝URI
Copyright (c) kosho.org
8
対比：REST HTTP
操作 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)

9. • Azureによる解析環境
Azure ビッグデータ
HTML5
Video
Player
IoT
Hub
Streaming
Analytics
Job
Device
Explorer
SQL
Server
Power
BI
Storage
ブローカー
リアルタイム
処理 (SAQL)
生データ保存
簡易グラフ
ビジネス
インテリジェンス
データベース
9
Copyright (c) kosho.org
Time
Series
Insight
簡易管理
MQTT
over Websocket
over TLS

10. • 役割
• デバイスからのメッセージを受け取り、バックエンド(解析系)に引き渡す
• 一般的なMQTTブローカーとの違い
• 全デバイス(プレイヤー)に対する認証が必要
• UIDの使いまわしはできない：前の接続は強制接続
• 認証：SAS (Shared Access Signature)、全デバイス共用SASは使える
• サンプルプログラム
• cl01～cl49までのUIDを用意し、各接続に割り当て
• uid-cl.php
• デバイス間のメッセージ交換はできない
• D2C (Device to Cloud)とC2D (Cloud to Device)
• クラウドからデバイスへの一斉配信はできず、個別送信のみ可能
• サンプルプログラム
• サーバ側で接続されているUIDを検索し、それぞれに対しメッセージを個別送信
• send-c2d.js
Copyright (c) kosho.org
10
Azure IoT Hub

11. • プレイヤー設定
• プレイヤーからのビーコン送信
• message.destinationName = "devices/all/messages/events/";
• クラウドからのメッセージ受信
• client.subscribe("devices/"+$uid+"/messages/devicebound/#");
• クラウド設定
• ビーコン受信
• 自動的に全ビーコンがStream Analytics Jobに投げ込まれる
• メッセージ送信
• serviceClient.send(uid, message,printResultFor('send'));
Copyright (c) kosho.org
11
Azure IoT Hub

12. • 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
12
Stream Analytics Job

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

14. • 同時視聴数
• アルゴリズム
• 単位時間(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
14
SAQL解析：サンプル

15. • ビジネスインテリジェンス
• 各種グラフ、解析
Power BI
15
Copyright (c) kosho.org

16. • ビデオ視聴解析勉強会
• https://video-analytics.connpass.com/
• 定期的に勉強会を開催します
• 内容
• 解析系プロダクトの紹介
• 解析サービス、プレイヤー向けSDK
• 規格・標準
• ITU-T QoE標準(IPTV向け)
• P.1201.1、P.1201.2、P.1202.1、P.1202.2
• W3C Web Performance Working Group
• 視聴解析の手法
• クラスタ分析/RFM分析、チャーン分析、ABC分析、アソシエーション分析
• KPI（認知、検討、行動）、属性分析、DMP連携分析、パス解析、アトリビューション分析
おわりに
16
Copyright (c) kosho.org