diff --git a/demo/app.py b/demo/app.py
index 7a5bd53..f943011 100644
--- a/demo/app.py
+++ b/demo/app.py
@@ -97,6 +97,22 @@ with gr.Blocks(css=css) as demo:
             mode="send-receive",
             video_chat=True,
             elem_id="video-source",
+            track_constraints={
+                "video": {
+                    "facingMode": "user",
+                    "width": {"ideal": 500},
+                    "height": {"ideal": 500},
+                    "frameRate": {"ideal": 30},
+                },
+                "audio": {
+                    "echoCancellation": True,
+                    "noiseSuppression": {"exact": True},
+                    "autoGainControl": {"exact": False},
+                    "sampleRate": {"ideal": 24000},
+                    "sampleSize": {"ideal": 16},
+                    "channelCount": {"exact": 1},
+                },
+            }
         )
         webrtc.stream(
             VideoChatHandler(),
diff --git a/dist/gradio_webrtc-0.0.30.dev0-py3-none-any.whl b/dist/gradio_webrtc-0.0.30.dev0-py3-none-any.whl
index 3deaac5..5ab2537 100644
Binary files a/dist/gradio_webrtc-0.0.30.dev0-py3-none-any.whl and b/dist/gradio_webrtc-0.0.30.dev0-py3-none-any.whl differ
diff --git a/frontend/Index.svelte b/frontend/Index.svelte
index a0876cc..68c98a1 100644
--- a/frontend/Index.svelte
+++ b/frontend/Index.svelte
@@ -81,6 +81,7 @@
 		on:error={({ detail }) => gradio.dispatch("error", detail)}
 		i18n={gradio.i18n}
 		stream_handler={(...args) => gradio.client.stream(...args)}
+		{track_constraints}
 		{height}
 		{on_change_cb} {rtc_configuration}
 		on:tick={() => gradio.dispatch("tick")}
diff --git a/frontend/shared/stream_utils.ts b/frontend/shared/stream_utils.ts
index 4ad6329..50741f7 100644
--- a/frontend/shared/stream_utils.ts
+++ b/frontend/shared/stream_utils.ts
@@ -19,18 +19,30 @@ export async function get_video_stream(
   include_audio: boolean | { deviceId: { exact: string } },
   video_source: HTMLVideoElement,
   device_id?: string,
-  track_constraints?: MediaTrackConstraints
+  track_constraints?:
+    | MediaTrackConstraints
+    | { video: MediaTrackConstraints; audio: MediaTrackConstraints }
 ): Promise<MediaStream> {
-  const fallback_constraints = track_constraints || {
-    width: { ideal: 500 },
-    height: { ideal: 500 },
-  };
-
+  console.log(track_constraints);
+  const video_fallback_constraints = (track_constraints as any)?.video ||
+    track_constraints || {
+      width: { ideal: 500 },
+      height: { ideal: 500 },
+    };
+  const audio_fallback_constraints = (track_constraints as any)?.audio ||
+    track_constraints || {
+      echoCancellation: true,
+      noiseSuppression: true,
+      autoGainControl: true,
+    };
   const constraints = {
     video: device_id
-      ? { deviceId: { exact: device_id }, ...fallback_constraints }
-      : fallback_constraints,
-    audio: include_audio,
+      ? { deviceId: { exact: device_id }, ...video_fallback_constraints }
+      : video_fallback_constraints,
+    audio:
+      typeof include_audio === "object"
+        ? { ...include_audio, ...audio_fallback_constraints }
+        : include_audio,
   };
 
   return navigator.mediaDevices