-
Notifications
You must be signed in to change notification settings - Fork 52
/
Copy pathindex.html
executable file
·243 lines (219 loc) · 16.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns">
<meta charset="utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<title>Speech-to-Text Webcam Overlay</title>
<meta name="description" content="Web Speech API で音声認識した結果の字幕をWebカメラ映像に重ねて表示するWebページです。ブラウザを画面収録して,ビデオ会議や生配信等で使用できます。">
<meta property="og:title" content="Speech-to-Text Webcam Overlay">
<meta property="og:description" content="Web Speech API で音声認識した結果の字幕をWebカメラ映像に重ねて表示するWebページです。ブラウザを画面収録して,ビデオ会議や生配信等で使用できます。">
<meta property="og:url" content="https://1heisuzuki.github.io/speech-to-text-webcam-overlay/">
<meta property="og:image" content="https://1heisuzuki.github.io/speech-to-text-webcam-overlay/thumbnail.jpg">
<meta name="twitter:card" content="summary">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@700&family=BIZ+UDPMincho&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css?ver=202301282200" type="text/css" media="screen">
<link rel="manifest" href="manifest.json">
</head>
<body>
<div class="main">
<div id="status" class="error">起動中...</div>
<div id="status_kuromoji_loading" class="hidden"></div>
<div id="video_wrapper" class="video_wrapper">
<video id="result_video" class="video_area" autoplay></video>
<div id="video_bg" class="video_bg hidden"></div>
<div id="text_overlay_wrapper" class="text_overlay_wrapper full">
<div id="text_bg" class="text_bg"></div>
<div id="result_text" class="text_area">音声認識が始まるとここに文字が表示されます。マイクとカメラを有効にしてください。</div>
</div>
<img alt="FullScreen" src="fullscreen.svg" id="FullScreenBtn" class="FullScreenBtn" width="20" height="20" style="display:block">
</div>
<div id="help_on_error" class="help_on_error">
カメラやマイクが機能しないとき → ページの再読み込みや,ブラウザの設定を確認してください: <a href="https://support.google.com/chrome/answer/2693767?co=GENIE.Platform%3DDesktop&hl=ja&oco=1" target="_blank">Chrome ヘルプ</a>
</div>
<div class="interface_wrapper">
<input class="checkboxes" id="checkbox_controls" type="checkbox" checked><label class="checkboxes_label" for="checkbox_controls">詳細設定を表示</label>
<input class="checkboxes" id="checkbox_log" type="checkbox" checked><label class="checkboxes_label" for="checkbox_log">認識結果のログを表示</label>
<div class="controls_wrapper control_wrapper_row">
<div class="control_button_wrapper">
<input type="button" value="カメラ 表示/非表示" onclick="toggleClass('result_video','hidden')">
<input type="button" value="カメラ 左右反転" onclick="toggleClass('result_video','mirror')">
<input type="button" value="文字 表示/非表示" onclick="toggleClass('text_overlay_wrapper','hidden')">
<input type="button" value="文字 左右反転" onclick="toggleClass('text_overlay_wrapper','mirror')">
<input type="button" value="全画面化ボタン 表示/非表示" onclick="toggleClass('FullScreenBtn','hidden')">
<input type="button" value="設定の初期化" onclick="deleteConfig()">
</div>
<div class="control_selector_wrapper">
カメラ:
<select id="select_camera" onchange="setupCamera()"></select>
</div>
<div class="control_selector_wrapper">
音声認識<a href="https://github.com/1heisuzuki/speech-to-text-webcam-overlay#他の言語を認識したい" target="_blank">[?]</a>:
<select id="select_language" class="selector" onchange="updateCountry()"></select>
<select id="select_dialect" class="selector" onchange="updateLanguage()"></select>
<span id="checkbox_hiragana_wrapper" class="selector">
<label for="checkbox_hiragana">ひらがな</label><a href="https://github.com/1heisuzuki/speech-to-text-webcam-overlay#ひらがなで表示したい" target="_blank">[?]</a>: <input type="checkbox" id="checkbox_hiragana" name="checkbox_hiragana" value="hiragana" oninput="initKuromoji(this)">
</span> 翻訳
<a href="https://github.com/1heisuzuki/speech-to-text-webcam-overlay#自動で翻訳したい" target="_blank">[?]</a>:
<div id="google_translate_element" class="select_translation selector"></div>
</div>
<div class="col-12 control_wrapper_col">
<div class="control_header">文字の調整</div>
<div class="control_wrapper" style="padding-top: 0.8rem;">
<div class="control_form control_form_slider col-3">
<label for="slider_font_size" class="control_label">大きさ</label>
<input id="slider_font_size" type="range" class="control_input" value="68" min="1" max="150" step="1" oninput="document.getElementById('result_text').style.fontSize=this.value+'px',document.getElementById('value_font_size').innerHTML=this.value">
<div class="control_value">
<span id="value_font_size">68</span><span class="value_unit">px</span>
</div>
</div>
<div class="control_form control_form_slider col-3">
<label for="slider_opacity" class="control_label">透明度</label>
<input id="slider_opacity" type="range" class="control_input" value="0.9" min="0" max="1" step="0.05" oninput="document.getElementById('result_text').style.opacity=this.value,document.getElementById('value_opacity').innerHTML=this.value">
<div class="control_value">
<span id="value_opacity">0.9</span>
</div>
</div>
<div class="control_form control_form_radio col-4">
<label for="selector_position" class="control_label">位置</label>
<div class="control_input">
<label for="selector_position_full">
<input id="selector_position_full" type="radio" name='selector_position'
oninput="document.getElementById('text_overlay_wrapper').classList.add('full'), document.getElementById('text_overlay_wrapper').classList.remove('split','right','left','top','bottom')" checked> 全体
</label>
<label for="selector_position_left">
<input id="selector_position_left" type="radio" name='selector_position'
oninput="document.getElementById('text_overlay_wrapper').classList.add('split','left'), document.getElementById('text_overlay_wrapper').classList.remove('full','right','top','bottom')"> 左
</label>
<label for="selector_position_right">
<input id="selector_position_right" type="radio" name='selector_position'
oninput="document.getElementById('text_overlay_wrapper').classList.add('split','right'), document.getElementById('text_overlay_wrapper').classList.remove('full','left','top','bottom')"> 右
</label>
<label for="selector_position_top">
<input id="selector_position_top" type="radio" name='selector_position'
oninput="document.getElementById('text_overlay_wrapper').classList.add('split','top'), document.getElementById('text_overlay_wrapper').classList.remove('full','left','right','bottom')"> 上
</label>
<label for="selector_position_bottom">
<input id="selector_position_bottom" type="radio" name='selector_position'
oninput="document.getElementById('text_overlay_wrapper').classList.add('split','bottom'), document.getElementById('text_overlay_wrapper').classList.remove('full','left','right','top')"> 下
</label>
</div>
</div>
<div class="control_form control_form_slider col-3">
<label for="slider_text_shadow_stroke" class="control_label">影</label>
<input id="slider_text_shadow_stroke" type="range" class="control_input" value="5" min="0" max="20" step="0.1" oninput="document.getElementById('result_text').style.textShadow='0 0 '+this.value+'px '+document.getElementById('selector_text_shadow_color').value,document.getElementById('value_text_shadow_stroke').innerHTML=this.value">
<div class="control_value">
<span id="value_text_shadow_stroke">5</span><span class="value_unit">px</span>
</div>
</div>
<div class="control_form control_form_slider col-3">
<label for="slider_text_stroke" class="control_label">フチ</label>
<input id="slider_text_stroke" type="range" class="control_input" value="0.3" min="0" max="5" step="0.01" oninput="document.getElementById('result_text').style.webkitTextStrokeWidth=this.value+'px',document.getElementById('value_text_stroke').innerHTML=this.value">
<div class="control_value">
<span id="value_text_stroke">0.3</span><span class="value_unit">px</span>
</div>
</div>
<div class="control_form control_form_slider col-3">
<label for="slider_line_height" class="control_label">行間</label>
<input id="slider_line_height" type="range" class="control_input" value="163" min="100" max="300" step="1" oninput="document.getElementById('result_text').style.lineHeight=this.value+'%',document.getElementById('value_line_height').innerHTML=this.value">
<div class="control_value">
<span id="value_line_height">163</span><span class="value_unit">%</span>
</div>
</div>
<div class="control_form control_form_slider col-3">
<label for="slider_letter_spacing" class="control_label">字間</label>
<input id="slider_letter_spacing" type="range" class="control_input" value="0.05" min="0" max="1" step="0.01" oninput="document.getElementById('result_text').style.letterSpacing=this.value+'em',document.getElementById('value_letter_spacing').innerHTML=this.value">
<div class="control_value">
<span id="value_letter_spacing">0.05</span>
</div>
</div>
<div class="control_form control_form_color col-2">
<label for="selector_text_color" class="control_label">文字色</label>
<input id="selector_text_color" type="color" class="control_input" value="#ffffff" oninput="document.getElementById('result_text').style.color=this.value">
</div>
<div class="control_form control_form_color col-2">
<label for="selector_text_shadow_color" class="control_label">影色</label>
<input id="selector_text_shadow_color" type="color" class="control_input" value="#000000" oninput="document.getElementById('result_text').style.textShadow='0 0 '+document.getElementById('slider_text_shadow_stroke').value+'px '+this.value">
</div>
<div class="control_form control_form_color col-2">
<label for="selector_text_stroke_color" class="control_label">フチ色</label>
<input id="selector_text_stroke_color" type="color" class="control_input" value="#000000" oninput="document.getElementById('result_text').style.webkitTextStrokeColor=this.value">
</div>
<div class="control_form control_form_selector col-3">
<label for="select_font" class="control_label">フォント </label>
<select id="select_font" onchange="document.getElementById('result_text').style.fontFamily=fonts_custom[select_font.selectedIndex][1];document.getElementById('result_text').style.fontWeight=fonts_custom[select_font.selectedIndex][2]" style="width: 94%; height: 100%;"></select>
</div>
<div class="control_form control_form_selector col-2">
<label for="select_autoclear_text" class="control_label">自動消去 </label>
<select id="select_autoclear_text" onchange="updateTextClearSecond()">
<option value="0">なし</option>
<option value="5">5秒</option>
<option value="10">10秒</option>
<option value="20">20秒</option>
<option value="30" selected>30秒</option>
<option value="45">45秒</option>
<option value="60">1分</option>
</select>
</div>
</div>
</div>
<div class="col-6 control_wrapper_col">
<div class="control_header">文字背景の塗り調整</div>
<div class="control_wrapper">
<div class="control_form control_form_slider col-6">
<label for="slider_text_bg_opacity" class="control_label">濃さ</label>
<input id="slider_text_bg_opacity" type="range" class="control_input" value="0.3" min="0" max="1" step="0.05" oninput="document.getElementById('text_bg').style.opacity=this.value,document.getElementById('value_text_bg_opacity').innerHTML=this.value">
<div class="control_value">
<span id="value_text_bg_opacity">0.3</span>
</div>
</div>
<div class="control_form control_form_color col-6">
<label for="selector_text_bg_color" class="control_label">色</label>
<input id="selector_text_bg_color" type="color" class="control_input" value="#000000" oninput="document.getElementById('text_bg').style.backgroundColor=this.value">
</div>
</div>
</div>
<div class="col-6 control_wrapper_col">
<div class="control_header">単色背景の調整</div>
<div class="control_wrapper">
<div class="control_button_wrapper col-6">
<input type="button" id="video_bg_toggle" class="" value="単色背景 表示/非表示" onclick="toggleClass('video_bg','hidden')">
</div>
<div class="control_form control_form_color col-5">
<label for="selector_video_bg" class="control_label">背景色</label>
<input id="selector_video_bg" type="color" class="control_input" value="#00ff00" oninput="document.getElementById('video_bg').style.backgroundColor=this.value">
</div>
</div>
</div>
</div>
<div id="log" class="log_wrapper">
<div class="control_header">認識結果のログ</div>
<div class="log_control_wrapper help_text">
*認識結果が確定したタイミングで反映されます。テキストの編集・コピーも可能です。<br/> **認識中にEnterキーを押すと,認識を止めて文を区切ることができます。日本語の場合は文末に句点が付与されます。
<div class="log_input_wrapper">
<label for="checkbox_timestamp">時刻の記録:</label> <input type="checkbox" id="checkbox_timestamp" name="checkbox_timestamp" value="timestamp">
</div>
</div>
<textarea id="result_log" class="result_log_area" onchange="textAreaHeightSet(this)"></textarea><br/>
<div style="text-align: center; opacity: 0.6;">
<input type="button" value="ログをダウンロード" onclick="downloadLogFile(this)">
</div>
</div>
</div>
<div class="help_wrapper">
<div class="help_text">
よくある質問・ソースコード: <a href="https://github.com/1heisuzuki/speech-to-text-webcam-overlay" target="_blank">GitHub</a><br /> 音声認識は <a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Speech_API" target="_blank">Web Speech
API</a> を利用しています。<br /> カメラやマイクが機能しないとき → ページの再読み込みや,ブラウザの設定を確認してください: <a href="https://support.google.com/chrome/answer/2693767?co=GENIE.Platform%3DDesktop&hl=ja&oco=1">Chrome ヘルプ</a><br> 「ログをダウンロード」でダウンロードされるファイルは,アクセスしているユーザーのブラウザで生成されています。
</div>
</div>
</div>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" defer></script>
<script src="kuromoji/build/kuromoji.js" defer></script>
<!-- Chrome で MediaDevices.enumerateDevices() を動かすためのpolyfill -->
<script src="https://webrtc.github.io/adapter/adapter-latest.js" defer></script>
<script src="./main.js?v=202210222000" defer></script>
</body>
</html>