Googleドキュメントの音声入力と、Web Speech APIの音声入力の比較検証
こんにちは。iwatendoです。
Googleドキュメントで音声入力ができる事は有名だと思いますが、自作した音声入力チャットツール(Talk To CSV)に比べて、どれくらいの音声入力での変換精度に違いがあるか検証してみました。
「Talk To CSV」は Web Speech API を利用したサービスです。ブラウザがGoogle Chromeであれば無料で利用できるAPIであり、有料の音声入力APIに比べて変換精度は低いのではないかと考えられるのですが、同じく無料で利用できるGoogleドキュメントと比較して違いがあるか気になった為です。
入力環境が違う場合、公平な比較ができない為、同一のPC、同一のマイク、同一の入力での比較を行います。単純にGoogleドキュメントとTalk To CSVを２つを起動して音声入力するだけの話なのですが、実は普通の起動方法ではこの検証はできません。
例えば、別々のGoogleドキュメントを複数のタブで起動して同時に音声入力しようとしても、２つ目の音声入力をONにすると、１つ目の音声入力がOFFになってしまいます。これと同様に、Web Speech APIを利用した音声入力ができるサイトは同時に音声入力ができません。「Talk To CSV」もそうなのですが、エラー処理がしっかりと実装されていない為か、どちらの音声入力もできなくなるケースが多いようです。
更には、Googleドキュメントの音声入力と、Web Speech APIを利用した音声入力可能なサイトも同時に音声入力ができないようです。
但し、複数のGoogle Chromeを別設定で起動させている場合は、同時に音声入力が可能なようです。例えばWebサービスの開発者であれば、VSCodeを利用されている人も多いと思いますが、Debugger for Chromeで起動したChromeと、通常起動したChromeの２つを利用すれば同時に音声入力が可能となります。
その他の方法として、起動オプションを設定する事で比較的簡単に、Google Chromeの複数設定が可能となります。詳細については以下のサイトが参考になります。
・Google chromeで複数アカウントを使う方法 | パソコン工房 NEXMAG
・Chromeを複数(多重)起動する方法（ユーザごとに別設定のプロファイルを作成） | ぱーくん plus idea
今回は上記サイトを参考にして、別設定のプロファイルを作成した状態でGoogleドキュメントとTalk To CSVの同時音声入力検証を行いました。
また、マイクにはaudio-techicaのモノラルピンマイクを使用しました。
検証動画
Googleドキュメントの音声入力には何が使われているか不明なのですが、上記の比較検証結果を見た感じでは、ほぼ同じような変換がされているような印象を受けました。
若干の差異はありますが、個人的には、ほぼGoogleドキュメントの音声入力と同等の変換精度があると言えるのではないか、と思っています。
※「Talk To CSV」についての詳細は以下の記事に書いてあります。
それではまた。
Talk To Csv ：音声認識でチャットができて,会話の内容をCSV(Excel)に出力できるサービス作りました
スマホのWebカメラ映像を、簡単にPCのブラウザ上に表示するサービス
こんにちは iwatendoです。
今日はSkybejeというサービスに実装している機能の内、スマホのWebカメラ映像をPC上に表示する機能を紹介します。（この機能も Skyway を使用しています）
アプリのインストールやアカウント登録は不用で、以下のページのQRコードから、自分のPCにスマホのカメラ画像を表示したり、少人数向けのプライベート配信が可能です。
使用方法
- PC側でSkybeje プライベート配信をブラウザで開きます(Chrome推奨）
- PC側に表示されるQRコードをスマホで読み込みます。
- スマホ側でマイク／カメラへのアクセスを許可します。
- スマホ側で「配信開始」ボタンを押します。
- PC側に「接続ページ起動」というボタンが出てくるので押します。
これだけで、スマホのカメラ映像が表示されます。
プライベート配信について
「視聴URL」をコピーして伝える事で、少人数向けですがプライベート配信用途でも利用可能です。テレワークで音声通話やビデオ通話をしながら、同時にスマホのカメラ映像も気軽に配信したい場合等に利用できるかなと思ってます。
本気で配信したい場合は、別のアプリとかサービスを使いましょう。
最後に
私自身このサービスを、高い位置にある棚の奥を確認する為に使ったり、背中をちょっと怪我した時に絆創膏を張る時に使ったりしてました。
最近では、髪をセルフカットする際に後頭部や側頭部を確認する場合に使えるのでは？と考えています。一人暮らしの男性だと、三面鏡とか持って無いと思うのですが、PCとスマホは持っている人は多いと思われたので。
その他、ちなみにあまり綺麗なソースでは無いのですが、今回紹介したサービスはOSSとして公開しています。GitHub - iwatendo/skybeje
それでは、また。
音声通話やビデオ通話と併用し、音声認識で会話ログが取れるサービスを作ってみました
現在、音声通話やビデオ通話が可能なサービスは多数存在するのですが、会話の内容を音声認識で字幕表示したり、テキストとして残せるサービスはそれほど多くないように思います。（現状だと英語のみ対応というケースが多い気がします）
そのため、音声通話やビデオ通話と併用して利用する事で、日本語での会話内容をテキストで残せるサービスを作ってみました。
※2020/06/08 追記：サービスの名前変更しました。
使い方は簡単です。音声通話やビデオ通話をしている状態で
- 「Talk To CSV」にアクセス（簡易チャットルームが作られます）
- 上段の「招待URLをコピー」を押し、URLをクリップボードにコピーします。
（招待URLは起動のだびに毎回変わる事に注意してください） - 音声通話やビデオ通話の参加者に、そのURLを伝えます。
- 参加者全員にGoogle Chromeで、そのURLを開いて貰います。
- 開いて貰った後、一番左下の「音声認識OFF」をクリックしてONにします。
これだけで、各メンバーが喋った内容がテキストに変換されていきます。
起動した人の画面
起動した人は
- 接続している人数が分ります。
- 会話（チャット）ログがブラウザに記録されます（IndexedDBに保存）
- 会話（チャット）ログをCSVに出力できます。
- 会話（チャット）ログをブラウザから消去できます。
招待された人の画面
招待された側は、上部のメニュー部分は表示されません。
※CSV出力やメッセージクリアは招待された側は、現状できません。
音声認識について
Google Chromeに搭載されている Web Speech Api を使用しています。変換精度については、恐らく有料の音声認識サービスに比べて低いと思われます。他の音声認識サービスと比較したわけではありませんが、正しく変換できない事も多い印象です。
ゆっくり、はっきりと喋ると、ちゃんと認識される印象なんですが、実際の会議等で使用した場合には、実用レベルの変換がされるかどうか何とも言えないところです。
ですが、何も無いよりは、議事録作成が楽になるのではないかと思っています。
技術的な話
このサービスは、NTTコミュニケーションズのSkyWayを使用しています。
SkyWayはビデオ通話だけでなく、DataChannelと呼ばれる機能でデータ通信も可能です。このサービスはSkyWayのDataChannelを利用し、P2Pでのデータ通信を実現しています。また、会話ログはブラウザのデータベース（IndexedDB）に保存されます。
その為、会話（チャット）ログはNTTコミュニケーションズにも、私の公開サーバーにも保持されませんので安心して利用可能です。
※また、私自身も利用している人の会話ログが傍受できない仕組みとなっています。
それでは。
SkybejeでWebブラウザをチャットサーバーにする方法とチャットのしかた
こんにちは。iwatendoです。
今日は個人開発しているチャットツールの基本的な使い方を書いていきます。
起動方法
以下のサイトを開くだけで起動します （PC版のChrome専用）
上記ページはあくまでチャットサーバーの役割を担ってるだけなので、実際にチャットをするには、別のページを開く必要があります。ただし、上記のページがチャットサーバーなので、上記ページを閉じると当然チャットサーバーが停止し、チャットができなくなります。
チャットクライアントの起動方法
上部にある「チャットクライアント起動」を押すだけで、チャットクライアントが起動します。その隣にあるボタンは、接続する為のURLをクリップボードにコピーします。
※背景画像やチャットルームの名前は「編集」ボタンから変更可能です。
プロフィール編集
初回起動時は、プロフィール登録画面が表示されるので、名前とアイコンを設定してください。この設定は、左下の「プロフィール」ボタンからいつでも変更可能です。また、これらのプロフィール情報は、外部サーバーに登録される事は無く、全てあなたのブラウザ内に保存されます。Skybejeの開発者である私ですらデータを覗き見たり、編集したりする事はできません。
チャットのしかた
右下のテキストエリアにチャットメッセージを入力します。デフォルト設定では、Enterキーでメッセージ送信の動作となりますが、この動作は一番右下の「設定」ボタンから設定変更可能です（Enterキー押下時、改行とする事も可能です）
チャットへの招待
上段の「接続URLのコピー」を押すと、このチャットルームへの接続URLがクリップボードにコピーされますので、チャットへ招待したいメンバーに伝えてください。とりあえず一人で試してみたい方は、Google Chromeのシークレットウィンドウを立ち上げてURLを貼ってみてください。
Skybejeに実装してある機能について
正直な所、今の時代、SlackやDiscordを筆頭にして、便利なチャットツールが腐るほどあるので今更個人開発のチャットツールなんて・・と思うかも知れませんが、Skybejeは現在、以下のような機能を実装しています。
・複数のアイコンと、複数のアバターの登録
・簡易チャットBOT
・単方向のビデオ通話機能 / 画面共有機能
・外部サービスの表示
・音声認識（Web Apeech API）を利用したチャット入力
などなど。組み合わせると色々と面白い使い方ができるので、このブログで紹介していきたいと思います。
※この記事の背景画像は S-Hoshino.com 様のフリー壁紙を使用しています。
テキスト入力した文章をVoiceTextで音声合成して、SlackやDiscordのマイク入力に流してみました
始めに
この記事は以下のような人向けです。
- PC（Windows）で、SlackやDiscordを使用している人
- ビデオ／音声通話の参加時に、テキスト入力した内容を音声合成で喋らせたい人（別アプリにテキスト入力した内容を音声合成します。SlackやDiscordにテキスト入力した内容を喋らせるという意味では無いので注意）
- 音声合成のWebAPIの利用規約を読んで理解でき、ルールを守れる人
- ある日突然利用できなくなっても泣かない人
設定方法は結構面倒です。利用する為のハードルは高いと思います。
以前書いたブログ記事に、Discordのマイク入力に音声合成を利用したい場合はどうしたら良いかとコメントを頂いてました。私自身もそのような使い方をしたいと思っており、多少は需要はあるように思いましたのでまとめてみました。ただ、とりあえず試してみたい方でも、最後まで記事を読んでから使えるかどうか判断してもらった方が良いとは思います。
使用する音声合成サービス
恐らく有料版の方のWebAPIでも利用可能と思われますが、今回は無料版のWebAPIを使った方法を書いて行きます。ちなみに無料版で使用できる話者は以下の６人です。
- Show
- Haruka
- Hikari
- Takeru
- Santa
- Bear
ちょっとだけ技術的な話
Skybeje.SpeakerというWindowsのネイティブアプリ使います。
（HOYAのWebAPIを呼び出すプログラムでC#で作りました。オープンソースです）
以下はSlackやDiscordのマイクに音声が流れるまでの簡単なフローです。
- Skybeje.Speaker が、HOYAのWebAPIをコールして音声データを取得
- Skybeje.Speakerが、仮想スピーカーに対して音声を再生（※）
- NETDUETTOが、仮想スピーカーから仮想マイクに音声を流す（※）
- SlackやDiscord上のマイク入力デバイスに仮想マイクを選択する（※）
- SlackやDiscordのマイク入力に、仮想マイク経由で音声が流れる
（※）仮想スピーカー／仮想マイクという表現は正しくないかもしれません。
環境設定方法
１．YAMAHAの「NETDUETTO」をインストールする。
２．HOYAの「Voice Text Web API」の利用登録をする。
３．「Skybeje.Speaker」をダウンロードする。
ここからダウンロードできます。ダウンロードしたZipを解凍し、「Skybeje.Speaker.exe」をクリックすると「WindowsによってPCが保護されました」という青いパネルのメッセージ表示されて実行できないと思います。これは署名の無いWindowsアプリの為です。
パネル左側の「詳細情報」をクリックするのことで「実行」ボタンが表示されて起動できるようになります。一回その手順で実行すると、次回からは普通に起動できるようになるのですが「このアプリ本当に大丈夫なの？」と不安になると思いますし、そう思うのが当然です。ですが正式なコード証明書はSSL証明書よりも遥かに高いみたいで、ちょっとしたフリーソフトやOSSに適用するには厳しいのです。
不安な人は、プログラム自体は以下のGitHubに公開していますので、Visual Studioを使って自分でビルドしてexeを作るのが良いかなと思います。自分自身でビルドしたexeの場合は警告がでません。但しビルドの方法等は自分で調べてください。github.com
音声合成サービスの動作確認
Skybeje.Speakerを起動すると、以下の画面が表示されます。
- 普段音を再生しているスピーカーデバイスを選択します。
- 「ライン（Yamaha NETDUETTO Driver）」を選択します。
- HOYAのWebTextのAPIキーを入力します。
- 「Sample Voice」をボタンを押します。
Showの声で"VoiceTextの音声合成サンプルです"と①で選択したスピーカーから聞こえれば成功です
※ちなみに中央タブの「AITalk」は、DocomoのDeveloper support経由でのWebAPI利用が出来なくなった為、現在利用できなくなっています。
とりあえず Slack / Discordのマイクに音声を流す方法
サンプルボイス再生デバイスにて「NETDUETTO」を選択します。
Slackのマイク側にも「NETDUETTO」を選択します
※通常のマイクは無効になり喋っても相手には聞こえなくなる事に注意してください。
普通のビデオ通話に戻したい場合は設定を元に戻す必要があります。
Discordの場合、ユーザー設定の「音声・ビデオ」から
以下の入力デバイスに「NETDUETTO」を選択します
後は、Slackのビデオ通話やDiscordの音声通話の時に、Skybeje.Speakerのサンプルボイス（赤枠）の部分に、発言したい文章を入力して「Sample Voice」ボタンを押せばOKです。
マイクに音声を流しつつ、自分でも聞こえるようにする方法
NETDUETTOのデフォルトの設定だと、再生デバイスに「NETDUETTO」が選択されていると、自分自身には音声が聞こえなくなります。ちゃんと音声合成されているかのか、相手にどのように聞こえているか不安になると思いますので、マイクに音声を流しつつ自分でも音声を聞こえる設定にする方法です。
どこからでも構いませんがWindowsの「サウンドの設定」を開きます。
※ 画像ではコルタナに「サウンドの設定」と入力して開いています。
録音のライン（NETDUETTO）を選択します
「聴く」タブの「このデバイスを聴く」にチェックを入れるとSlackやDiscordのマイクに音声合成音を流しつつ、自分のPCのスピーカーからも音声合成音が聞こえるようになります。
Skybejeで音声合成を利用する
Skybeje.Speakerは名の通り、私が開発しているSkybeje（チャット／ビデオ通話サービス）で利用する事を目的として作ったツールです。Skybeje経由で使用するともっと便利で入力しやすい形にできるのですが、また色々と設定が必要になって面倒です。
大抵の人は、ここまでの設定で十分だと思われますので、Skybejeでの利用方法は別途また記事を書きたいと思います。
ちなみに共通設定の「クリップボードを監視」や、VoiceTextタブの「VoiceCode」というは、Skybejeで音声合成する為のものです。ですが、Skybejeを使わなくても、開発者の方であれば、入力補助の為のツールは結構簡単に作れると思います。
前述の設定が全て完了していて、音声合成ができる状態の人は「クリップボードを監視」にチェックをいれて、以下の文字列をコピーしてみてください。
{"Speaker":"Hikari", "Emotion":"Default", "EmotionLevel":"Default", "Volume":80, "Speed":90, "Pitch":100, "VoiceType":"VoiceText", "Message":"あとは分かるよね？"}
こんな感じの仕組みで、クリップボード経由で、Skybeje(ブラウザ)から音声合成音の指示をSkybeje.Spekaerに出して音声合成してます。
最後に
最初にも書きましたが、この方法はいつまで使えるか正直分かりません。
HOYAのVoiceTextも、基本的には有料版の利用を前提としたお試し用として公開しているように思います。またYAMAHAのNETDUETTOは、新サービスへの移行に伴い2020年秋頃にサービスを終了するそうです。www.netduetto.net
アプリ自体はダウンロード済みであればそのままこういった使い方はできるとは思われます。また新サービスのSYNCROOMでも同様の使い方ができる可能性もあるとは思います。いずれにしても今後どうなるかはちょっと分からないですね。
ただ、新型コロナウィルスの影響で、テレワークの人が一気に増えて、まさに「今」困っている人が多いだろうと思いました。小さい子供がいる家庭も多いでしょうし、様々な家庭の事情があって、仕事に関係の無いノイズが入るケースもあると思います。
そういった場合に、音声合成でテレワークに参加できれば、お互いに気を使わずに仕事に集中できるケースもあると思い、このようなブログ記事をまとめてみました。
Discordは仕事に使わんだろ！というツッコミもあるかも知れませんが、個人的にはDiscordでテレワークも有りなんじゃないかなと思っています。
以上。最後まで読んで頂き、ありがとうございました。
ChromeのIndexedDB(2.0)に、限界までデータを登録してみました
開発しているサービスでIndexedDBを使用しているのですが、現状のChromeの場合、どのくらいまでの容量を登録できるのか、また限界までデータ登録した場合、どのような動きになるのか不明だった為、検証してみました。
IndexedDB 2.0とは
ブラウザに実装されているデータベースです。
Indexed Database API 2.0 （日本語訳）
IndexedDBに限界までデータを登録してみました
IndexedDBに、大容量データを登録できるサイトを作成して検証しました。
https://skybeje.net/indexeddb_limit_test/
一応ソースはGitHubに置きました。
https://github.com/iwatendo/Indexeddb_limit_test
こんな感じです。
エラーハンドリングについてのメモ
上記を作っていて、気がついた点のメモです。
・データ登録できなかった場合、DBRequest側のエラーは発生しない。
・データ登録できなかった場合、DBTransactionの「onAbort」が呼ばれる。
・その際に DBTransaction.errorに「QuoteExceededError」がセットされます。
検証してわかった事
・一定容量を超えると、IndexedDBにデータ登録できなくなる。
・IndexedDBに登録できるデータ量は、環境によって変化する。
・１つのサイトで限界までIndexedDBに登録しても、他サイトに影響は無い様子。
検証内容の詳細
ストレージの容量が関係するらしいので、
4台のPC（うち一台はタブレット)で、ストレージを確認しつつ検証しました。
１台目 Windwos10 Home(64bit) Version 1709 / Chrome Version 64.0.3282.167
ストレージ Cドライブ 185G (残 64G) / Dドライブ 250GB(残 246GB)
約12GBで QuoteExceededError が発生
別ドメインにもテストサービスを配置して確認したところ、こちらも約12GBでQuoteExceededError が発生。最初に登録したサイトの12GBのデータは残ったままで、合計24GBのデータ登録できことになります。
また、念の為Dドライブを外して試しましたが結果は同じでした。
２台目 MacOS High Sierra 10.13.3 / Chrome Version 64.0.3282.167
ストレージ 121GB / 残 73GB
約7GBで QuoteExceededError 発生
こちらも別ドメインで、さらに7GB登録できる事を確認
３台目 Ubunth 16.04（スティックPC）/ Chrome Version 64.0.3282.167
ストレージ 26GB / 残 16GB
約1.1GBで QuoteExceededError 発生
4台目 Android 7.1.1 ( タブレット / Nexus9 ）/ Chrome Version 64.0.3282.137
ストレージ14.56GB / 残 7.43GB
約 688 MBで QuoteExceededError 発生
Chrome Developer Tools のクラッシュについてのメモ
IndexedDBに大容量データを登録しても問題なく使用できる事は確認しましたが、大容量データを登録したテーブルを、Developer Toolsで確認しようとすると、以下のようなメッセージが表示され、ブラウザがクラッシュする場合があるようです。
※メモリ8GBのPCに、128MB×50件=6.4GBのデータを登録して確認した時に発生。
IndexedDBの保存先についてのメモ
Windowsの場合、以下の場所に保存されるようです。
C:\Users\(ユーザー名)\AppData\Local\Google\Chrome\User Data\Default\IndexedDB
参考サイト：ChromeのIndexedDBの場所 (Mac・Windows) | EasyRamble
私は普段 Visual Studio Code + Debugger for Chromeで開発していますが
その場合の保存先は、以下の場所になるようです。
C:\Users\(ユーザー名)\AppData\Local\Temp\vscode-chrome-debug-userdatadir_9222\Default\IndexedDB
※数値部分は環境によって変わるかもしれません。
IndexedDBの手動削除について
前述のフォルダの下に、更にサイト毎にフォルダが生成されます。
http(s)_(URL)_(port番号).indexeddb.leveldb
一定サイズを超えるバイナリ(ArrayBuffer等)の場合は、blobに保存されます。
http(s)_(URL)_(port番号).indexeddb.blob
普段は特に意識する必要は無いと思いますが、今回いろいろ試してる際に Chrome側からテーブルを削除しても blobデータが消えない現象が発生しました。
仕方ないのでChromeを落とした状態で、手動でフォルダ(.leveldbと.blobの両方）を削除してみたところ、特に問題なく削除できました。あまり推奨はできませんが、同じような現象が発生した場合に、手動で削除してみても良いかもしれません。
さいごに
IndexedDBに大容量のデータを登録しても大丈夫かな？という漠然とした不安があったのですが、今回の検証で、まぁ大丈夫そうという印象になりました。他のブラウザでは検証してないですが、少なくてもChromeの場合は安定動作する感じです。
というわけで、今後もIndexedDBをガンガン使っていきたいと思います。
2018/03/07 追記
Google Chromeの場合、Developer Toolsで確認できるようになったみたいです。
