Skip to content

Latest commit

 

History

History
115 lines (96 loc) · 6.47 KB

README.md

File metadata and controls

115 lines (96 loc) · 6.47 KB
Raw

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

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

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

デモページ

https://1heisuzuki.github.io/speech-to-text-webcam-overlay/
*PC版のGoogle Chromeでアクセスしてください。

目次

動作環境

  • PC版 Google Chrome
    • 最新のWindows, macOSでなんとなく確認済
    • 詳しい動作検証はしていないのでご了承ください 🙏
  • Android端末 Chrome
    • 筆者が端末を所持していないため未検証だが，動いたとの情報あり

何ができるか

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

よくある質問

使用環境関係

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

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

iPhoneやiPadのChromeで使えない

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

機能について

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

文字の修正をしたい

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

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

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

自動で翻訳したい

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

他の言語を認識したい

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

BIZ UD フォントが表示されない

BIZ UD フォント以外のフォントが表示されない

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

その他

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

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

関連資料

参考資料

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