View Code? Open in Web Editor
NEW
Web Speech API で音声認識した結果の字幕をWebカメラ映像に重ねて表示するWebページ
Home Page: https://1heisuzuki.github.io/speech-to-text-webcam-overlay/
License: Creative Commons Zero v1.0 Universal
HTML 31.55%
CSS 12.27%
JavaScript 56.19%
speech-to-text-webcam-overlay's Issues
ウインドウ全体にビデオが表示されて,コントロールとかが見えなくなるモードがあるといいかも
次の環境でも動作しました。
ChromiumベースのEdgeは、さすがに(Googleに依存する)Speech Recognition APIが動きませんね。
16:9ではないウインドウサイズで相手が会議に参加すると16:9の映像の両端がカットされてしまうため,文字が見えなくなることの対策
名称は
font-family:"BIZ UDGothic";
です。よろしくお願いします。
(プルリクを送るほどでは無いものの Twitter だけだと忘れるので Issue で失礼します。)
デフォルトでは最低限のUIを表示しておいて,「Advanced Options」のような形で展開されるようにするとスッキリして良いかもしれない
「認識結果のログ」の「時刻の記録」にチェックを入れると、認識結果のテキストがログのテキストエリアに入らないように見えます (日本語でも英語でも)。
以前は入っていましたが、7月9日に確認したのが最後で、久しぶりに試した 10月1日以降、入らなくなりました。
Chrome のバージョン : 94.0.4606.71(Official Build) (x86_64)(macOS 11.6)
素晴らしいページをありがとうございます。
「音声認識が始まるとここに文字が表示されます。マイクとカメラを有効にしてください。」
を表示しないようにするチェックボックスを追加したい。
UserDataに保存されるようにもしたい
エンターキー等で文の終わりを教えて,表示にも反映する(。
とかを付与する?)
![SS 2020-05-28 at 11 12 35](https://user-images.githubusercontent.com/14171207/83090636-2efc0280-a0d4-11ea-839b-8930eb57f427.png)
現状だと文字を読まなければならないため,アイコンつきでボタン化したい。
アイコン作成時は自作のもの(レポジトリをCC0で提供しているため)
今の状態だと「Speech to text webcam overlay」「1heisuzukiさんの字幕のやつ」となって長く、言及が微妙にしづらい状態です。何か名前か愛称があると呼びやすくなって良いのでは、と思いました。
index.htmlの分量が多くなってきたので,分割してもいいかもしれない
UIが長くなってきたので,ブラウザ幅が十分にあるときはUIをカメラの右側に表示してもよいかもしれない
![SS 2020-06-02 at 1 33 48](https://user-images.githubusercontent.com/14171207/83430794-3ecb6c00-a471-11ea-8b6d-536c7c573d35.png)
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: 英語
と決めておいて,キーボード操作で認識言語を切り替えられるようにしたい。
もともとスクロールしないと字幕オンオフのボタンに到達できず,ユーザーの画面サイズによっては画面をスクロールせざるを得ない状況だった。一旦,ボタン配置を変更して対応した。
ショートカットキーにする場合は,意図せずショートカットキーを押してしまったときの対策(字幕がオフですよと何か表示するとか?
)が必要かもしれない・
むずかしそう。。。ChromeのExtensionとかでないかなぁ
クラス名やIDなどを規則的に整理すると再利用しやすくなるかも
ここの処理タイミングに問題がありそう。
|
if (lang == 'ja-JP') { |
|
result_transcript += '。'; |
|
} |
![SS 2020-05-23 at 11 40 54](https://user-images.githubusercontent.com/14171207/82719986-4741db00-9cea-11ea-8196-becd47bd5cfb.png)
@1heisuzuki
素晴らしいシステムを開発していただき、ありがとうございます。
もし、音声認識には日本語以外の選択肢があったら、語学的な口頭練習にも役に立っているのではないかと思いますが、この機能を開発なさるご予定がございますか。
![SS 2020-05-25 at 19 46 39](https://user-images.githubusercontent.com/14171207/82806310-7742d700-9ec0-11ea-81cd-a1e45f240d85.png)
下記箇所でコントローラ全体の透明度を下げている影響で,色が正しく見えない。
|
.controls_wrapper { |
|
width: 100%; |
|
display: flex; |
|
flex-wrap: wrap; |
|
margin-bottom: 1rem; |
|
opacity: 0.6; |
|
} |
右に動くと画面上では左に動きます。修正お願いします。
リロードするとこのチェックボックスが必ずオフになってしまうのが不便かもしれない。
![SS 2021-04-21 at 15 33 40](https://user-images.githubusercontent.com/14171207/115507398-07e38c00-a2b7-11eb-8aa2-21bb7b9b8e54.png)
こちらでちょっと試してみたところ,少し文字の輪郭を付けると背景に影響されることが減る気がしました。もしよろしければお試しください(評価実験等の成果を反映した設定なのでしたら捨て置き下さい)。
-webkit-text-stroke: 1px #000;