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 | |
| 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
| -rw-r--r-- | index.html | 76 | ||||
| -rw-r--r-- | main.go | 75 |
2 files changed, 76 insertions, 75 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> @@ -13,75 +13,6 @@ import ( "github.com/pion/webrtc/v2" ) -const homeHTML = `<!DOCTYPE html> -<html lang="en"> - <head> - <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('ws://' + window.location.host + '/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 = () => { - pc.createOffer({offerToReceiveVideo: true, offerToReceiveAudio: true}).then(offer => { - pc.setLocalDescription(offer) - conn.send(JSON.stringify({event: 'offer', data: JSON.stringify(offer)})) - }) - } - 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> -` - var ( upgrader = websocket.Upgrader{ ReadBufferSize: 1024, @@ -138,7 +69,6 @@ func main() { pipeline = gst.CreatePipeline(containerPath, audioTrack, videoTrack) pipeline.Start() - http.HandleFunc(httpPath, serveHome) http.HandleFunc(httpPath + "/ws/", serveWs) fmt.Println(fmt.Sprintf("Video file '%s' is now available on '%s', have fun!", containerPath, httpListenAddress)) @@ -236,8 +166,3 @@ func serveWs(w http.ResponseWriter, r *http.Request) { } } } - -func serveHome(w http.ResponseWriter, r *http.Request) { - w.Header().Set("Content-Type", "text/html; charset=utf-8") - fmt.Fprintf(w, homeHTML) -} |