diff --git a/www/webrtc-sync.html b/www/webrtc-sync.html
index 36cf1189..4f818f3f 100644
--- a/www/webrtc-sync.html
+++ b/www/webrtc-sync.html
@@ -5,61 +5,63 @@
     <title>go2rtc - WebRTC</title>
     <style>
         body {
+            background-color: black;
             margin: 0;
             padding: 0;
         }
 
-        html, body {
+        html, body, video {
             height: 100%;
             width: 100%;
         }
-
-        #video {
-            /* video "container" size */
-            width: 100%;
-            height: 100%;
-            background: black;
-        }
     </style>
 </head>
 <body>
-<!-- muted is important for autoplay -->
 <video id="video" autoplay controls playsinline muted></video>
 <script>
-    // support api_path
-    const baseUrl = location.origin + location.pathname.substr(
-        0, location.pathname.lastIndexOf("/")
-    );
+    function PeerConnection(userMedia) {
+        return new Promise((resolve, reject) => {
+            const pc = new RTCPeerConnection({
+                iceServers: [{urls: 'stun:stun.l.google.com:19302'}]
+            })
 
-    const pc = new RTCPeerConnection({
-        iceServers: [
-            {urls: 'stun:stun.l.google.com:19302'},
-        ]
-    });
+            pc.addEventListener('icegatheringstatechange', () => {
+                if (pc.iceGatheringState === 'complete') resolve(pc)
+            })
 
-    pc.addEventListener('icegatheringstatechange', async () => {
-        if (pc.iceGatheringState !== 'complete') return;
+            document.getElementById('video').srcObject = new MediaStream([
+                pc.addTransceiver('video', {direction: 'recvonly'}).receiver.track,
+                pc.addTransceiver('audio', {direction: 'recvonly'}).receiver.track
+            ])
 
-        let r = await fetch(`${baseUrl}/api/webrtc${location.search}`, {
-            method: 'POST', body: pc.localDescription.sdp,
-        });
-        await pc.setRemoteDescription({
-            type: 'answer', sdp: await r.text()
-        });
-    });
-    pc.addEventListener('track', ev => {
-        let video = document.getElementById('video');
-        if (video.srcObject === null) {
-            video.srcObject = ev.streams[0];
+            if (userMedia) {
+                userMedia.getTracks().forEach(track => {
+                    pc.addTransceiver(track, {direction: 'sendonly'})
+                })
+            }
+
+            pc.createOffer().then(offer => pc.setLocalDescription(offer))
+
+            setTimeout(() => resolve(pc), 3000)
+        })
+    }
+
+    async function userMedia() {
+        try {
+            return await navigator.mediaDevices.getUserMedia({audio: true})
+        } catch (e) {
+            return null
         }
-    });
+    }
 
-    pc.addTransceiver('video', {direction: 'recvonly'});
-    pc.addTransceiver('audio', {direction: 'recvonly'});
+    async function connect() {
+        const pc = await PeerConnection(await userMedia())
+        const url = new URL('api/webrtc' + location.search, location.href)
+        const r = await fetch(url, {method: 'POST', body: pc.localDescription.sdp})
+        await pc.setRemoteDescription({type: 'answer', sdp: await r.text()})
+    }
 
-    pc.createOffer().then(offer => {
-        pc.setLocalDescription(offer);
-    });
+    connect()
 </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/www/webrtc.html b/www/webrtc.html
index 1463b7b7..15da853c 100644
--- a/www/webrtc.html
+++ b/www/webrtc.html
@@ -5,108 +5,77 @@
     <title>go2rtc - WebRTC</title>
     <style>
         body {
+            background-color: black;
             margin: 0;
             padding: 0;
         }
 
-        html, body {
+        html, body, video {
             height: 100%;
             width: 100%;
         }
-
-        #video {
-            /* video "container" size */
-            width: 100%;
-            height: 100%;
-            background: black;
-        }
     </style>
 </head>
 <body>
 <video id="video" autoplay controls playsinline muted></video>
 <script>
-    const baseUrl = location.origin + location.pathname.substr(
-        0, location.pathname.lastIndexOf("/")
-    );
-
-    function init(stream) {
-        // support api_path
-        const ws = new WebSocket(`ws${baseUrl.substr(4)}/api/ws${location.search}`);
-        ws.onopen = () => {
-            console.debug('ws.onopen');
-
-            pc.createOffer().then(offer => {
-                pc.setLocalDescription(offer).then(() => {
-                    const msg = {type: 'webrtc/offer', value: pc.localDescription.sdp};
-                    ws.send(JSON.stringify(msg));
-                });
-            });
-        }
-        ws.onmessage = ev => {
-            const msg = JSON.parse(ev.data);
-            console.debug('ws.onmessage', msg);
-
-            if (msg.type === 'webrtc/candidate') {
-                pc.addIceCandidate({candidate: msg.value, sdpMid: '0'});
-            } else if (msg.type === 'webrtc/answer') {
-                pc.setRemoteDescription({type: 'answer', sdp: msg.value});
-            }
-        }
-
+    function PeerConnection(userMedia) {
         const pc = new RTCPeerConnection({
             iceServers: [{urls: 'stun:stun.l.google.com:19302'}]
-        });
-        pc.onicecandidate = ev => {
-            console.debug("pc.onicecandidate", ev.candidate);
+        })
 
-            if (ev.candidate !== null) {
-                ws.send(JSON.stringify({
-                    type: 'webrtc/candidate', value: ev.candidate.candidate
-                }));
+        document.getElementById('video').srcObject = new MediaStream([
+            pc.addTransceiver('video', {direction: 'recvonly'}).receiver.track,
+            pc.addTransceiver('audio', {direction: 'recvonly'}).receiver.track
+        ])
+
+        if (userMedia) {
+            userMedia.getTracks().forEach(track => {
+                pc.addTransceiver(track, {direction: 'sendonly'})
+            })
+        }
+
+        return pc
+    }
+
+    async function userMedia() {
+        try {
+            return await navigator.mediaDevices.getUserMedia({audio: true})
+        } catch (e) {
+            return null
+        }
+    }
+
+    async function connect() {
+        const pc = PeerConnection(await userMedia())
+
+        const url = new URL('api/ws' + location.search, location.href)
+        const ws = new WebSocket('ws' + url.toString().substring(4))
+
+        ws.addEventListener('open', () => {
+            pc.addEventListener('icecandidate', ev => {
+                if (!ev.candidate) return
+                const msg = {type: 'webrtc/candidate', value: ev.candidate.candidate}
+                ws.send(JSON.stringify(msg))
+            })
+
+            pc.createOffer().then(offer => pc.setLocalDescription(offer)).then(() => {
+                const msg = {type: 'webrtc/offer', value: pc.localDescription.sdp}
+                ws.send(JSON.stringify(msg))
+            })
+        })
+
+        ws.addEventListener('message', ev => {
+            const msg = JSON.parse(ev.data)
+            if (msg.type === 'webrtc/candidate') {
+                pc.addIceCandidate({candidate: msg.value, sdpMid: '0'})
+            } else if (msg.type === 'webrtc/answer') {
+                pc.setRemoteDescription({type: 'answer', sdp: msg.value})
             }
-        }
-        pc.ontrack = ev => {
-            const video = document.getElementById('video');
-            console.debug('pc.ontrack', video.srcObject !== null);
-
-            // when audio track not exist in Chrome
-            if (ev.streams.length === 0) return;
-
-            // when audio track not exist in Firefox
-            if (ev.streams[0].id[0] === '{') return;
-
-            // when stream already init
-            if (video.srcObject !== null) return;
-
-            video.srcObject = ev.streams[0];
-        }
-
-        if (stream) {
-            stream.getTracks().forEach(track => {
-                pc.addTransceiver('audio', {direction: 'sendonly'});
-                const sender = pc.addTrack(track, stream);
-                // track.stop();
-                // setTimeout(() => {
-                //     navigator.mediaDevices.getUserMedia({audio: true}).then(stream => {
-                //         stream.getTracks().forEach(track => {
-                //             sender.replaceTrack(track);
-                //         });
-                //     });
-                // }, 10000);
-            });
-        }
-
-        // Safari don't support "offerToReceiveVideo"
-        // so need to create transeivers manually
-        pc.addTransceiver('video', {direction: 'recvonly'});
-        pc.addTransceiver('audio', {direction: 'recvonly'});
+        })
     }
 
-    if (navigator.mediaDevices) {
-        navigator.mediaDevices.getUserMedia({audio: true}).then(init).catch(() => init());
-    } else {
-        init();
-    }
+    connect()
 </script>
 </body>
 </html>
\ No newline at end of file
