160 lines
3.2 KiB
JavaScript
160 lines
3.2 KiB
JavaScript
const url = "wss://"+window.location.hostname+":"+window.location.port;
|
|
|
|
let videoResolution = true;
|
|
//Get our url
|
|
const href = new URL (window.location.href);
|
|
if (href.searchParams.has ("video"))
|
|
switch (href.searchParams.get ("video").toLowerCase ())
|
|
{
|
|
case "1080p":
|
|
videoResolution = {
|
|
width: {min: 1920, max: 1920},
|
|
height: {min: 1080, max: 1080},
|
|
};
|
|
break;
|
|
case "720p":
|
|
videoResolution = {
|
|
width: {min: 1280, max: 1280},
|
|
height: {min: 720, max: 720},
|
|
};
|
|
break;
|
|
case "576p":
|
|
videoResolution = {
|
|
width: {min: 720, max: 720},
|
|
height: {min: 576, max: 576},
|
|
};
|
|
break;
|
|
case "480p":
|
|
videoResolution = {
|
|
width: {min: 640, max: 640},
|
|
height: {min: 480, max: 480},
|
|
};
|
|
break;
|
|
case "no":
|
|
videoResolution = false;
|
|
break;
|
|
}
|
|
const roomId = (new Date()).getTime() + "-" + Math.random();
|
|
|
|
var texts = document.querySelectorAll('.gaugeChartLabel');
|
|
|
|
function addVideoForStream(stream,muted)
|
|
{
|
|
//Create new video element
|
|
const video = document.querySelector (muted ? "#local" : "#remote");
|
|
//Set src stream
|
|
video.srcObject = stream;
|
|
//Set other properties
|
|
video.autoplay = true;
|
|
video.muted = muted;
|
|
}
|
|
function removeVideoForStream(stream)
|
|
{
|
|
//Get video
|
|
var video = document.getElementById(stream.id);
|
|
//Remove it when done
|
|
video.addEventListener('webkitTransitionEnd',function(){
|
|
//Delete it
|
|
video.parentElement.removeChild(video);
|
|
});
|
|
//Disable it first
|
|
video.className = "disabled";
|
|
}
|
|
|
|
var sdp;
|
|
var pc;
|
|
|
|
function connect()
|
|
{
|
|
pc = new RTCPeerConnection(null);
|
|
|
|
var ws = new WebSocket(url,"rec");
|
|
|
|
pc.onaddstream = function(event) {
|
|
var prev = 0;
|
|
console.debug("onAddStream",event);
|
|
//Play it
|
|
addVideoForStream(event.stream);
|
|
|
|
|
|
};
|
|
|
|
pc.onremovestream = function(event) {
|
|
console.debug("onRemoveStream",event);
|
|
//Play it
|
|
removeVideoForStream(event.stream);
|
|
};
|
|
|
|
ws.onopen = function(){
|
|
console.log("opened");
|
|
|
|
navigator.mediaDevices.getUserMedia({
|
|
audio: true,
|
|
video: videoResolution
|
|
})
|
|
.then(function(stream){
|
|
var prev = 0;
|
|
console.debug("getUserMedia sucess",stream);
|
|
//Play it
|
|
addVideoForStream(stream,true);
|
|
window.s = stream;
|
|
//Add stream to peer connection
|
|
pc.addStream(stream);
|
|
//Create new offer
|
|
return pc.createOffer(stream);
|
|
})
|
|
.then(function(offer){
|
|
console.debug("createOffer sucess",offer);
|
|
//We have sdp
|
|
sdp = offer.sdp;
|
|
//Set it
|
|
pc.setLocalDescription(offer);
|
|
console.log(sdp);
|
|
//Create room
|
|
ws.send(JSON.stringify({
|
|
cmd : "OFFER",
|
|
offer : sdp
|
|
}));
|
|
})
|
|
.catch(function(error){
|
|
console.error("Error",error);
|
|
alert(error);
|
|
});
|
|
};
|
|
|
|
ws.onmessage = function(event){
|
|
console.log(event);
|
|
|
|
//Get protocol message
|
|
const msg = JSON.parse(event.data);
|
|
|
|
console.log(msg.answer);
|
|
pc.setRemoteDescription(new RTCSessionDescription({
|
|
type:'answer',
|
|
sdp: msg.answer
|
|
}), function () {
|
|
console.log("JOINED");
|
|
}, function (err) {
|
|
console.error("Error joining",err);
|
|
}
|
|
);
|
|
};
|
|
}
|
|
|
|
var dialog = document.querySelector('dialog');
|
|
if (dialog.showModal)
|
|
{
|
|
dialog.showModal();
|
|
dialog.querySelector('.ready').addEventListener('click', function() {
|
|
dialog.close();
|
|
connect();
|
|
});
|
|
} else {
|
|
connect();
|
|
}
|
|
|
|
|
|
|
|
|
|
|