Improvements on the video transform example to work on mobile.

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

@@ -32,6 +32,7 @@ select {
 
 .status-bar {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
     padding: 10px;
@@ -69,6 +70,7 @@ button:disabled {
     padding: 20px;
     margin-bottom: 20px;
     display: flex;
+    flex-wrap: wrap;
 }
 
 .bot-container {
@@ -79,8 +81,8 @@ button:disabled {
 }
 
 #bot-video-container {
-    width: 640px;
+    width: 90%;
-    height: 360px;
+    aspect-ratio: 16 / 9;
     background-color: #e0e0e0;
     border-radius: 8px;
     overflow: hidden;
@@ -98,10 +100,18 @@ button:disabled {
 .debug-panel {
     background-color: #fff;
     border-radius: 8px;
-    padding-left: 20px;
     width: 50%;
 }
 
+@media (max-width: 768px) {
+    .bot-container {
+        width: 100%;
+    }
+    .debug-panel {
+        width: 100%;
+    }
+}
+
 .debug-panel h3 {
     margin: 0 0 10px 0;
     font-size: 16px;
@@ -109,10 +119,9 @@ button:disabled {
 }
 
 #debug-log {
-    height: 500px;
+    height: 360px;
     overflow-y: auto;
     background-color: #f8f8f8;
-    padding: 10px;
     border-radius: 4px;
     font-family: monospace;
     font-size: 12px;

src/pipecat/transports/network/small_webrtc.py

@@ -138,7 +138,6 @@ class RawVideoTrack(VideoStreamTrack):
 
 
 class SmallWebRTCClient:
-
     FORMAT_CONVERSIONS = {
         "yuv420p": cv2.COLOR_YUV2RGB_I420,
         "yuvj420p": cv2.COLOR_YUV2RGB_I420,  # OpenCV treats both the same