wx44wx/engine-v5-pipecat-core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add camera drawer for voice demo

Browse Source
This commit is contained in:
Xin Wang
2026-05-28 14:52:44 +08:00
parent 1dcfb98e63
commit 966dadda38
3 changed files with 301 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
examples/webpage/index.html
View File

@@ -38,17 +38,55 @@
<div class="app__body">
<div class="app__main">
<section class="chat" aria-label="Conversation history">
<div id="chat-log" class="chat__log" role="log" aria-live="polite">
<div class="chat__empty">
<p>Connect to the engine, enable your mic, and start talking.</p>
<p class="chat__hint">
Audio is streamed as PCM16 mono @ 16&nbsp;kHz over
<code>/ws-product</code>.
</p>
<div id="conversation" class="conversation">
<aside
id="camera-drawer"
class="camera-drawer"
aria-label="Camera capture step"
aria-hidden="true"
>
<div class="camera-drawer__panel">
<div class="camera-drawer__header">
<div>
<p class="camera-drawer__eyebrow">Camera</p>
<h2>拍照步骤</h2>
</div>
<span id="camera-state" class="camera-drawer__state">State -</span>
</div>
<div class="camera-drawer__preview" aria-hidden="true">
<span class="camera-drawer__corner camera-drawer__corner--tl"></span>
<span class="camera-drawer__corner camera-drawer__corner--tr"></span>
<span class="camera-drawer__corner camera-drawer__corner--bl"></span>
<span class="camera-drawer__corner camera-drawer__corner--br"></span>
<span class="camera-drawer__lens"></span>
<span class="camera-drawer__scan"></span>
</div>
<p id="camera-question" class="camera-drawer__question"></p>
<button
id="camera-done-btn"
class="btn btn--primary camera-drawer__button"
type="button"
disabled
>
拍摄完成
</button>
</div>
</div>
</section>
</aside>
<section class="chat" aria-label="Conversation history">
<div id="chat-log" class="chat__log" role="log" aria-live="polite">
<div class="chat__empty">
<p>Connect to the engine, enable your mic, and start talking.</p>
<p class="chat__hint">
Audio is streamed as PCM16 mono @ 16&nbsp;kHz over
<code>/ws-product</code>.
</p>
</div>
</div>
</section>
</div>
<footer class="controls" aria-label="Chat controls">
<div class="meter" aria-hidden="true">