Grid analyze
This commit is contained in:
abdussamedulutas
parent
c6c42d4bd8
commit
3ebf5cc1f5
|
|
@ -7,73 +7,33 @@ body{
|
|||
}
|
||||
.root{
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
padding: 0px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.dialoque{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
}
|
||||
.videolist{
|
||||
flex: 0 0 200px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow: auto;
|
||||
padding-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dialoque #primaryVideo{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
object-fit: contain;
|
||||
background-color: transparent/*#282828*/;
|
||||
border-radius: 10px;
|
||||
z-index: 2;
|
||||
}
|
||||
.dialoque #primaryVideoShadow{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
filter: brightness(0.5);
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.dialoque #secondaryVideo{
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
min-width: 300px;
|
||||
max-width: 30%;
|
||||
min-height: 200px;
|
||||
max-height: 35%;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
background-color: #383838;
|
||||
border-radius: 10px;
|
||||
z-index: 3;
|
||||
outline-offset: 0px;
|
||||
outline-style: solid;
|
||||
outline-width: 5px;
|
||||
outline-color: rgba(0,0,0,.5);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
|
||||
grid-template-rows: repeat(auto-fit, minmax(23vh, 1fr));
|
||||
gap: 5px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.videolist .frame{
|
||||
max-width: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
border: solid 3px transparent;
|
||||
aspect-ratio: 16 / 9;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
.videolist .frame.active{
|
||||
border: solid 3px green;
|
||||
|
|
@ -92,16 +52,5 @@ video{
|
|||
::-webkit-scrollbar-track {
|
||||
background-color: #ffffff1f;
|
||||
}
|
||||
#stats{
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
font-size: 14px;
|
||||
line-height: 1.5em;
|
||||
color: white;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
padding: 10px;
|
||||
text-shadow: 0 0 5px black;
|
||||
background-color: rgba(0,0,0,.4);
|
||||
overflow: auto;
|
||||
max-height: 80vh;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -10,16 +10,10 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="root">
|
||||
<div class="dialoque">
|
||||
<video id="primaryVideo" muted playsinline autoplay></video>
|
||||
<video id="primaryVideoShadow" muted playsinline autoplay></video>
|
||||
<div id="stats"></div>
|
||||
</div>
|
||||
<div class="videolist">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="index.js?v=32"></script>
|
||||
</body>
|
||||
</html>
|
||||
305
public/index.js
305
public/index.js
|
|
@ -22,22 +22,6 @@ let roomid;
|
|||
* @type {import("./MWSE/Room").default}
|
||||
*/
|
||||
let room;
|
||||
/**
|
||||
* @type {MediaStream}
|
||||
*/
|
||||
let primaryVideoContent;
|
||||
/**
|
||||
* @type {HTMLVideoElement}
|
||||
*/
|
||||
let primaryVideo;
|
||||
/**
|
||||
* @type {HTMLVideoElement}
|
||||
*/
|
||||
let primaryVideoShadow;
|
||||
/**
|
||||
* @type {HTMLVideoElement}
|
||||
*/
|
||||
let secondaryVideo;
|
||||
/**
|
||||
* @type {MediaStream}
|
||||
*/
|
||||
|
|
@ -50,9 +34,6 @@ let outgoingStreamOnlyVideo;
|
|||
* @type {HTMLDivElement}
|
||||
*/
|
||||
let videoContainer = document.querySelector(".videolist");
|
||||
|
||||
let activePeerInfos = {};
|
||||
let activePeer = null;
|
||||
let maxbitrate;
|
||||
let resulation;
|
||||
|
||||
|
|
@ -69,29 +50,10 @@ function connect()
|
|||
*/
|
||||
let activeVideo;
|
||||
|
||||
function setPrimaryVideo(video, soundOn)
|
||||
{
|
||||
primaryVideo.srcObject = video;
|
||||
primaryVideoShadow.srcObject = video;
|
||||
if(soundOn == undefined)
|
||||
{
|
||||
primaryVideo.muted = 1;
|
||||
primaryVideo.volume = 0;
|
||||
}else if(soundOn){
|
||||
primaryVideo.muted = 0;
|
||||
primaryVideo.volume = 1;
|
||||
}else{
|
||||
primaryVideo.muted = 0;
|
||||
primaryVideo.volume = 0;
|
||||
}
|
||||
}
|
||||
function setSecondaryVideo(video)
|
||||
{
|
||||
// secondaryVideo.srcObject = video;
|
||||
}
|
||||
function templateVideo(name, stream)
|
||||
{
|
||||
let i = document.createElement("video");
|
||||
i.classList.add("dev0")
|
||||
i.muted = 1;
|
||||
i.classList.add("frame")
|
||||
i.playsInline = 1;
|
||||
|
|
@ -106,16 +68,6 @@ function addVideoList(name, stream, peer)
|
|||
{
|
||||
let video = templateVideo(name, stream);
|
||||
video.dataset.user = peer.socketId;
|
||||
video.onclick = function(){
|
||||
if(activeVideo)
|
||||
{
|
||||
activeVideo.classList.remove("active");
|
||||
};
|
||||
video.classList.add("active");
|
||||
activeVideo = video;
|
||||
activePeer = peer.rtc.rtc;
|
||||
setPrimaryVideo(stream, true);
|
||||
};
|
||||
videoContainer.appendChild(video);
|
||||
}
|
||||
}
|
||||
|
|
@ -128,7 +80,6 @@ function removeVideoList(name)
|
|||
if(k.dataset.user == activeVideo?.dataset.user || !activeVideo)
|
||||
{
|
||||
activePeer = null;
|
||||
setPrimaryVideo(outgoingStreamOnlyVideo, false);
|
||||
}
|
||||
k.remove();
|
||||
}
|
||||
|
|
@ -145,24 +96,6 @@ async function beginEngine()
|
|||
let url = new URL(window.location);
|
||||
roomid = url.searchParams.get("room");
|
||||
|
||||
if(url.searchParams.get("maxbitrate"))
|
||||
{
|
||||
let n = Number(url.searchParams.get("maxbitrate"));
|
||||
if(Number.isFinite(n) && !Number.isNaN(n))
|
||||
{
|
||||
maxbitrate = n;
|
||||
}else maxbitrate = 3_000_000;
|
||||
}else maxbitrate = 3_000_000;
|
||||
|
||||
if(url.searchParams.get("resulation"))
|
||||
{
|
||||
let n = Number(url.searchParams.get("resulation"));
|
||||
if(Number.isFinite(n) && !Number.isNaN(n))
|
||||
{
|
||||
resulation = n;
|
||||
}else resulation = 1.5;
|
||||
}else resulation = 1.5;
|
||||
|
||||
if(!!roomid == 0)
|
||||
{
|
||||
let hash = window.crypto.randomUUID();
|
||||
|
|
@ -174,9 +107,6 @@ async function beginEngine()
|
|||
};
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
primaryVideo = document.querySelector("#primaryVideo");
|
||||
secondaryVideo = document.querySelector("#secondaryVideo");
|
||||
primaryVideoShadow = document.querySelector("#primaryVideoShadow");
|
||||
connect()
|
||||
});
|
||||
|
||||
|
|
@ -201,7 +131,6 @@ async function startOutgoingWebcam()
|
|||
audio: false
|
||||
});
|
||||
outgoingStreamOnlyVideo = new MediaStream(outgoingStream);
|
||||
// outgoingStreamOnlyVideo.removeTrack(outgoingStreamOnlyVideo.getAudioTracks()[0])
|
||||
}
|
||||
|
||||
async function connectRoom()
|
||||
|
|
@ -226,11 +155,6 @@ async function connectRoom()
|
|||
for (const peer of await room.fetchPeers()) {
|
||||
IncomingPeer(peer)
|
||||
}
|
||||
if(!primaryVideoContent)
|
||||
{
|
||||
setPrimaryVideo(outgoingStreamOnlyVideo);
|
||||
}
|
||||
setSecondaryVideo(outgoingStreamOnlyVideo);
|
||||
|
||||
addVideoList("My Webcam",outgoingStreamOnlyVideo, mwse.peer("me"))
|
||||
|
||||
|
|
@ -245,9 +169,9 @@ function IncomingPeer(peer,activeConnect)
|
|||
peer.createRTC({
|
||||
iceCandidatePoolSize: 0
|
||||
},[{
|
||||
urls: "turn:161.97.136.175:3478",
|
||||
username: "argist-eu-east-25",
|
||||
credential: "ee7df17eed35f4cf5a207777f3c0cd7d3b1901a5de7aff52ea55742289d7fee2"
|
||||
urls: "turn:20.166.82.187:3478",
|
||||
username: "turnserver",
|
||||
credential: "turnserver"
|
||||
},{
|
||||
urls: "stun:stun.l.google.com:19302"
|
||||
}]);
|
||||
|
|
@ -269,14 +193,6 @@ function IncomingPeer(peer,activeConnect)
|
|||
peer.rtc.on("stream:added", ({stream,name}) => {
|
||||
peer.streamY = peer.socketId + " | " + name + " - " + stream.id;
|
||||
addVideoList(peer.socketId + " | " + name + " - " + stream.id,stream, peer);
|
||||
|
||||
if(!primaryVideoContent)
|
||||
{
|
||||
activePeer = peer.rtc.rtc;
|
||||
primaryVideoContent = stream;
|
||||
setPrimaryVideo(primaryVideoContent, true);
|
||||
}
|
||||
|
||||
if(activeConnect && !sendedOTP)
|
||||
{
|
||||
sendedOTP = true;
|
||||
|
|
@ -292,11 +208,7 @@ function OutgoingPeer(peer)
|
|||
removeVideoList(peer.streamY, peer);
|
||||
}
|
||||
|
||||
setInterval(()=>{
|
||||
getStats()
|
||||
}, 1000)
|
||||
|
||||
|
||||
/*
|
||||
setInterval(() => {
|
||||
if(activePeer?.turboBitrate === 0)
|
||||
{
|
||||
|
|
@ -317,209 +229,6 @@ setInterval(() => {
|
|||
});
|
||||
}
|
||||
}
|
||||
}, 5000);
|
||||
}, 5000);*/
|
||||
|
||||
let relative;
|
||||
|
||||
async function getStats()
|
||||
{
|
||||
let stats = {};
|
||||
if(!activePeer) return document.querySelector("#stats").innerHTML = "";
|
||||
let stat = await activePeer.getStats();
|
||||
let certs = {};
|
||||
let selectedCandidatePairId;
|
||||
let remotes = {};
|
||||
let locals = {};
|
||||
let candidatePairs = {};
|
||||
for (const [id, data] of stat) {
|
||||
switch(data.type)
|
||||
{
|
||||
case "candidate-pair":{
|
||||
if(data.state == "succeeded")
|
||||
{
|
||||
let t = {};
|
||||
t.candidateBytesSent = data.bytesSent;
|
||||
t.candidateBytesReceived = data.bytesReceived;
|
||||
t.candidatePacketsReceived = data.packetsReceived;
|
||||
t.candidatePacketsSent = data.packetsSent;
|
||||
t.candidateTotalRoundTripTime = data.totalRoundTripTime;
|
||||
t.currentRoundTripTime = data.currentRoundTripTime;
|
||||
t.candidateRemoteCandidateId = data.remoteCandidateId;
|
||||
t.candidateLocalCandidateId = data.localCandidateId;
|
||||
candidatePairs[data.id] = t;
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "remote-candidate":{
|
||||
let t = {};
|
||||
t.remoteCandidateType = data.candidateType;
|
||||
t.remoteProtocol = data.protocol;
|
||||
t.remoteAddress = data.address;
|
||||
t.remoteIsRemote = data.isRemote;
|
||||
t.remotePort = data.port;
|
||||
remotes[data.id] = t;
|
||||
break;
|
||||
}
|
||||
case "local-candidate":{
|
||||
let t = {};
|
||||
t.localCandidateType = data.candidateType;
|
||||
t.localProtocol = data.protocol;
|
||||
t.localAddress = data.address;
|
||||
t.localIsRemote = data.isRemote;
|
||||
t.localPort = data.port;
|
||||
locals[data.id] = t;
|
||||
break;
|
||||
}
|
||||
case "inbound-rtp":{
|
||||
let k = stats["inbound" + data.mediaType] = {};
|
||||
k.mediaType = data.mediaType;
|
||||
k.trackIdentifier = data.trackIdentifier;
|
||||
k.bytesReceived = data.bytesReceived;
|
||||
k.totalSamplesReceived = data.totalSamplesReceived;
|
||||
k.totalSamplesDuration = data.totalSamplesDuration;
|
||||
k.audioLevel = data.audioLevel;
|
||||
k.packetsReceived = data.packetsReceived;
|
||||
k.framesReceived = data.framesReceived;
|
||||
k.frameWidth = data.frameWidth;
|
||||
k.frameHeight = data.frameHeight;
|
||||
k.framesPerSecond = data.framesPerSecond;
|
||||
k.totalDecodeTime = data.totalDecodeTime;
|
||||
k.totalProcessingDelay = data.totalProcessingDelay;
|
||||
k.totalAssemblyTime = data.totalAssemblyTime;
|
||||
k.decoderImplementation = data.decoderImplementation;
|
||||
k.powerEfficientDecoder = data.powerEfficientDecoder;
|
||||
break;
|
||||
}
|
||||
case "outbound-rtp":{
|
||||
let k = stats["outbound" + data.mediaType] = {};
|
||||
k.mediaType = data.mediaType;
|
||||
k.bytesSent = data.bytesSent;
|
||||
k.framesEncoded = data.framesEncoded;
|
||||
k.totalEncodeTime = data.totalEncodeTime;
|
||||
k.frameWidth = data.frameWidth;
|
||||
k.frameHeight = data.frameHeight;
|
||||
k.framesPerSecond = data.framesPerSecond;
|
||||
k.framesSent = data.framesSent;
|
||||
k.encoderImplementation = data.encoderImplementation;
|
||||
k.powerEfficientEncoder = data.powerEfficientEncoder;
|
||||
k.qualityLimitationReason = data.qualityLimitationReason;
|
||||
break;
|
||||
}
|
||||
case "transport":{
|
||||
stats.srtpCipher = data.srtpCipher;
|
||||
stats.dtlsCipher = data.dtlsCipher;
|
||||
stats.localcert = certs[data.localCertificateId];
|
||||
stats.remotecert = certs[data.localCertificateId];
|
||||
selectedCandidatePairId = data.selectedCandidatePairId;
|
||||
break;
|
||||
}
|
||||
case "certificate":{
|
||||
certs[data.id] = {
|
||||
fingerprintAlgorithm: data.fingerprintAlgorithm,
|
||||
fingerprint: data.fingerprint
|
||||
};
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if(selectedCandidatePairId)
|
||||
{
|
||||
let pair = candidatePairs[selectedCandidatePairId];
|
||||
if(!pair.candidateRemoteCandidateId)
|
||||
{
|
||||
return;
|
||||
}
|
||||
stats = {
|
||||
...stats,
|
||||
...pair,
|
||||
...remotes[pair.candidateRemoteCandidateId],
|
||||
...locals[pair.candidateLocalCandidateId]
|
||||
};
|
||||
}else{
|
||||
let pair = Object.values(candidatePairs)[0];
|
||||
stats = {
|
||||
...stats,
|
||||
...pair,
|
||||
...Object.values(remotes)[0],
|
||||
...Object.values(locals)[0]
|
||||
};
|
||||
}
|
||||
|
||||
if(!stats.inboundvideo)
|
||||
{
|
||||
return document.querySelector("#stats").innerHTML = "";
|
||||
}
|
||||
|
||||
if(!relative)
|
||||
{
|
||||
relative = stats;
|
||||
}
|
||||
|
||||
let turnused = stats.localCandidateType == "relay" || stats.remoteCandidateType == "relay";
|
||||
|
||||
document.querySelector("#stats").innerHTML = `
|
||||
Signalization Server: ws.saqut.com<br>
|
||||
TURN Server: Adjusted / ${turnused ? "Using now":"Never used"}<br>
|
||||
STUN Server: Adjusted / used<br>
|
||||
Websocket: Active connected<hr>
|
||||
Local Candidate Type: ${{
|
||||
host:"Direct Connection",
|
||||
srflx: "Behind NAT (with STUN)",
|
||||
prflx: "Proxy Connection (with STUN)",
|
||||
relay: "TURN Server Connection"
|
||||
}[stats.localCandidateType]}<br>
|
||||
Local Protocol: ${stats.localProtocol}<br>
|
||||
Local Address: ${stats.localAddress}<br>
|
||||
Local Port: ${stats.localPort}<hr>
|
||||
|
||||
Remote Candidate Type: ${{
|
||||
host:"Direct Connection",
|
||||
srflx: "Behind NAT (with STUN)",
|
||||
prflx: "Proxy Connection (with STUN)",
|
||||
relay: "TURN Server Connection"
|
||||
}[stats.remoteCandidateType]}<br>
|
||||
Remote Protocol: ${stats.remoteProtocol}<br>
|
||||
Remote Address: ${stats.remoteAddress}<br>
|
||||
Remote Port: ${stats.remotePort}<hr>
|
||||
|
||||
Connection Total Bytes Send: Total: ${hfs(stats.candidateBytesSent)} | Current : ${hfs(stats.candidateBytesSent - relative.candidateBytesSent)}<br>
|
||||
Connection Total Bytes Recaived: Total: ${hfs(stats.candidateBytesReceived)} | Current : ${hfs(stats.candidateBytesReceived - relative.candidateBytesReceived)}<br>
|
||||
Connection Round Trip Time: ${stats.currentRoundTripTime}ms<hr>
|
||||
|
||||
Incoming Video Decoder: ${stats.inboundvideo.decoderImplementation}<br>
|
||||
Incoming Frame Width: ${stats.inboundvideo.frameWidth}px<br>
|
||||
Incoming Frame Height: ${stats.inboundvideo.frameHeight}px<br>
|
||||
Incoming Frame Per Second: ${stats.inboundvideo.framesPerSecond}<br>
|
||||
Incoming Decode Time (CPU Time): ${(stats.inboundvideo.totalDecodeTime - relative.inboundvideo.totalDecodeTime).toFixed(3)}ms<hr>
|
||||
|
||||
Outgoing Video Encoder: ${stats.outboundvideo.encoderImplementation}<br>
|
||||
Outgoing Frame Width: ${stats.outboundvideo.frameWidth}px<br>
|
||||
Outgoing Frame Height: ${stats.outboundvideo.frameHeight}px<br>
|
||||
Outgoing Frame Per Second: ${stats.outboundvideo.framesPerSecond}<br>
|
||||
Outgoing Decode Time (CPU Time): ${(stats.outboundvideo.totalEncodeTime - relative.outboundvideo.totalEncodeTime).toFixed(3)}ms<br>
|
||||
Quality Increase Limitator: ${stats.outboundvideo.qualityLimitationReason}<hr>
|
||||
|
||||
Crypting SRTP Cipher: ${stats.srtpCipher}<br>
|
||||
Crypting D-TLS Cipher: ${stats.dtlsCipher}<br>
|
||||
${stats.localcert ? `EndToEnd Crypto Local Cert. Algoritm: ${stats.localcert.fingerprintAlgorithm}<br>
|
||||
EndToEnd Crypto Remote Cert. Algoritm: ${stats.remotecert.fingerprintAlgorithm}<hr>` : ''}
|
||||
Bitrate Booster: ${activePeer.turboBitrate==0?"Waiting conditions":activePeer.turboBitrate==1?"Boosting":"Fail"}<br>
|
||||
Codec Handcooling : Failed<br>
|
||||
Hardware Accelerated : Failed<hr>
|
||||
|
||||
MWSE Version: 0.7.0-beta<br>
|
||||
Load Balancing: Active<br>
|
||||
Max P2P Hardware Connection: ~${((Math.random()*5)|0) + 72}<br>
|
||||
Max P2P Software Connection: ~24<br>
|
||||
Max Server Connection: 231<br>
|
||||
SDP Adaptation: Long time session<br>
|
||||
`;
|
||||
relative = stats;
|
||||
};
|
||||
|
||||
function hfs(size) {
|
||||
if(!size)return 0;
|
||||
var i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
|
||||
return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
|
||||
}
|
||||
let relative;
|
||||
Loading…
Reference in New Issue