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

fix cam light always on

Browse Source
This commit is contained in:
mattie ruth backman
2025-07-03 15:31:12 -07:00
committed by Mattie Ruth
parent 2959029151
commit fc09854d7f
2 changed files with 59 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
examples/simple-chatbot/client/javascript/index.html
View File

@@ -1,47 +1,44 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI Chatbot</title>
</head>
<head> <body>
<meta charset="UTF-8"> <div class="container">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <div class="status-bar">
<title>AI Chatbot</title> <div class="status">
</head> Status: <span id="connection-status">Disconnected</span>
<body>
<div class="container">
<div class="status-bar">
<div class="status">
Status: <span id="connection-status">Disconnected</span>
</div>
<div class="controls">
<button id="connect-btn">Connect</button>
<button id="disconnect-btn" disabled>Disconnect</button>
</div>
</div>
<div class="main-content">
<div class="bot-container">
<div id="bot-video-container">
</div> </div>
<audio id="bot-audio" autoplay></audio> <div class="controls">
<button id="connect-btn">Connect</button>
<button id="disconnect-btn" disabled>Disconnect</button>
</div>
</div>
<div class="main-content">
<div class="bot-container">
<div id="bot-video-container"></div>
<audio id="bot-audio" autoplay></audio>
</div>
</div>
<div class="device-bar">
<div class="device-controls">
<select id="device-selector"></select>
<button id="mic-toggle-btn">Unmute Mic</button>
</div>
</div>
<div class="debug-panel">
<h3>Debug Info</h3>
<div id="debug-log"></div>
</div> </div>
</div> </div>
<div class="device-bar"> <script type="module" src="/src/app.js"></script>
<div class="device-controls"> <link rel="stylesheet" href="/src/style.css" />
<select id="device-selector"></select> </body>
<button id="mic-toggle-btn">Mute Mic</button> </html>
</div>
</div>
<div class="debug-panel">
<h3>Debug Info</h3>
<div id="debug-log"></div>
</div>
</div>
<script type="module" src="/src/app.js"></script>
<link rel="stylesheet" href="/src/style.css">
</body>
</html>

31
examples/simple-chatbot/client/javascript/src/app.js
View File

@@ -42,6 +42,7 @@ class ChatbotClient {
this.debugLog = document.getElementById('debug-log'); this.debugLog = document.getElementById('debug-log');
this.botVideoContainer = document.getElementById('bot-video-container'); this.botVideoContainer = document.getElementById('bot-video-container');
this.deviceSelector = document.getElementById('device-selector'); this.deviceSelector = document.getElementById('device-selector');
this.micToggleBtn = document.getElementById('mic-toggle-btn');
// Create an audio element for bot's voice output // Create an audio element for bot's voice output
this.botAudio = document.createElement('audio'); this.botAudio = document.createElement('audio');
@@ -79,13 +80,19 @@ class ChatbotClient {
// Handle mic mute/unmute toggle // Handle mic mute/unmute toggle
const micToggleBtn = document.getElementById('mic-toggle-btn'); const micToggleBtn = document.getElementById('mic-toggle-btn');
micToggleBtn.addEventListener('click', () => { micToggleBtn.addEventListener('click', async () => {
let micEnabled = this.pcClient.isMicEnabled; if (this.pcClient.state === 'disconnected') {
micToggleBtn.textContent = micEnabled ? 'Unmute Mic' : 'Mute Mic'; await this.pcClient.initDevices();
this.pcClient.enableMic(!micEnabled); } else {
this.pcClient.enableMic(!this.pcClient.isMicEnabled);
}
}); });
} }
updateMicToggleButton(micEnabled) {
console.log('Mic enabled:', micEnabled, this.pcClient?.isMicEnabled);
this.micToggleBtn.textContent = micEnabled ? 'Mute Mic' : 'Unmute Mic';
}
/** /**
* Set up the Pipecat client and Daily transport * Set up the Pipecat client and Daily transport
*/ */
@@ -94,7 +101,7 @@ class ChatbotClient {
// Initialize the Pipecat client with a DailyTransport and our configuration // Initialize the Pipecat client with a DailyTransport and our configuration
this.pcClient = new PipecatClient({ this.pcClient = new PipecatClient({
transport: new DailyTransport(), transport: new DailyTransport(),
enableMic: true, // Enable microphone for user input enableMic: true,
enableCam: false, enableCam: false,
callbacks: { callbacks: {
// Handle connection state changes // Handle connection state changes
@@ -109,6 +116,7 @@ class ChatbotClient {
this.connectBtn.disabled = false; this.connectBtn.disabled = false;
this.disconnectBtn.disabled = true; this.disconnectBtn.disabled = true;
this.log('Client disconnected'); this.log('Client disconnected');
this.updateMicToggleButton(false);
}, },
// Handle transport state changes // Handle transport state changes
onTransportStateChanged: (state) => { onTransportStateChanged: (state) => {
@@ -156,8 +164,6 @@ class ChatbotClient {
// Set up listeners for media track events // Set up listeners for media track events
this.setupTrackListeners(); this.setupTrackListeners();
await this.pcClient.initDevices();
this.setupEventListeners(); this.setupEventListeners();
} }
@@ -216,13 +222,16 @@ class ChatbotClient {
// Listen for new tracks starting // Listen for new tracks starting
this.pcClient.on(RTVIEvent.TrackStarted, (track, participant) => { this.pcClient.on(RTVIEvent.TrackStarted, (track, participant) => {
// Only handle non-local (bot) tracks
if (!participant?.local) { if (!participant?.local) {
if (track.kind === 'audio') { if (track.kind === 'audio') {
this.setupAudioTrack(track); this.setupAudioTrack(track);
} else if (track.kind === 'video') { } else if (track.kind === 'video') {
this.setupVideoTrack(track); this.setupVideoTrack(track);
} }
} else if (track.kind === 'audio') {
console.log(`Local audio track started: `, this.pcClient.tracks());
// If local audio track starts, update mic
this.updateMicToggleButton(true);
} }
}); });
@@ -230,9 +239,13 @@ class ChatbotClient {
this.pcClient.on(RTVIEvent.TrackStopped, (track, participant) => { this.pcClient.on(RTVIEvent.TrackStopped, (track, participant) => {
this.log( this.log(
`Track stopped event: ${track.kind} from ${ `Track stopped event: ${track.kind} from ${
participant?.name || 'unknown' participant ? (participant.local ? 'local' : 'bot') : 'unknown'
}` }`
); );
if (participant?.local && track.kind === 'audio') {
// If local audio track stops, update mic toggle button
this.updateMicToggleButton(false);
}
}); });
} }