Refactoring the video-transform demo to be able to enable or disable the cam.

examples/p2p-webrtc/video-transform/client/typescript/index.html

@@ -51,6 +51,7 @@
         <div class="bot-container">
             <div id="bot-video-container">
                 <video id="bot-video" autoplay="true" playsinline="true"></video>
+                <button id="mute-btn">📷</button>
             </div>
             <audio id="bot-audio" autoplay></audio>
         </div>

examples/p2p-webrtc/video-transform/client/typescript/src/app.ts

@@ -1,12 +1,13 @@
 import {
     SmallWebRTCTransport
 } from "@pipecat-ai/small-webrtc-transport";
-import {Participant, RTVIClient, RTVIClientOptions} from "@pipecat-ai/client-js";
+import {Participant, RTVIClient, RTVIClientOptions, Transport} from "@pipecat-ai/client-js";
 
 class WebRTCApp {
 
     private declare connectBtn: HTMLButtonElement;
     private declare disconnectBtn: HTMLButtonElement;
+    private declare muteBtn: HTMLButtonElement;
 
     private declare audioInput: HTMLSelectElement;
     private declare videoInput: HTMLSelectElement;
@@ -32,12 +33,10 @@ class WebRTCApp {
     private initializeRTVIClient(): void {
         const transport = new SmallWebRTCTransport();
         const RTVIConfig: RTVIClientOptions = {
-            // need to understand why it is complaining
-            // @ts-ignore
-            transport,
             params: {
                 baseUrl: "/api/offer"
             },
+            transport: transport as Transport,
             enableMic: true,
             enableCam: true,
             callbacks: {
@@ -92,6 +91,7 @@ class WebRTCApp {
     private setupDOMElements(): void {
         this.connectBtn = document.getElementById('connect-btn') as HTMLButtonElement;
         this.disconnectBtn = document.getElementById('disconnect-btn') as HTMLButtonElement;
+        this.muteBtn = document.getElementById('mute-btn') as HTMLButtonElement;
 
         this.audioInput = document.getElementById('audio-input') as HTMLSelectElement;
         this.videoInput = document.getElementById('video-input') as HTMLSelectElement;
@@ -118,6 +118,12 @@ class WebRTCApp {
             let videoDevice = e.target?.value
             this.rtviClient.updateCam(videoDevice)
         })
+        this.muteBtn.addEventListener('click', () => {
+            let isCamEnabled = this.rtviClient.isCamEnabled
+            this.rtviClient.enableCam(!isCamEnabled)
+            this.muteBtn.textContent = isCamEnabled ? '📵' : '📷';
+        });
+
     }
 
     private log(message: string): void {

examples/p2p-webrtc/video-transform/client/typescript/src/style.css

@@ -89,6 +89,7 @@ button:disabled {
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
 }
 
 #bot-video-container video {
@@ -97,6 +98,20 @@ button:disabled {
     object-fit: cover;
 }
 
+#mute-btn {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    background-color: rgba(0, 0, 0, 0.6);
+    color: white;
+    border: none;
+    border-radius: 20px;
+    padding: 8px 12px;
+    cursor: pointer;
+    font-size: 16px;
+    z-index: 1;
+}
+
 .debug-panel {
     background-color: #fff;
     border-radius: 8px;