2015.12.28

Web RTC とWeb Audio API を用いた Web技術のみのチェックインサービスの 技術的検証


こんにちは。次世代システム研究室のT.M. です。

先日、社内で開催された研究発表会において、「Web RTC とWeb Audio API を用いた Web技術のみのチェックインサービスの 技術的検証」というタイトルで発表を行いました。
Web RTC に興味があったのですが、ありきたりなビデオ会議では面白くはないため、Web アプリのチェックインサービスを開発しました。発表資料は以下の通りです。この記事では、発表における発言部分などを補足して説明致します。




背景


ユーザを実店舗に誘導するチェックインサービスは私も開発に関わったGMOチェックインをはじめ多数ありますが、それらの多くはネイティブアプリです。ネイティブアプリには、ネイティブアプリの問題点があり、それを解消するためにWeb 技術のみでチェックインサービスを作りました。
ネイティブアプリの問題点は、インストールが必要であったり、Google やApple のプラットフォーム上であったり、Android とiOS の両対応が必要であったりします。それらの解決のために、Web アプリで作りました、と言いたかったのですが、Web RTC はiPhone Safari で利用できないため、両対応が不要ではなく、iPhone は対応できないという結果になっております。

全体概要


従来、実店舗に設置していた専用のデバイスであったところをブラウザにすることで、柔軟な対応が可能となります。iBeacon を利用したチェックインサービスですと、iBeacon のなりすましを防止する策が別に必要でしたが、専用デバイスではなく、ブラウザを利用することで、店舗に設置する発信側をインターネットに繋ぎ、なりすましを防止することができます。

Web RTC


チェックインでは音声を利用するということで、メディアとしてマイクを利用しますが、発表ではデモを含めて説明する関係上、カメラのほうが都合がよく、ビデオ通話を題材にWeb RTC の説明をしました。
発表では、以下のデモを行いました。
  • PC のカメラへのアクセスデモ
  • SDP,ICE を手動で交換して接続デモ
  • シグナリングサーバを用いた自動接続デモ
  • NAT 越え失敗デモおよびSTUN サーバを用いたNAT越え成功デモ

HTML とJavaScript を合わせて200行程度で、とても簡単に実装することができました。P2P 通信を利用して、安価に面白いものが作れるかと思います。

Web Audio API


簡単に音声の作成や解析できるということを、デモを交えてWeb Audio API の説明をしました。
発表では、以下のデモを行いました。
  • 単純な音声の作成デモ
  • 周波数を変更説明のためのモスキート音作成デモ
  • 複数の周波数の合成デモ
  • Web RTC によるマイク接続をして周囲の音声の解析デモ

Web Audio API はAPI が多く、ほんの一部しか触ることができませんでした。また、解析については、音声解析に関する基礎知識がないと難しく、深く理解することができませんでした。

まとめ


提案するチェックインでは、技術的に課題が多く残りました。中でも原因がわからないのは、Android Chrome で7kHz 以上の音声を解析できないということです。この問題点は解決できずに残っています。
また、店舗を特定する方法やその店舗に確かに来店したということを確定する具体的方法が確立することができませんでした。これらの問題点は継続的に調査、検証を行いたいと思います。


次世代システム研究室では、アプリケーション開発や設計を行うアーキテクトを募集しています。アプリケーション開発者の方、次世代システム研究室にご興味を持って頂ける方がいらっしゃいましたら、ぜひ 募集職種一覧 からご応募をお願いします。

皆さんのご応募をお待ちしています。