/speech-to-text-webcam-overlay

Web Speech API で音声認識した結果の字幕をWebカメラ映像に重ねて表示するWebページ

Primary LanguageJavaScriptCreative Commons Zero v1.0 UniversalCC0-1.0

Webカメラの映像に自動字幕を重ねるWebページ

動作風景「このページを開くだけで音声認識をした結果の字幕をこんな感じで…」

Web Speech API の音声認識を利用して文字起こしした結果をWebカメラ映像に重畳して表示するWebページです。ブラウザを画面収録して，ビデオ会議や生配信等で使用できます。

デモページ

https://1heisuzuki.github.io/speech-to-text-webcam-overlay/
*PC版のGoogle ChromeやMicrosoft Edgeのような音声認識をサポートするブラウザでアクセスしてください。Safariは2022年10月現在、挙動が不安定なので非推奨です。

目次

動作環境

かなりざっくりとした動作環境しか行っていません。
同様の環境で動かない場合はブラウザのアップデートや別ブラウザでの利用等をお試しください。

  • PC版 Google Chrome
    • Windows, macOS, Linux (Ubuntu Mate 20.04) などで確認済み
    • 日本語の場合，イントネーションに関わらず「。」が付与されます。これは，Web SpeechAPI の機能ではなく，本ページの機能です。
  • PC版 Microsoft Edge
    • Windows, macOSで動作することを確認（Linuxは2022年10月現在クラッシュする模様）
    • 日本語の場合，音声認識が識別し「、」「。」「？」などの付与が行われます。これは，本ページの機能ではなく，Web Speech API の機能です。
    • 筆者の検証環境では，Google Chrome よりも Edge は認識頻度や速度が遅く見えました。環境や用途によって，Chrome と Edge どちらが適切かが異なると思われるので，使われる方の環境で双方お試しいただくことをおすすめします。
  • macOS版 Safari
    • 一応動作はするものの、同じ文言が二重で出たり認識が止まるなど、挙動が不安定
  • Android版 Google Chrome
    • 2022年10月現在、音声認識が適切に動作しない模様（Android 13; Pixel 6 Pro にて検証。詳細

何ができるか

  • 音声からリアルタイムで文字起こしを行い，Webカメラの映像に重ねてブラウザ上で表示する
    • 認識する言語の変更
    • 表示する文章の翻訳（ログは翻訳されない）
    • 表示する文章のひらがな化（日本語認識→日本語表示の場合のみ，ログはひらがな化されない）
  • 認識した過去ログの表示とダウンロード
  • 表示する文字のスタイルの調整
    • 調整した設定はブラウザに自動保存

よくある質問

音声データ・文字起こしデータの扱いについて

  • 開発者のサーバー（1heisuzuki.github.io）では，サーバー上への音声および文字データの保存は行っておりません。
    • 「ログをダウンロード」でダウンロードされるファイルは，アクセスしているユーザーのブラウザで生成されています。
  • 音声文字変換には Web Speech API を利用しており，音声データおよびその文字起こしデータが実際どのように処理されるかは，ユーザーが利用するブラウザによって異なります。
    参考: Web Speech APIを使う - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API
  • 音声データおよびその文字起こしデータの各ブラウザの扱いについては，当該ブラウザやブラウザ開発者のプライバシーポリシーなどを参照してください。
  • 開発者は，本プログラム speech-to-text-webcam-overlay および それを Github Pages でホスティングした Speech to Text Webcam Overlay を使用したことにより生じた損害等の一切の責任を負いかねますのでご了承ください。

使用環境関係

Google Chrome って何？どうやって使うの？

  • Google Chrome は Google が提供しているウェブブラウザ（ウェブページを表示するためのソフトウェア）です。
  • 下記ページからダウンロード・インストールすることで利用できます。
    Google Chrome ダウンロードページ: https://www.google.com/chrome/

iPhoneやiPadのChromeで使えない

カメラやマイクが認識されない

機能について

相手側の音声を表示したい

文字の修正をしたい

  • 認識結果のログでは修正可能になっています。合成画面上での編集については未実装です。
  • Google Docsなどの音声入力やUDトークなど，他のツールの利用で要望を満たせるかもしれません。
    参考: Google Docs ヘルプ / 音声で入力する https://support.google.com/docs/answer/4492226?hl=ja

ひらがなで表示したい

  • 実装しました。
  • 「音声認識：Japanese」を選択すると，「ひらがな」のチェックボックスが表示されます。
    • チェックボックスにチェックを入れると，ひらがな変換用のデータが読み込まれます。
  • 仕組みと注意
    • Web Speech API では，漢字や変換された状態で結果が出力されます。
    • その結果から kuromoji.js により読みを取得し，表示しています。
    • 音声から直接ひらがなを生成しているわけではないため，読みが正しく表示されなかったり，kuromoji.js の辞書に登録されていない単語や英単語等が変換前の状態で表示されたりします。
    • つまり，「日本語音声→ひらがな」の変換ではなく，「日本語音声→文字→ひらがな読み」が行われています。

文字認識の結果を保存したい

  • 実装しました。
  • 保存を自動的に行いたい場合は，Google Docsなどの音声入力やUDトークなど，他のツールの利用を検討してください。
    参考: Google Docs ヘルプ / 音声で入力する https://support.google.com/docs/answer/4492226?hl=ja

自動で翻訳したい

  • 実装しました。
  • 操作パネルの「翻訳：Select Language」と書かれているところから，翻訳したい言語を選択してください。
  • なお，認識ログには音声認識した言語（翻訳前の言語）が表示されます。

他の言語を認識したい

  • 実装しました。
  • 操作パネルの「音声認識：Japanese」と書かれているところから，他の言語を選択してください。

フォントが表示されない

  • 選択が可能になっているフォントのなかで，PCによってはインストールされていない場合があります。
  • フォントをインストールするか，別のフォントを選択してください。

その他

ブログや生配信で紹介したい

  • オープンに公開しているので，自由に使ってください！

外部のライブラリ（サブモジュール）について

サブモジュールとして追加しているレポジトリをまとめてcloneする場合は--recursive オプションを使用してcloneしてください。

kuromoji.js

関連資料

参考資料

コードを書くにあたって参考にしたWebページ等