diff --git a/web/src/components/WebRtcPlayer.jsx b/web/src/components/WebRtcPlayer.jsx
index a454c67d3..b5760afed 100644
--- a/web/src/components/WebRtcPlayer.jsx
+++ b/web/src/components/WebRtcPlayer.jsx
@@ -1,10 +1,11 @@
 import { h } from 'preact';
 import { baseUrl } from '../api/baseUrl';
 import { useCallback, useEffect } from 'preact/hooks';
+import { useMemo } from 'react';
 
 export default function WebRtcPlayer({ camera, width, height }) {
   const url = `${baseUrl.replace(/^http/, 'ws')}live/webrtc/api/ws?src=${camera}`;
-
+  const ws = useMemo(() => new WebSocket(url), [url])
   const PeerConnection = useCallback(async (media) => {
     const pc = new RTCPeerConnection({
       iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
@@ -60,7 +61,6 @@ export default function WebRtcPlayer({ camera, width, height }) {
 
   const connect = useCallback(async () => {
     const pc = await PeerConnection('video+audio');
-    const ws = new WebSocket(url);
 
     ws.addEventListener('open', () => {
       pc.addEventListener('icecandidate', (ev) => {
@@ -85,11 +85,19 @@ export default function WebRtcPlayer({ camera, width, height }) {
         pc.setRemoteDescription({ type: 'answer', sdp: msg.value });
       }
     });
-  }, [PeerConnection, url]);
+
+    ws.addEventListener('close', () => {
+      pc.close();
+    })
+  }, [PeerConnection, ws]);
 
   useEffect(() => {
     connect();
-  }, [connect]);
+
+    return () => {
+      ws.close();
+    }
+  }, [connect, ws]);
 
   return (
     <div>