社内の発表会で使用した資料です。 Web RTC とWeb Audio API を用いて、Web アプリのチェックインサービスを作りました。

1. Web RTC とWeb Audio API を用いた
Web技術のみのチェックインサービスの
技術的検証
GMOインターネット
次世代システム研究室

2. チェックインサービス
• ユーザを店舗に誘導するO2Oサービス
• インセンティブにより来店誘導
• 具体例
– GMOチェックイン、スマポ、楽天チェックなど

3. GMOチェックイン
• 対応店舗数：約1,800
• Android, iOS アプリのためのSDKを提供
• 来店検知：iBeacon を利用

4. 他のチェックインサービス
• スマポ
– Android, iOS アプリ
– 来店検知：iBeacon, 超音波
• 楽天チェック
– Android, iOS アプリ
– 来店検知：iBeacon, 超音波

5. iBeacon とは
• Bluetooth Low Energy (BLE) ビーコンの一種
• UUID, Major, Minor により識別
• 詳細はブログ
– http://recruit.gmo.jp/engineer/jisedai/blog/ibeac
on-dev1/
– http://recruit.gmo.jp/engineer/jisedai/blog/andro
id5-scan-ble/

6. 超音波
• 超音波は振動数が毎秒2万ヘルツ以上で定
常音として耳に感じない音 (広辞苑)
• 18kHz 以上を利用することが多い
• 対応スマホが多い
– センサーがマイクのため

7. 問題点
• ネイティブアプリである
– インストールが必要
– Google, Apple のプラットフォーム上である
• 専用デバイスが必要

8. 提案
• Web 技術のみのチェックインサービス
– Web アプリである
– ブラウザ以外不要

9. 全体概要
超音波
Web Audio API
Web RTC
音声データ
成果通知

10. Web RTC
• Web Real-Time communication
• ブラウザでリアルタイムなコミュニケーション
を行うためのプロトコル
• ブラウザ同士のP2P 接続
• UDP/IP を使用
• ビデオ会議システムなどに応用
動画、音声など

11. 対応ブラウザ
出典：http://caniuse.com/#feat=rtcpeerconnection

12. Web RTC
大きく分けると2つの技術に分けられる
1. メディアへのアクセス
– 主にカメラ、マイク
2. P2P 通信のための仕組み
Web チェックインサービスではマイクを利用しているが、
Web RTC の説明のために、カメラを用いる

13. メディアへのアクセス

14. メディアへのアクセス
カメラの映像のストリーム
データを取得する

15. メディアへのアクセス
取得するローカルメ
ディアを指定

16. メディアへのアクセス
動画を表示するた
めのvideo タグ
動画ストリームを
流し込む

17. 通信確立までの流れ
1. index.html 1. index.html
2. SDP
3. ICE
4. 接続確立

18. SDP
• Session Description Protocol
– セッションを開始するための必要な情報
• メディアの種類、形式
• IPアドレス、ポート など

19. ICE
• Interactive Connectivity Establishment
– 通信経路
– 交換するのは候補

20. 自動接続
index.html
Web Socket
シグナリングサーバ

21. NAT 越え
• ブラウザが知っている情報
– ローカルIP、割り当てたUDPポート
• 必要な情報
– グローバルIP、外部に向けたUDPポート
SDP : { IP:192.168.0.0, …}

22. NAT 越え
SDP : { IP:133.130.1.1, …}
133.130.1.1 153.122.1.1
STUN サーバ

23. Web RTC まとめ
• 容易にビデオ会議システムを作成
– 今回のデモではHTML とJavaScript を合わせて
200行程度
• STUN サーバを利用してNAT 超え

24. Web Audio API
• オーディオの処理のためのJavaScript API
• ノードをつなげて音声を作成
INPUT EFFECT DESTINATION
Audio Context

25. 対応ブラウザ
出典：http://caniuse.com/#feat=audio-api

26. 音声作成
Oscillator DESTINATION
Audio Context

27. 音声作成
Oscillator DESTINATION
Audio Context
Audio Context
作成

28. 音声作成
Oscillator DESTINATION
Audio Context
Oscillator 作成

29. 音声作成
Oscillator DESTINATION
Audio Context
ノード接続

30. 音声作成
Oscillator DESTINATION
Audio Context
音声出力スタート

31. 任意の音の発生
• 音声の波形や周波数を変更可能
• 複数の音声出力ノードを同一スピーカーに接
続することで合成可能
Oscillator
DESTINATION
Oscillator

32. 音の解析
INPUT Analyzer
Audio Context
• スペクトルデータ
• 信号の生データ
– Unit8Array, Float32Array

33. Web RTC との連携
• Web RTC でマイクから音を取得
Web RTC Analyzer
Audio Context

34. Web Audio API まとめ
• 任意の音声を発生可能
– 周波数
– 波形
– ミックス
• 解析も可能
– スペクトルデータ

35. 問題点
超音波
Web Audio API
Web RTC
音声データ
成果通知
7kHz 以上の
音声を取得で
きない
音声データを
解析できない

36. 全体まとめ
• Web 技術のみでチェックインサービス
• Web RTC
– ビデオ会議システムの作成
• Web Audio API
– 任意の音声を発生
– Web RTC と接続し、周囲の音声の解析

37. 課題
• 7kHz 以上の音声データの取得
• なりすまし防止のためのアルゴリズム
– 音声の変更
– 音声の一致確認

38. 参考
• WebRTC を使ってみよう！（HTML5 Expert.jp）
– https://html5experts.jp/series/webrtc-beginner/
• Web AudioAPI解説（g200kg Music&Software）
– http://www.g200kg.com/jp/docs/webaudio/