1
0
mirror of https://gitlab.crans.org/nounous/ghostream.git synced 2024-12-23 01:32:19 +00:00

Auto reconnect to stream

This commit is contained in:
Alexandre Iooss 2020-09-24 12:40:48 +02:00
parent 097766141f
commit 43158a655f
No known key found for this signature in database
GPG Key ID: 6C79278F3FCDCC02
2 changed files with 87 additions and 65 deletions

View File

@ -1,70 +1,85 @@
// Init peer connection let peerConnection;
peerConnection = new RTCPeerConnection({
iceServers: [ startPeerConnection = () => {
{ // Init peer connection
// FIXME: let admin customize the stun server peerConnection = new RTCPeerConnection({
urls: 'stun:stun.l.google.com:19302' iceServers: [
{
// FIXME: let admin customize the stun server
urls: 'stun:stun.l.google.com:19302'
}
]
})
// On connection change, change indicator color
// if connection failed, restart peer connection
peerConnection.oniceconnectionstatechange = e => {
switch (peerConnection.iceConnectionState) {
case "disconnected":
console.log(peerConnection.iceConnectionState)
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
startPeerConnection()
break
default:
console.log(peerConnection.iceConnectionState)
break
} }
] }
})
// On connection change, inform user // We want to receive audio and video
peerConnection.oniceconnectionstatechange = e => { peerConnection.addTransceiver('video', { 'direction': 'sendrecv' })
console.log(peerConnection.iceConnectionState) peerConnection.addTransceiver('audio', { 'direction': 'sendrecv' })
switch (peerConnection.iceConnectionState) { // Create offer and set local description
case "closed": peerConnection.createOffer().then(offer => {
case "failed": // After setLocalDescription, the browser will fire onicecandidate events
console.log("FIXME Failed"); peerConnection.setLocalDescription(offer)
break; }).catch(console.log)
case "disconnected":
console.log("temp network issue") // When candidate is null, ICE layer has run out of potential configurations to suggest
break; // so let's send the offer to the server
case "connected": peerConnection.onicecandidate = event => {
console.log("temp network issue resolved!") if (event.candidate === null) {
break; // 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")
fetch(window.location.href, {
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)
}
}
// 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]
}
} }
} }
// We want to receive audio and video // Start
peerConnection.addTransceiver('video', { 'direction': 'sendrecv' }) startPeerConnection()
peerConnection.addTransceiver('audio', { 'direction': 'sendrecv' })
// Create offer and set local description
peerConnection.createOffer().then(offer => {
// After setLocalDescription, the browser will fire onicecandidate events
peerConnection.setLocalDescription(offer)
}).catch(console.log)
// 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
fetch(window.location.href, {
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)
}
}
// When video track is received, configure player
peerConnection.ontrack = function (event) {
if (event.track.kind === "video") {
const viewer = document.getElementById('viewer')
viewer.srcObject = event.streams[0]
viewer.autoplay = true
viewer.controls = true
viewer.muted = true
}
}

View File

@ -3,7 +3,7 @@
<div class="col-video"> <div class="col-video">
<!-- Video --> <!-- Video -->
<div class="video-responsive"> <div class="video-responsive">
<video id="viewer" poster="/static/img/no_stream.svg"></video> <video id="viewer" poster="/static/img/no_stream.svg" muted controls autoplay></video>
</div> </div>
<!-- Links under video --> <!-- Links under video -->
@ -16,6 +16,13 @@
d="M14.354 1.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z" /> d="M14.354 1.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z" />
</svg> </svg>
<code>rtmps://{{.Cfg.Hostname}}:1935/play/{{.Path}}</code>--> <code>rtmps://{{.Cfg.Hostname}}:1935/play/{{.Path}}</code>-->
<svg id="connectionIndicator" width="1em" height="1em" viewBox="0 0 16 16" fill="#dc3545" xmlns="http://www.w3.org/2000/svg">
<rect width="4" height="5" x="1" y="10" rx="1"/>
<rect width="4" height="9" x="6" y="6" rx="1"/>
<rect width="4" height="14" x="11" y="1" rx="1"/>
</svg>
<a href="#" id="sideWidgetToggle" title="Cacher/Afficher le chat">»</a> <a href="#" id="sideWidgetToggle" title="Cacher/Afficher le chat">»</a>
</p> </p>
</div> </div>