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:
parent
097766141f
commit
43158a655f
@ -1,49 +1,62 @@
|
|||||||
// Init peer connection
|
let peerConnection;
|
||||||
peerConnection = new RTCPeerConnection({
|
|
||||||
|
startPeerConnection = () => {
|
||||||
|
// Init peer connection
|
||||||
|
peerConnection = new RTCPeerConnection({
|
||||||
iceServers: [
|
iceServers: [
|
||||||
{
|
{
|
||||||
// FIXME: let admin customize the stun server
|
// FIXME: let admin customize the stun server
|
||||||
urls: 'stun:stun.l.google.com:19302'
|
urls: 'stun:stun.l.google.com:19302'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
// On connection change, inform user
|
|
||||||
peerConnection.oniceconnectionstatechange = e => {
|
|
||||||
console.log(peerConnection.iceConnectionState)
|
|
||||||
|
|
||||||
|
// On connection change, change indicator color
|
||||||
|
// if connection failed, restart peer connection
|
||||||
|
peerConnection.oniceconnectionstatechange = e => {
|
||||||
switch (peerConnection.iceConnectionState) {
|
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 "closed":
|
||||||
case "failed":
|
case "failed":
|
||||||
console.log("FIXME Failed");
|
console.log("Connection failed, restarting...")
|
||||||
break;
|
peerConnection.close()
|
||||||
case "disconnected":
|
peerConnection = null
|
||||||
console.log("temp network issue")
|
startPeerConnection()
|
||||||
break;
|
break
|
||||||
case "connected":
|
default:
|
||||||
console.log("temp network issue resolved!")
|
console.log(peerConnection.iceConnectionState)
|
||||||
break;
|
break
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// We want to receive audio and video
|
// We want to receive audio and video
|
||||||
peerConnection.addTransceiver('video', { 'direction': 'sendrecv' })
|
peerConnection.addTransceiver('video', { 'direction': 'sendrecv' })
|
||||||
peerConnection.addTransceiver('audio', { 'direction': 'sendrecv' })
|
peerConnection.addTransceiver('audio', { 'direction': 'sendrecv' })
|
||||||
|
|
||||||
// Create offer and set local description
|
// Create offer and set local description
|
||||||
peerConnection.createOffer().then(offer => {
|
peerConnection.createOffer().then(offer => {
|
||||||
// After setLocalDescription, the browser will fire onicecandidate events
|
// After setLocalDescription, the browser will fire onicecandidate events
|
||||||
peerConnection.setLocalDescription(offer)
|
peerConnection.setLocalDescription(offer)
|
||||||
}).catch(console.log)
|
}).catch(console.log)
|
||||||
|
|
||||||
// When candidate is null, ICE layer has run out of potential configurations to suggest
|
// When candidate is null, ICE layer has run out of potential configurations to suggest
|
||||||
// so let's send the offer to the server
|
// so let's send the offer to the server
|
||||||
peerConnection.onicecandidate = event => {
|
peerConnection.onicecandidate = event => {
|
||||||
if (event.candidate === null) {
|
if (event.candidate === null) {
|
||||||
// Send offer to server
|
// Send offer to server
|
||||||
// The server know the stream name from the url
|
// The server know the stream name from the url
|
||||||
// The server replies with its description
|
// The server replies with its description
|
||||||
// After setRemoteDescription, the browser will fire ontrack events
|
// After setRemoteDescription, the browser will fire ontrack events
|
||||||
|
console.log("Sending session description to server")
|
||||||
fetch(window.location.href, {
|
fetch(window.location.href, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
@ -56,15 +69,17 @@ peerConnection.onicecandidate = event => {
|
|||||||
.then((data) => peerConnection.setRemoteDescription(new RTCSessionDescription(data)))
|
.then((data) => peerConnection.setRemoteDescription(new RTCSessionDescription(data)))
|
||||||
.catch(console.log)
|
.catch(console.log)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// When video track is received, configure player
|
// When video track is received, configure player
|
||||||
peerConnection.ontrack = function (event) {
|
peerConnection.ontrack = function (event) {
|
||||||
|
console.log(`New ${event.track.kind} track`)
|
||||||
if (event.track.kind === "video") {
|
if (event.track.kind === "video") {
|
||||||
const viewer = document.getElementById('viewer')
|
const viewer = document.getElementById('viewer')
|
||||||
viewer.srcObject = event.streams[0]
|
viewer.srcObject = event.streams[0]
|
||||||
viewer.autoplay = true
|
}
|
||||||
viewer.controls = true
|
|
||||||
viewer.muted = true
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Start
|
||||||
|
startPeerConnection()
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user