From 20ec323647bad9508c2af5d122e0626d95ea07ad Mon Sep 17 00:00:00 2001
From: Filipi Fuchter <filipi87@gmail.com>
Date: Thu, 10 Apr 2025 11:23:05 -0300
Subject: [PATCH] Refactoring the video-transform demo to be able to enable or
 disable the cam.

---
 .../video-transform/client/typescript/index.html  |  1 +
 .../video-transform/client/typescript/src/app.ts  | 14 ++++++++++----
 .../client/typescript/src/style.css               | 15 +++++++++++++++
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/examples/p2p-webrtc/video-transform/client/typescript/index.html b/examples/p2p-webrtc/video-transform/client/typescript/index.html
index d8d82ff52..95f8f59de 100644
--- a/examples/p2p-webrtc/video-transform/client/typescript/index.html
+++ b/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>
diff --git a/examples/p2p-webrtc/video-transform/client/typescript/src/app.ts b/examples/p2p-webrtc/video-transform/client/typescript/src/app.ts
index 6402d4c9a..577715373 100644
--- a/examples/p2p-webrtc/video-transform/client/typescript/src/app.ts
+++ b/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 {
diff --git a/examples/p2p-webrtc/video-transform/client/typescript/src/style.css b/examples/p2p-webrtc/video-transform/client/typescript/src/style.css
index 82c97eb7d..7397332ac 100644
--- a/examples/p2p-webrtc/video-transform/client/typescript/src/style.css
+++ b/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;