IoT LT 36

1. 動画視聴ビーコンを
Azure Event Hubに入れて
Power BIで解析
~ブラウザから Azure Event/IoT Hubを叩く方法～
IoT LT 36
2018年2月14日
鍋島 公章

2. • 動画ストリーミングの視聴解析
• ビーコン型解析が主流
• 再生開始(playing)
• 再生中(timeupdate)
• 終了(ended)等
• 専用の解析系：Adobe、ベンチャー系
• 発展途上
• 汎用解析系にビーコン入れてみた
• Azureで上手く行った：今回のお話
• ブラウザから Event/IoT Hubを叩く方法
• 詳細について
• ストリーミング視聴解析の基礎セミナー
• 3月15日(木)、Jストリーム本社(芝公園)
本日のお話（アウトライン）
HTML5
Video
Player
視聴解析サーバ
ストリーミング
サーバ
動画
ビーコン
ブラウザ

3. • Amazon AWS: 柔軟だが作りこみが大変
• Microsoft Azure： 動けば一番簡単
• 課題：ブラウザからEvent/IoT Hubへのイベント投入
• Javascriptのクロスドメイン問題
• Javascriptによるアクセスキー(Shared Access Signatures, SAS) 生成
解析環境と課題

4. • 概要
• ブラウザは、Javscriptをダウンロードしたドメインのみに通信を許す
• 他ドメインへの通信
• 無条件に許すとセキュリティ上問題(悪意を持った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"

5. • 環境
Azure ビッグデータ
Function
Apps
HTML5
Video
Player
Event
Hub
Streaming
Analytics
Job
Time
Series
Insight
SQL
Server
Power
BI
Storage
Reverse Proxy イベント受付
バッファ
リアルタイム
処理 (SAQL)
生データ保存簡易グラフ
ビジネス
インテリジェンス
データベース
CORSヘッダ生成
(クロスドメイン対応)SAS生成

6. • 基本設定
• かませるだけ(パススルー)
Function Apps Proxy
Event Hub URL
Function Apps Proxy URL

7. • クロスドメイン(CORS)設定
Function Apps Proxy
*設定(無条件に許可)

8. • Javascriptコード
• var getSAS = function(keyName, key, endPoint) {
• var expiry = Math.floor(new Date().getTime() / 1000) + 3600 ;
• var encodedURI = encodeURIComponent(endpoint)
• var $str2 = encodedURI + "¥n" + expiry;
• var sha256 = new jsSHA('SHA-256', 'TEXT');
• sha256.setHMACKey(key,'TEXT');
• sha256.update($str2);
• var sig = sha256.getHMAC('B64');
• sig = encodeURIComponent(sig);
• var sas = “SharedAccessSignature sig=“ + sig + “&se=“ +
expiry+”&skn=“+keyName+”&sr=“ + encodedURI;
• return sas;
• }
SAS (Shared Access Signature)

9. • 送信部分
• var sas = getSAS("player“,
"Ak3t2SuZY2EqNkj6LCjMkxKgGHPHwl16UKjFVfzQebE=",
"https://xxx.servicebus.windows.net/video/publishers/player/messages";);
• var xmlHttpRequest = new XMLHttpRequest();
• $target = "https://xxx.azurewebsites.net/video/publishers/player/messages";
• xmlHttpRequest.open("POST", $target, true);
• xmlHttpRequest.setRequestHeader('Content-
Type',"application/atom+xml;type=entry;charset=utf-8");
• xmlHttpRequest.setRequestHeader("Authorization", sas);
• xmlHttpRequest.send(JSON.stringify(data));
イベント送信(REST)
Event Hub URL
Function Apps Proxy URL
Key Name Key
Authorization Header

10. • 簡易グラフ
Time Series Insight
イベント毎の発生回数を表示

11. • リアルタイム解析
• 例
• 同時接続数
• 再生開始数
• 再生終了数
• SAQL
• Stream
Analytics
Query
Language
Streaming Analytics Job
SAQLによる分析

12. • ビジネスインテリジェンス
• 各種グラフ、解析
Power BI
青：再生開始
黄色：同時接続数
ピンク：再生終了

13. • 日時
• 2018年3月15日（木）16:00～17:30 (受付開始 15:45)
• 会場
• 株式会社Ｊストリーム 7階(東京都港区芝2-5-6 芝256スクエアビル)
• 内容
• プレイヤーの内部イベント詳細(HTML5およびVideo.jsを題材)
• プレイヤーにおけるビーコン生成方法
• 汎用イベント管理システム(Microsoft Azure Event/IoT Hub)におけるビーコン
受付方法
• 汎用ビックデータ解析プラットフォーム(Microsoft Time Series Insight、Power
BI)によるイベントの可視化および解析方法
• MQTTによるバックエンドとプレイヤーの両方向接続
• 申し込み
• https://connpass.com/event/79604/
ストリーミング視聴解析の基礎セミナー