リアルタイムに音声認識して字幕をオーバーレイしてみた【Python】

TLを眺めていたら [@1heisuzuki](https://twitter.com/1heisuzuki) 氏が音声認識からWebカメラ映像への字幕合成までをChromeだけで実行する[Webページ](https://1heisuzuki.github.io/speech-to-text-webcam-overlay/)の紹介をしている[ツイート](https://twitter.com/1heisuzuki/status/1263118851744489472?s=20)が流れてきた． 
tkinterを使ってより汎用的なシステムを作れるのではないか?と思い,雰囲気で再現してみました.  
# 実行例
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">リアルタイム音声認識で字幕を付けるシステム<a href="https://t.co/B04xm7yjZQ">https://t.co/B04xm7yjZQ</a><br>に影響されて，ウィンドウに認識結果をオーバーレイするアプリケーションを作りました<br>字幕をつけながらPCを操作できるので，共有画面に自分を映したカメラと別アプリを同時に表示することもできます<a href="https://t.co/tYS7ET4zc0">https://t.co/tYS7ET4zc0</a> <a href="https://t.co/1Ud3BmV7k0">pic.twitter.com/1Ud3BmV7k0</a></p>&mdash; teahat (@T3ahat) <a href="https://twitter.com/T3ahat/status/1264638352743002112?ref_src=twsrc%5Etfw">May 24, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#ソースコード  
[TranScriptoWindow](https://github.com/T3aHat/TranScriptoWindow)にあります.  
  
# 環境  
* Windows10  
tkinterの`-transparentcolor`がかなり環境依存なため,windows環境以外では動作しません.  
* Python 3.7  
* pyaudio 0.2.11  
* Google Cloud SDK  

# 使用方法  
`$python transcriptowindow.py`を実行し,`start`ボタンを押してPCに向かって話しかけるのみです.  

# 機能 
リアルタイムに音声認識した結果を字幕としてウィンドウにオーバーレイします.
起動したまま別のタブを操作でき,あらゆるコンテンツに字幕をつけたまま画面共有できるので,画面共有するオンライン会議に有効です.
見せたいウィンドウの横に自分のWebカメラのウィンドウを小さく表示すれば,顔と画面を同時に見せながら字幕も大きく表示することが可能です.


# 環境構築
Python環境の構築は各自お願いします.
## [Google Cloud Speech API](https://cloud.google.com/speech-to-text/docs/reference/rest/?hl=ja)
<details>
<summary>ここをクリック</summary>
基本的に
[Google Cloud Speech APIのリアルタイム音声認識は使い物になる精度なのか？](https://qiita.com/hamham/items/9b553d0759a2319ea211)
の通りに進めれば構築できますが一応.  
__(1)__
[GoogleCloudPlatform](https://cloud.google.com/?hl=ja)にログインしてプロジェクトを適当に作成.
![スクリーンショット (57).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240141/108553b9-452c-d566-e3e3-dc989b5f90d2.png)
コンソール上部の"プロダクトとリソースの検索"から`Cloud Speech-to-Text API`を有効化.
Cloud Speech-to-Text APIは一定量無料で利用でき,自分で設定しない限り請求されることはない(Google曰く)ですが,クレジットカード情報の登録が必要な点に注意!
__(2)__
[GCPのページ](https://cloud.google.com/sdk/docs/quickstart-windows)より"Google Cloud SDK のインストーラ"をDL&起動.何も変更せずにSDKをインストールします.exeファイルを実行するとコマンドプロンプトが立ち上がるので,誘導に従って設定します.
![スクリーンショット (53).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240141/e4dc67ae-2e7e-2955-359a-7657635c9f53.png)
![スクリーンショット (54).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240141/312494ff-8d12-9700-7aaf-d4cbdaeb8566.png)
設定が終わったら
```  
C:\Users\Username\AppData\Local\Google\Cloud SDK>gcloud auth application-default login
```
によりデフォルト認証設定を行います.
![スクリーンショット (56).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240141/ca0b1d50-4fae-5cfb-1eea-e6c36beb69f1.png)
設定を誤った場合や,変更したい場合は
```
gcloud init
```
で再設定可能です.




## サービスアカウントキーの取得
GCPコンソールの「APIとサービス ＞ 認証情報」からサービスアカウントキーを作成します.
![スクリーンショット (58).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240141/849d3556-b75d-6488-03c3-f4a8c5574819.png)
![スクリーンショット (59).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240141/ae70b98c-2e5a-c64c-7c03-067b7c4a3317.png)
![スクリーンショット (60).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240141/99662418-5a29-4b43-9804-650d8cea6cdf.png)
![スクリーンショット (61).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240141/43a9ea13-2db0-7317-579f-e9f17bef28d9.png)
![スクリーンショット (62).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240141/5bdd1a2e-6ae0-eb72-06cd-9527fa0c03b0.png)
jsonファイルをダウンロードしたら,コマンドプロンプトでこのjsonファイルを環境変数として定義.

```
set GOOGLE_APPLICATION_CREDENTIALS=C:\path\to\credential.json
```

これでGCPに関する設定は終了です.

## ライブラリのインストール

```
pip install google gcloud google-auth google-cloud-speech grpc-google-cloud-speech-v1beta1
pip install pyaudio
```

ただし,Windows環境ではpyaudioの依存ライブラリの関係で`pip install pyaudio`ではエラーを起こす場合があります.

```
$ pip install pyaudio
Collecting pyaudio
  Downloading PyAudio-0.2.11.tar.gz (37 kB)
Using legacy setup.py install for pyaudio, since package 'wheel' is not installed.
Installing collected packages: pyaudio
    Running setup.py install for pyaudio ... error
    ERROR: Command errored out with exit status 1:
     command: 
    (中略)
    Complete output (9 lines):
    running install
    running build
    running build_py
    creating build
    creating build\lib.win-amd64-3.7
    copying src\pyaudio.py -> build\lib.win-amd64-3.7
    running build_ext
    building '_portaudio' extension
    error: Microsoft Visual C++ 14.0 is required. Get it with "Build Tools for Visual Studio": https://visualstudio.microsoft.com/downloads/
    ----------------------------------------
ERROR: Command errored out with exit status 1: 'c:\users\Username\appdata\local\programs\python\python37\python.exe' -u -c 'import sys, setuptools, tokenize; sys.argv[0] = '"'"'C:\\Users\\Username\\AppData\\Local\\Temp\\pip-install-5i7rg8qb\\pyaudio\\setup.py'"'"'; __file__='"'"'C:\\Users\\Username\\AppData\\Local\\Temp\\pip-install-5i7rg8qb\\pyaudio\\setup.py'"'"';f=getattr(tokenize, '"'"'open'"'"', open)(__file__);code=f.read().replace('"'"'\r\n'"'"', '"'"'\n'"'"');f.close();exec(compile(code, __file__, '"'"'exec'"'"'))' install --record 'C:\Users\Username\AppData\Local\Temp\pip-record-9jxqfhqn\install-record.txt' --single-version-externally-managed --compile --install-headers 'c:\users\Username\appdata\local\programs\python\python37\Include\pyaudio' Check the logs for full command output.
```
これを解決するため,https://www.lfd.uci.edu/~gohlke/pythonlibs/#pyaudio より自分の環境にあったバージョンの.whlファイルをダウンロードしてインストール.

```
$ pip install c:\Users\Username\Downloads\PyAudio-0.2.11-cp37-cp37m-win_amd64.whl
Processing c:\users\Username\downloads\pyaudio-0.2.11-cp37-cp37m-win_amd64.whl
Installing collected packages: PyAudio
```
  
以上で環境構築は終了です.[transcriptowindow.py](https://github.com/T3aHat/TranScriptoWindow/blob/master/transcriptowindow.py)を実行できるはずです.お疲れさまでした.
エラーが出る場合は,  PCがマイク入力を正常に認識し,Pythonがアクセスできているか確認するなどしてみてください.
</details>  

# 先行事例と比較  
__(1)__ 
[@1heisuzuki](https://twitter.com/1heisuzuki) 氏による音声認識からWebカメラ映像への字幕合成までをChromeだけで実行するWebページ 
https://1heisuzuki.github.io/speech-to-text-webcam-overlay/
は,ユーザは面倒な設定一切なしにGoogleChromeからアクセスするだけでWebカメラからの出力に字幕をオーバーレイできるほか,透明度,フォントサイズといった各種変数の変更,ログのダウンロード,翻訳機能を備えていて非常に多機能です(執筆当時).
  
__(2)__
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">PC＋Android＋無料のツールだけで自動音声認識による字幕付き配信（ウェブ会議）をおこなう方法を紹介してみました。広く普及して常識になって欲しい（すべてのウェブ会議システムがデフォルトで対応してくれてこの動画が無駄になることを希望）。 <a href="https://twitter.com/hashtag/xdiversity?src=hash&amp;ref_src=twsrc%5Etfw">#xdiversity</a> <a href="https://t.co/yhuT5HISxW">pic.twitter.com/yhuT5HISxW</a></p>&mdash; Yoshiki NAGATANI (@nagataniyoshiki) <a href="https://twitter.com/nagataniyoshiki/status/1262381660877791233?ref_src=twsrc%5Etfw">May 18, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
動画内ではリップリードに関する言及がありました.若干用意するものが多いですが,非常に見やすいです.
  
__(3)__
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://twitter.com/hashtag/xdiversity?src=hash&amp;ref_src=twsrc%5Etfw">#xdiversity</a> <a href="https://twitter.com/xdiversity_org?ref_src=twsrc%5Etfw">@xdiversity_org</a> <a href="https://twitter.com/hashtag/stayhometokyo?src=hash&amp;ref_src=twsrc%5Etfw">#stayhometokyo</a> <a href="https://twitter.com/hashtag/%E9%9F%B3%E5%A3%B0%E6%96%87%E5%AD%97%E5%A4%89%E6%8F%9B?src=hash&amp;ref_src=twsrc%5Etfw">#音声文字変換</a> <a href="https://t.co/VNKQcZONsR">pic.twitter.com/VNKQcZONsR</a></p>&mdash; 落合陽一 (@ochyai) <a href="https://twitter.com/ochyai/status/1260610691041357825?ref_src=twsrc%5Etfw">May 13, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
今回作成したシステムは, [環境構築編](https://qiita.com/teahat/items/86b68e03056e914c80f8#%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89)を見ていただければわかるように,上と比較して圧倒的に面倒で,導入難度が高いです.本格的に使用する場合,APIの無料枠を超えて料金が発生する可能性もあります.
また,これは自分ではどうもできなかったのですが,このような問題を抱えています.
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">現時点での問題点として,途中でWindowsやAndroid,OBSといった英字が含まれるとAPIからのレスポンスが非常に遅くなって更新されなくなる<br>入力音声は<a href="https://t.co/KlaSt5kbxC">https://t.co/KlaSt5kbxC</a><br>をお借りしました <a href="https://t.co/GOJY00oypk">pic.twitter.com/GOJY00oypk</a></p>&mdash; teahat (@T3ahat) <a href="https://twitter.com/T3ahat/status/1264949039956549633?ref_src=twsrc%5Etfw">May 25, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


しかし,一度環境構築してしまえば__(2)__と同程度かそれ以上に綺麗に字幕を表示でき,(ログの保存や,翻訳機能は実装していませんが)操作上の自由度は一番高くなっている(のではないかと思いたい...).
導入の難しささえどうにかなれば割と使いやすいシステムになったかなとは思います.

# まとめ
[ねとらぼの記事](https://nlab.itmedia.co.jp/nl/articles/2005/23/news036.html)によると,iPhoneとmacで同じような機能を再現した方もいるようです.
使いやすいものを導入してオンラインチャットしてみてはいかがでしょうか.
私はチャット相手がいないので使いませんが()