138 lines
3.6 KiB
HTML
138 lines
3.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
|
<style>
|
|
body {
|
|
margin:0;
|
|
padding:0;
|
|
background-color:#303030;
|
|
}
|
|
|
|
#streamStage {
|
|
position:fixed;
|
|
top:0;
|
|
left:0;
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
|
|
#streamStage:before {
|
|
content: '';
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
margin-top: -1rem;
|
|
margin-left: -1rem;
|
|
}
|
|
|
|
#stream {
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
margin: auto;
|
|
position: absolute;
|
|
top: 0; left: 0; bottom: 0; right: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="streamtage">
|
|
<video controls autoplay muted playsinline id="stream"></video>
|
|
</div>
|
|
|
|
<script>
|
|
function startWebRTC() {
|
|
// syntax: https://github.com/paullouisageneau/libdatachannel/blob/master/DOC.md#rtcwebrtc_peer_connection
|
|
const ice_servers = [
|
|
// 'stun:stun.l.google.com:19302',
|
|
//'turn://7295a68e2381585126c6a19e:zDd3R415oPPXJKQT@a.relay.metered.ca:80'
|
|
];
|
|
|
|
var pc = null;
|
|
|
|
const urlSearchParams = new URLSearchParams(window.location.search);
|
|
const params = Object.fromEntries(urlSearchParams.entries());
|
|
|
|
fetch(window.location.href, {
|
|
body: JSON.stringify({
|
|
type: 'request',
|
|
res: params.res,
|
|
ice_servers: ice_servers
|
|
}),
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
method: 'POST'
|
|
}).then(function(response) {
|
|
return response.json();
|
|
}).then(function(request) {
|
|
pc = new RTCPeerConnection({
|
|
sdpSemantics: 'unified-plan',
|
|
iceServers: request.iceServers
|
|
});
|
|
pc.remote_pc_id = request.id;
|
|
pc.addTransceiver('video', { direction: 'recvonly' });
|
|
pc.addEventListener('track', function(evt) {
|
|
if (document.getElementById('stream'))
|
|
document.getElementById('stream').srcObject = evt.streams[0];
|
|
});
|
|
pc.addEventListener("icecandidate", function(e) {
|
|
if (e.candidate) {
|
|
return fetch(window.location.href, {
|
|
body: JSON.stringify({
|
|
type: 'remote_candidate',
|
|
id: pc.remote_pc_id,
|
|
candidates: [e.candidate]
|
|
}),
|
|
headers: { 'Content-Type': 'application/json' },
|
|
method: 'POST'
|
|
}).catch(function(e) {
|
|
console.log("Failed to send ICE WebRTC: "+e);
|
|
});
|
|
}
|
|
});
|
|
|
|
return pc.setRemoteDescription(request);
|
|
}).then(function() {
|
|
return pc.createAnswer();
|
|
}).then(function(answer) {
|
|
return pc.setLocalDescription(answer);
|
|
}).then(function() {
|
|
var offer = pc.localDescription;
|
|
|
|
return fetch(window.location.href, {
|
|
body: JSON.stringify({
|
|
type: offer.type,
|
|
id: pc.remote_pc_id,
|
|
sdp: offer.sdp,
|
|
}),
|
|
headers: { 'Content-Type': 'application/json' },
|
|
method: 'POST'
|
|
})
|
|
}).then(function(response) {
|
|
return response.json();
|
|
}).catch(function(e) {
|
|
console.log(e);
|
|
});
|
|
}
|
|
|
|
function stopWebRTC() {
|
|
setTimeout(function() {
|
|
pc.close();
|
|
}, 500);
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
window.onload = function() {
|
|
startWebRTC();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|