diff options
| author | yum <yum.food.vr@gmail.com> | 2023-06-30 19:44:27 -0700 |
|---|---|---|
| committer | yum <yum.food.vr@gmail.com> | 2023-06-30 19:46:17 -0700 |
| commit | 4f3131b4a36d8e1557edb31d3754a431717dab7b (patch) | |
| tree | ea3151841f8d2d2abc38c71e87ccdffaac2be2dc /BrowserSource/index.html | |
| parent | 9ab500036bdfa87215e9a05fc167c4d9dea8e437 (diff) | |
Add visual commit indicator to OBS browser source
Circle goes red when speaking, grey when done. Ideally it would be in
the top right portion of the browser source, but this is a good start.
Also, hard-cap transcripts to 4096 chars. This prevents the STT from
lagging during long sessions.
Diffstat (limited to 'BrowserSource/index.html')
| -rw-r--r-- | BrowserSource/index.html | 28 |
1 files changed, 27 insertions, 1 deletions
diff --git a/BrowserSource/index.html b/BrowserSource/index.html index 000f366..96692cf 100644 --- a/BrowserSource/index.html +++ b/BrowserSource/index.html @@ -17,6 +17,24 @@ color: #89CFF0; -webkit-text-stroke: 3.0px #000; } + .red_circle { + height: 50px; + width: 50px; + background-color: red; + border-radius: 50%; + display: inline-block; + vertical-align: middle; + margin: 20px; + } + .grey_circle { + height: 50px; + width: 50px; + background-color: grey; + border-radius: 50%; + display: inline-block; + vertical-align: middle; + margin: 20px; + } </style> <body> <div id="transcript"></div> @@ -31,7 +49,15 @@ dataType: 'json', success: function(data) { var transcript = data.transcript; - $('#transcript').html(transcript); + var red_circle = '<span class="red_circle"></span>'; + var grey_circle = '<span class="grey_circle"></span>'; + var transcript_w_circle = transcript; + if (data.is_final == 1) { + transcript_w_circle += grey_circle; + } else { + transcript_w_circle += red_circle; + } + $('#transcript').html(transcript_w_circle); $('#transcript').css("background-color", "#00000080"); }, error: function(jqXHR, textStatus, errorThrown) { |