Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

動画視聴ビーコンを Azure Event Hubに入れて Power BIで解析

841 views

Published on

IoT LT 36

Published in: Technology
  • Be the first to comment

動画視聴ビーコンを Azure Event Hubに入れて Power BIで解析

  1. 1. 動画視聴ビーコンを Azure Event Hubに入れて Power BIで解析 ~ブラウザから Azure Event/IoT Hubを叩く方法~ IoT LT 36 2018年2月14日 鍋島 公章
  2. 2. • 動画ストリーミングの視聴解析 • ビーコン型解析が主流 • 再生開始(playing) • 再生中(timeupdate) • 終了(ended)等 • 専用の解析系:Adobe、ベンチャー系 • 発展途上 • 汎用解析系にビーコン入れてみた • Azureで上手く行った:今回のお話 • ブラウザから Event/IoT Hubを叩く方法 • 詳細について • ストリーミング視聴解析の基礎セミナー • 3月15日(木)、Jストリーム本社(芝公園) 本日のお話(アウトライン) HTML5 Video Player 視聴解析サーバ ストリーミング サーバ 動画 ビーコン ブラウザ
  3. 3. • Amazon AWS: 柔軟だが作りこみが大変 • Microsoft Azure: 動けば一番簡単 • 課題:ブラウザからEvent/IoT Hubへのイベント投入 • Javascriptのクロスドメイン問題 • Javascriptによるアクセスキー(Shared Access Signatures, SAS) 生成 解析環境と課題
  4. 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. 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. 6. • 基本設定 • かませるだけ(パススルー) Function Apps Proxy Event Hub URL Function Apps Proxy URL
  7. 7. • クロスドメイン(CORS)設定 Function Apps Proxy *設定(無条件に許可)
  8. 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. 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. 10. • 簡易グラフ Time Series Insight イベント毎の発生回数を表示
  11. 11. • リアルタイム解析 • 例 • 同時接続数 • 再生開始数 • 再生終了数 • SAQL • Stream Analytics Query Language Streaming Analytics Job SAQLによる分析
  12. 12. • ビジネスインテリジェンス • 各種グラフ、解析 Power BI 青:再生開始 黄色:同時接続数 ピンク:再生終了
  13. 13. • 日時 • 2018年3月15日(木)16:00~17:30 (受付開始 15:45) • 会場 • 株式会社Jストリーム 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/ ストリーミング視聴解析の基礎セミナー

×