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 55a93f7..110f2ec 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/shared/AudioWave.svelte b/frontend/shared/AudioWave.svelte
index 9a31e80..8eaeb1c 100644
--- a/frontend/shared/AudioWave.svelte
+++ b/frontend/shared/AudioWave.svelte
@@ -20,7 +20,7 @@
 
   $: containerWidth = icon 
     ? "128px"
-    : `calc((var(--boxSize) + var(--gutter)) * ${numBars})`;
+    : `calc((var(--boxSize) + var(--gutter)) * ${numBars} + 80px)`;
 
   $: if(stream_state === "open") setupAudioContext();
 
@@ -90,7 +90,11 @@
   </div>
 {:else}
   <div class="gradio-webrtc-boxContainer" style:width={containerWidth}>
-    {#each Array(numBars) as _}
+    {#each Array(numBars/2) as _}
+      <div class="gradio-webrtc-box"></div>
+    {/each}
+    <div class="split-container"></div>
+    {#each Array(numBars/2) as _}
       <div class="gradio-webrtc-box"></div>
     {/each}
   </div>
@@ -111,10 +115,13 @@
   display: flex;
   justify-content: space-between;
   height: 64px;
-  --boxSize: 8px;
+  --boxSize: 4px;
   --gutter: 4px;
-}
 
+}
+.split-container {
+    width: 80px;
+  }
 .gradio-webrtc-box {
   height: 100%;
   width: var(--boxSize);
diff --git a/frontend/shared/VideoChat.svelte b/frontend/shared/VideoChat.svelte
index 9fb68fd..b358a16 100644
--- a/frontend/shared/VideoChat.svelte
+++ b/frontend/shared/VideoChat.svelte
@@ -207,7 +207,10 @@
 								webcam_received = false;
                 dispatch("error", "Too many concurrent users. Come back later!");
             });
-        } else {
+        } else if (stream_state === 'waiting') {
+					// waiting 中不允许操作
+					return
+				}else {
 					remoteVideoPosition.init = false 
 					computeLocalPosition()
             stop(pc);
@@ -237,12 +240,6 @@
 		};
 	}
 
-	function handle_click_outside(event: MouseEvent): void {
-		event.preventDefault();
-		event.stopPropagation();
-		options_open = false;
-	}
-
 	let wrapperRef: HTMLDivElement;
 	const wrapperRect = {
 		width: 0,
@@ -294,6 +291,7 @@
 	}
 
 	function computeLocalPosition() {
+		if (!localVideoRef || !localVideoContainerRef || !localVideoRef.videoHeight) return
 		if (remoteVideoPosition.init) {
 			// 存在远端视频则计算画中画
 			let height = remoteVideoPosition.height / 4
@@ -321,7 +319,7 @@
 		}
 	}
 	function computeRemotePosition() {
-		if (!remoteVideoRef.srcObject) return
+		if (!remoteVideoRef.srcObject || !remoteVideoRef.videoHeight) return
 		console.log(remoteVideoRef.videoHeight, remoteVideoRef.videoWidth)
 		let height = wrapperRect.height - 24
 		let width = height / remoteVideoRef.videoHeight* remoteVideoRef.videoWidth
@@ -347,6 +345,9 @@
 	}
 
 	window.addEventListener('resize', () => {
+		wrapperRef.getBoundingClientRect()
+		wrapperRect.width = wrapperRef.clientWidth
+		wrapperRect.height = wrapperRef.clientHeight
 		computeLocalPosition()
 		computeRemotePosition()
 	})
@@ -378,7 +379,7 @@
 					style:width={videoShowType=== 'picture-in-picture' ?remoteVideoPosition.width+'px':''}
 					style:height={videoShowType === 'picture-in-picture' ?remoteVideoPosition.height + 'px': ''}		
 			>
-				<video class="remote-video" on:playing={computeRemotePosition} bind:this={remoteVideoRef}  autoplay playsinline />
+				<video class="remote-video" on:playing={computeRemotePosition} bind:this={remoteVideoRef}  autoplay playsinline muted={volumeMuted}/>
 			</div>
 			<div class="actions" 
 				style:left={videoShowType === 'picture-in-picture' ? actionsPosition.left+'px': ''}
@@ -609,6 +610,7 @@
 				background: linear-gradient(180deg, #7873F6 0%, #524DE1 100%);
 				transition: all 0.3s;
 				z-index: 2;
+				cursor: pointer;
 			}
 			.start-chat {
 				font-size: 16px;
diff --git a/pyproject.toml b/pyproject.toml
index bdba856..23dfc0c 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -16,7 +16,7 @@ requires-python = ">=3.10"
 authors = [{ name = "Freddy Boulton", email = "YOUREMAIL@domain.com" }]
 keywords = ["gradio-custom-component", "gradio-template-Video", "streaming", "webrtc", "realtime"]
 # Add dependencies here
-dependencies = ["gradio>=4.0,<6.0", "aiortc"]
+dependencies = ["gradio>=4.0,<6.0", "aiortc", "numpy<3.0,>=1.0"]
 classifiers = [
   'Development Status :: 3 - Alpha',
   'Operating System :: OS Independent',
@@ -47,7 +47,7 @@ vad = ["librosa", "onnxruntime"]
 stopword = ["silero", "librosa", "onnxruntime"]
 
 [tool.hatch.build]
-artifacts = ["/backend/gradio_webrtc/templates", "*.pyi"]
+artifacts = ["/backend/gradio_webrtc/templates", "*.pyi", "/Users/huangbinchao/miniconda3/envs/gradio_rtc/lib/python3.12/site-packages/gradio_webrtc/templates"]
 
 [tool.hatch.build.targets.wheel]
 packages = ["/backend/gradio_webrtc"]