ghostream/web/static/js/viewer.js

76 lines
2.9 KiB
JavaScript
Raw Normal View History

2020-10-06 07:20:25 +00:00
let peerConnection
let streamPath = window.location.href
2020-09-22 20:08:14 +00:00
2020-09-24 10:40:48 +00:00
startPeerConnection = () => {
// Init peer connection
peerConnection = new RTCPeerConnection({
2020-09-29 15:27:19 +00:00
iceServers: [{ urls: stunServers }]
2020-09-24 10:40:48 +00:00
})
2020-09-22 20:08:14 +00:00
2020-09-24 10:40:48 +00:00
// On connection change, change indicator color
// if connection failed, restart peer connection
peerConnection.oniceconnectionstatechange = e => {
2020-10-11 13:03:28 +00:00
console.log("ICE connection state changed, " + peerConnection.iceConnectionState)
2020-09-24 10:40:48 +00:00
switch (peerConnection.iceConnectionState) {
case "disconnected":
document.getElementById("connectionIndicator").style.fill = "#dc3545"
break
case "checking":
document.getElementById("connectionIndicator").style.fill = "#ffc107"
break
case "connected":
document.getElementById("connectionIndicator").style.fill = "#28a745"
break
case "closed":
case "failed":
console.log("Connection failed, restarting...")
peerConnection.close()
peerConnection = null
2020-09-29 12:23:34 +00:00
setTimeout(startPeerConnection, 1000)
2020-09-24 10:40:48 +00:00
break
}
2020-09-22 20:08:14 +00:00
}
2020-09-24 10:40:48 +00:00
// We want to receive audio and video
peerConnection.addTransceiver('video', { 'direction': 'sendrecv' })
peerConnection.addTransceiver('audio', { 'direction': 'sendrecv' })
2020-09-23 11:52:12 +00:00
2020-09-24 10:40:48 +00:00
// Create offer and set local description
peerConnection.createOffer().then(offer => {
// After setLocalDescription, the browser will fire onicecandidate events
peerConnection.setLocalDescription(offer)
}).catch(console.log)
2020-09-23 11:52:12 +00:00
2020-09-24 10:40:48 +00:00
// When candidate is null, ICE layer has run out of potential configurations to suggest
// so let's send the offer to the server
peerConnection.onicecandidate = event => {
if (event.candidate === null) {
// Send offer to server
// The server know the stream name from the url
// The server replies with its description
// After setRemoteDescription, the browser will fire ontrack events
console.log("Sending session description to server")
2020-10-06 07:20:25 +00:00
fetch(streamPath, {
2020-09-24 10:40:48 +00:00
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(peerConnection.localDescription)
})
.then(response => response.json())
.then((data) => peerConnection.setRemoteDescription(new RTCSessionDescription(data)))
.catch(console.log)
}
2020-09-22 20:08:14 +00:00
}
2020-09-24 10:40:48 +00:00
// When video track is received, configure player
peerConnection.ontrack = function (event) {
console.log(`New ${event.track.kind} track`)
if (event.track.kind === "video") {
const viewer = document.getElementById('viewer')
viewer.srcObject = event.streams[0]
}
2020-09-22 20:08:14 +00:00
}
}