1 files changed, 76 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ab9b120
--- /dev/null
+++ b/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+    <title>synced-playback</title>
+  </head>
+  <body id="body">
+    <video id="video1" autoplay playsinline></video>
+
+    <div>
+      <input type="number" id="seekTime" value="30">
+      <button type="button" onClick="seekClick()">Seek</button>
+      <button type="button" onClick="playClick()">Play</button>
+      <button type="button" onClick="pauseClick()">Pause</button>
+    </div>
+
+    <script>
+     let conn = new WebSocket('wss://' + window.location.host + window.location.pathname + '/ws/')
+     let pc = new RTCPeerConnection()
+
+     window.seekClick = () => {
+       conn.send(JSON.stringify({event: 'seek', data: document.getElementById('seekTime').value}))
+     }
+     window.playClick = () => {
+       conn.send(JSON.stringify({event: 'play', data: ''}))
+     }
+     window.pauseClick = () => {
+       conn.send(JSON.stringify({event: 'pause', data: ''}))
+     }
+
+     pc.ontrack = function (event) {
+       if (event.track.kind === 'audio') {
+         return
+       }
+       var el = document.getElementById('video1')
+       el.srcObject = event.streams[0]
+       el.autoplay = true
+       el.controls = true
+     }
+
+     conn.onopen = () => {
+       navigator.mediaDevices.getUserMedia({video: true, audio: true}).then(g => {
+         for (const track of g.getTracks()) {
+           pc.addTrack(track);
+         }
+
+         pc.createOffer({offerToReceiveVideo: true, offerToReceiveAudio: true}).then(offer => {
+           pc.setLocalDescription(offer)
+           conn.send(JSON.stringify({event: 'offer', data: JSON.stringify(offer)}))
+         })
+       }).catch(e => { console.log(`failed getUserMedia: ${e}`) });
+     }
+
+     conn.onclose = evt => {
+       console.log('Connection closed')
+     }
+
+     conn.onmessage = evt => {
+       let msg = JSON.parse(evt.data)
+       if (!msg) {
+         return console.log('failed to parse msg')
+       }
+
+       switch (msg.event) {
+         case 'answer':
+           answer = JSON.parse(msg.data)
+           if (!answer) {
+             return console.log('failed to parse answer')
+           }
+           pc.setRemoteDescription(answer)
+       }
+     }
+     window.conn = conn
+    </script>
+  </body>
+</html>