本記事は NECソリューションイノベータ Advent Calendar 2021 の12/1の記事です。
きっかけ
最近、LIFFを使ったWebアプリを作る機会が多く、カメラを使ったバーコードリーダーを作ったりしたため、マイクアクセスも同様に実装できるのか試したかったのがきっかけです。
先に結論
Chrome（Android）やMobile Safari（iOS）では動きましたが、LIFFブラウザではWeb Speech API(音声認識) が動作するところまで確認できませんでした。。
以下、調査した内容をまとめています。
Web Speech API とは
Web Speech API は、Webアプリケーション(ブラウザ)で音声を使った機能を提供するAPIであり、主に音声認識(Speech Recognition)と音声合成(SpeechSynthesis)いう2つの機能があります。
いくつかのクラウドサービスで音声を認識したりするサービスはありますが、WebSpeechAPIはブラウザ上の機能であるため、サーバー側の用意が不要になる点がメリットです。 参考
音声認識(Speech Recognition)動作デモ
公開されているデモで実際に動作を確認してみましょう。２つのデモのURLを以下に記載します。
ブラウザ対応状況
WebSpeechAPIはブラウザ上の機能と書きましたが、全てのブラウザで対応しているわけではありません。こちらのようにブラウザによって対応状況が異なります。
LIFF とは
LINE Front-end Framework（LIFF）は、LINEが提供するウェブアプリのプラットフォームです。自分で作ったWebアプリをLINE上で動作させることができ、このプラットフォームで動作するWebアプリを、LIFFアプリと呼びます。 参考
LIFFブラウザ
LIFFはWebアプリとして動作しますが、chromeやsafariといったブラウザで動作するわけではありません。デフォルトではLIFFブラウザという、iOSであればWKWebview、AndroidであればAndroid Webviewに準拠した実装になっているようです。また、v2からは機能の制限等はありますが、外部ブラウザで開くことも可能です。参考
LIFFブラウザで動かしてみた
今回LIFFアプリを作成する手順は省略しますが、上記のデモ等を参考に実装したWebアプリを動作させてみた結果を以下に記載します。
| Chrome | Safari | Mobile Safari | LINE | |
|---|---|---|---|---|
| PC(Mac) | ○ | × | - | - |
| iphone | × | - | ○ | × |
| Android | ○ | - | - | × |
- 端末(行)とブラウザ(列)のマトリクスです
- 端末のバージョンはMacが11.6、iphoneが14.8.1、Androidが11です。
- 列に記載しているブラウザの名前はua-parser-jsというライブラリのgetBrowserを使って取得しています。LINEとなっている部分がLIFFブラウザのことです。
- ×の部分は共通してマイク許可のダイアログが出てこなかったです。
- どの端末でもいずれかのブラウザでは動作しましたが、共通的に動作するブラウザはありませんでした（私の実装自体が悪い可能性は大です）
参考
MDN Web Docs
- https://developer.mozilla.org/ja/docs/Web/API/Web_Speech_API
- https://developer.mozilla.org/ja/docs/Web/API/SpeechRecognition#browser_compatibility
LINE Developers
- https://developers.line.biz/ja/docs/liff/overview/
- https://developers.line.biz/ja/docs/liff/development-guidelines/
twilio BLOG