Merge branch 'feat/audio_support' of https://github.com/varshith15/comfystream into feat/audio_support

Author: varshith15

README.md

@@ -162,6 +162,9 @@ By default the app will be available at <http://localhost:3000>.
 
 The Stream URL is the URL of the [server](#run-server) which defaults to <http://127.0.0.1:8888>.
 
+> [!NOTE]
+> To run the UI on HTTPS (necessary for webcam functionality), use `npm run dev:https`. You'll need to accept the self-signed certificate in your browser.
+
 ## Limitations
 
 At the moment, a workflow must fufill the following requirements:

ui/.gitignore

@@ -38,3 +38,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+certificates

ui/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
+    "dev:https": "next dev --experimental-https",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

ui/src/app/globals.css

@@ -6,6 +6,24 @@ body {
   font-family: Arial, Helvetica, sans-serif;
 }
 
+/**
+ * Prevents iOS Safari from zooming in on focus.
+ *
+ * iOS automatically zooms inputs if text is smaller than 16px.
+ * This enforces `text-base` (16px) on affected elements only on iOS.
+ */
+@supports (-webkit-touch-callout: none) {
+  /* Apply the fix to standard text inputs */
+  .u-ios-text-base {
+    @apply text-base;
+  }
+
+  /* Apply the fix to file input text */
+  .u-ios-file-text-base::file-selector-button {
+    font-size: 16px !important;
+  }
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;

ui/src/components/room.tsx

@@ -154,7 +154,11 @@ function Stage({ connected, onStreamReady }: StageProps) {
   );
 }
 
-export function Room() {
+/**
+ * Creates a room component for the user to stream their webcam to ComfyStream and
+ * see the output stream.
+ */
+export const Room = () => {
   const [connect, setConnect] = useState<boolean>(false);
   const [isConnected, setIsConnected] = useState<boolean>(false);
   const [isStreamSettingsOpen, setIsStreamSettingsOpen] =
@@ -229,15 +233,16 @@ export function Room() {
           onDisconnected={handleDisconnected}
           localStream={localStream}
         >
-          <div className="min-h-[100dvh] flex flex-col items-center justify-start">
-            <div className="w-full max-h-[100dvh] flex flex-col lg:flex-row landscape:flex-row justify-center items-center lg:space-x-4 sm:pt-[10vh]">
-              {/* Output Stream */}
-              <div className="relative w-full max-w-[100vw] h-auto aspect-square sm:max-w-[512px] sm:max-h-[512px] md:max-w-[512px] md:max-h-[512px] flex justify-center items-center bg-slate-900 sm:border-[2px] md:border-0 lg:border-2 rounded-md">
+          <div className="min-h-[100dvh] flex flex-col items-center justify-center md:justify-start">
+            <div className="w-full max-h-[100dvh] flex flex-col md:flex-row landscape:flex-row justify-center items-center lg:space-x-4 md:pt-[10vh]">
+              {/* Output stream */}
+              <div className="relative w-full max-w-[100vw] h-auto aspect-square sm:max-w-[640px] sm:max-h-[640px] md:max-w-[512px] md:max-h-[512px] flex justify-center items-center bg-slate-900 sm:border-[2px] md:border-0 lg:border-2 rounded-md">
                 <Stage
                   connected={isConnected}
                   onStreamReady={onRemoteStreamReady}
                 />
-                <div className="absolute bottom-[8px] right-[8px] w-[90px] h-[90px] bg-slate-800 block md:hidden">
+                {/* Thumbnail (mobile) */}
+                <div className="absolute bottom-[8px] right-[8px] w-[70px] h-[70px] sm:w-[90px] sm:h-[90px] bg-slate-800 block md:hidden">
                   <Webcam
                     onStreamReady={onStreamReady}
                     deviceId={config.selectedDeviceId}
@@ -246,7 +251,7 @@ export function Room() {
                   />
                 </div>
               </div>
-              {/* Input Stream */}
+              {/* Input stream (desktop) */}
               <div className="hidden md:flex w-full sm:w-full md:w-full h-[50dvh] sm:h-auto md:h-auto max-w-[512px] max-h-[512px] aspect-square justify-center items-center lg:border-2 lg:rounded-md bg-slate-800">
                 <Webcam
                   onStreamReady={onStreamReady}
@@ -269,4 +274,4 @@ export function Room() {
       </div>
     </main>
   );
-}
+};

ui/src/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 u-ios-text-base u-ios-file-text-base",
           className
         )}
         ref={ref}

ui/src/components/ui/select.tsx

@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm  ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 u-ios-text-base",
       className
     )}
     {...props}
@@ -67,7 +67,7 @@ const SelectOption = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 u-ios-text-base",
       className
     )}
     {...props}