1heisuzuki / speech-to-text-webcam-overlay Goto Github PK

ウインドウ全体にビデオが表示されて，コントロールとかが見えなくなるモードがあるといいかも

カメラの選択部分を参考にする
0252c3f

次の環境でも動作しました。

• Windows 10のVivaldi（https://vivaldi.com/ja/）
• Linux (Ubuntu Mate 20.04)上のChrome、Chromium、Vivaldi

ChromiumベースのEdgeは、さすがに（Googleに依存する）Speech Recognition APIが動きませんね。

認識ごとに文字がリセットされる方式と，されない方式の切り替えができると良さそう。後者はGoogle Chromeのデモを参考にできそう。
https://www.google.com/intl/en/chrome/demos/speech.html

Google Chromeのデモを参考に，言語切替に対応したい
https://www.google.com/intl/en/chrome/demos/speech.html

16:9ではないウインドウサイズで相手が会議に参加すると16:9の映像の両端がカットされてしまうため，文字が見えなくなることの対策

名称は
font-family:"BIZ UDGothic";
です。よろしくお願いします。
（プルリクを送るほどでは無いものの Twitter だけだと忘れるので Issue で失礼します。）

デフォルトでは最低限のUIを表示しておいて，「Advanced Options」のような形で展開されるようにするとスッキリして良いかもしれない

Twitterでの要望メモ：
https://twitter.com/Barutan810/status/1264308328315801600

実装する場合は，時間をカスタムできたほうが良さそう

エンターキーで「。」他のキーで「，」など

Twitterでの要望メモ：
https://twitter.com/Barutan810/status/1264308328315801600

本来の趣旨とはすこしずれてくる気がするが，Androidの音声文字変換をブラウザでできるようになったようなものと思えばあっても悪くないかも

「認識結果のログ」の「時刻の記録」にチェックを入れると、認識結果のテキストがログのテキストエリアに入らないように見えます (日本語でも英語でも)。

以前は入っていましたが、7月9日に確認したのが最後で、久しぶりに試した 10月1日以降、入らなくなりました。
Chrome のバージョン : 94.0.4606.71（Official Build） （x86_64）(macOS 11.6)

素晴らしいページをありがとうございます。

Twitterでの要望メモ：
https://twitter.com/Barutan810/status/1264308328315801600

上から表示して下まで文字が到達したら下合わせにするとかになりそう。

「音声認識が始まるとここに文字が表示されます。マイクとカメラを有効にしてください。」
を表示しないようにするチェックボックスを追加したい。

UserDataに保存されるようにもしたい

エンターキー等で文の終わりを教えて，表示にも反映する（。とかを付与する？）

現状だと文字を読まなければならないため，アイコンつきでボタン化したい。
アイコン作成時は自作のもの（レポジトリをCC0で提供しているため）

Twitterでの要望メモ：
https://twitter.com/Barutan810/status/1264308328315801600

Twitter等から集める

Twitterからの要望メモ：
https://twitter.com/tnk962/status/1266199247646453760

ログに時刻が打鍵されるようにする？デフォルトはオフ・ボタンでオンが良さそう。

今の状態だと「Speech to text webcam overlay」「1heisuzukiさんの字幕のやつ」となって長く、言及が微妙にしづらい状態です。何か名前か愛称があると呼びやすくなって良いのでは、と思いました。

index.htmlの分量が多くなってきたので，分割してもいいかもしれない

UIが長くなってきたので，ブラウザ幅が十分にあるときはUIをカメラの右側に表示してもよいかもしれない

Google Docsなどでやればよい気もするが，同時に使いたい需要があるかも&認識が止まってしまう問題があるので，あると嬉しい機能ではある気がする
https://www.cg-method.com/entry/google-document-convert-voice-to-text/

CSSやDOM構造を良い感じにする？

翻訳APIでページ全体が翻訳されてしまう。下部の翻訳結果ログは翻訳されないので，この仕組みを活用できないか

単純な文字数での改行だと読みづらくなってしまうので，単語が切れないように改行すると読みやすいかもしれない。kuromoji.js等が活用できるかも

macOS の Safari と，iOS の Safari で WebSpeechAPIが利用可能になったとのこと。
https://caniuse.com/?search=Web%20Speech%20API

現在，Chorome 以外の場合は JavaScriptの処理が途中で exit するようになっているが，それを廃止するのを検討中。

軽く試した所，Safari では動作が重くなるような気がする。
また，現状の CSS だと Safari ではスライダーがうまく表示されていないので，そのバグ解消も同時に行いたい。

認識言語A: 日本語
認識言語B: 英語
と決めておいて，キーボード操作で認識言語を切り替えられるようにしたい。

もともとスクロールしないと字幕オンオフのボタンに到達できず，ユーザーの画面サイズによっては画面をスクロールせざるを得ない状況だった。一旦，ボタン配置を変更して対応した。

ショートカットキーにする場合は，意図せずショートカットキーを押してしまったときの対策（字幕がオフですよと何か表示するとか？
）が必要かもしれない・

Twitterでの要望メモ：
https://twitter.com/Barutan810/status/1264308328315801600

むずかしそう。。。ChromeのExtensionとかでないかなぁ

クラス名やIDなどを規則的に整理すると再利用しやすくなるかも

ここの処理タイミングに問題がありそう。

Twitterからの要望メモ：
https://twitter.com/seo_elina/status/1264754993900339201

↓参考になるかもしれない
https://medium.com/@Mitu217/しりとり審判アプリを作った話-294b4947b008

@1heisuzuki
素晴らしいシステムを開発していただき、ありがとうございます。
もし、音声認識には日本語以外の選択肢があったら、語学的な口頭練習にも役に立っているのではないかと思いますが、この機能を開発なさるご予定がございますか。

右に動くと画面上では左に動きます。修正お願いします。

リロードするとこのチェックボックスが必ずオフになってしまうのが不便かもしれない。

Twitterからの要望メモ

話者とオペレーターが別の場合は、音声入力解析結果を一旦テンポラリにして、文字修正してから任意のタイミングで行ごとに発行する機能
https://twitter.com/SAJDI49631250/status/1264082601091817472

こちらでちょっと試してみたところ，少し文字の輪郭を付けると背景に影響されることが減る気がしました。もしよろしければお試しください（評価実験等の成果を反映した設定なのでしたら捨て置き下さい）。
-webkit-text-stroke: 1px #000;

Twitterからの要望メモ

一般字幕の7～13文字に切り分ける機能
https://twitter.com/SAJDI49631250/status/1264082601091817472

映画の字幕とかテレビの字幕（subtitle）みたいな感じ