diff options
| author | dakkar <dakkar@thenautilus.net> | 2020-06-21 17:40:38 +0000 |
|---|---|---|
| committer | dakkar <dakkar@thenautilus.net> | 2020-07-25 11:56:19 +0000 |
| commit | a00ae567375222a8afa65579ac0290ff1ebe6b26 (patch) | |
| tree | 5060c121c71efab50916bbf61e43ca35b1148189 /index.html | |
| parent | disable origin check for websocket connection (diff) | |
| download | rtwatch-a00ae567375222a8afa65579ac0290ff1ebe6b26.tar.gz rtwatch-a00ae567375222a8afa65579ac0290ff1ebe6b26.tar.bz2 rtwatch-a00ae567375222a8afa65579ac0290ff1ebe6b26.zip | |
move HTML+JS to separate file
I got fed up with rebuilding every time I changed something; plus,
syntax highlight is easier this way
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 76 |
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> |