saqut
/
MWSE
1
1
Fork 0
Code Issues 10 Pull Requests Packages Projects 2 Releases 1 Wiki Activity

Feature fix

This commit is contained in:
Yasin İLKAYA 2023-05-23 22:09:57 +03:00
parent dd1ef9e247
commit 38cc4ab073
3 changed files with 280 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/index.css
View File

@ -46,6 +46,7 @@ body{
object-fit: cover; object-fit: cover;
border-radius: 10px; border-radius: 10px;
position: absolute; position: absolute;
filter: brightness(0.5);
z-index: 1; z-index: 1;
left: 0; left: 0;
top: 0; top: 0;
@ -90,4 +91,17 @@ video{
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: #ffffff1f; 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;
} }

19
public/index.html
View File

@ -10,26 +10,15 @@
<body> <body>
<div class="root"> <div class="root">
<div class="dialoque"> <div class="dialoque">
<video <video id="primaryVideo" muted playsinline autoplay></video>
id="primaryVideo" <video id="primaryVideoShadow" muted playsinline autoplay></video>
muted <div id="stats"></div>
playsinline
autoplay
>
</video>
<video
id="primaryVideoShadow"
muted
playsinline
autoplay
>
</video>
</div> </div>
<div class="videolist"> <div class="videolist">
</div> </div>
</div> </div>
<script src="index.js"></script> <script src="index.js?v=6"></script>
</body> </body>
</html> </html>

284
public/index.js
View File

@ -51,6 +51,9 @@ let outgoingStreamOnlyVideo;
*/ */
let videoContainer = document.querySelector(".videolist"); let videoContainer = document.querySelector(".videolist");
let activePeerInfos = {};
let activePeer = null;
function connect() function connect()
{ {
mwse = new MWSE({ mwse = new MWSE({
@ -108,6 +111,7 @@ function addVideoList(name, stream, peer)
}; };
video.classList.add("active"); video.classList.add("active");
activeVideo = video; activeVideo = video;
activePeer = peer.rtc.rtc;
setPrimaryVideo(stream, true); setPrimaryVideo(stream, true);
}; };
videoContainer.appendChild(video); videoContainer.appendChild(video);
@ -121,6 +125,7 @@ function removeVideoList(name)
let k = videoContainer.querySelector(`[data-name="${name}"]`); let k = videoContainer.querySelector(`[data-name="${name}"]`);
if(k.dataset.user == activeVideo?.dataset.user || !activeVideo) if(k.dataset.user == activeVideo?.dataset.user || !activeVideo)
{ {
activePeer = null;
setPrimaryVideo(outgoingStreamOnlyVideo, false); setPrimaryVideo(outgoingStreamOnlyVideo, false);
} }
k.remove(); k.remove();
@ -156,9 +161,21 @@ window.addEventListener("load", () => {
async function startOutgoingWebcam() async function startOutgoingWebcam()
{ {
outgoingStream = await navigator.mediaDevices.getUserMedia({video: true, audio: true}); outgoingStream = await navigator.mediaDevices.getUserMedia({
video: true/*{
advanced: [
{ width: { exact: 1024 } },
{ width: { exact: 900 } },
{ width: { exact: 800 } },
{ width: { exact: 640 } },
{ width: { exact: 320 } },
{ width: { exact: 240 } }
]
}*/,
audio: false
});
outgoingStreamOnlyVideo = new MediaStream(outgoingStream); outgoingStreamOnlyVideo = new MediaStream(outgoingStream);
outgoingStreamOnlyVideo.removeTrack(outgoingStreamOnlyVideo.getAudioTracks()[0]) // outgoingStreamOnlyVideo.removeTrack(outgoingStreamOnlyVideo.getAudioTracks()[0])
} }
async function connectRoom() async function connectRoom()
@ -191,7 +208,8 @@ async function connectRoom()
addVideoList("My Webcam",outgoingStreamOnlyVideo, mwse.peer("me")) addVideoList("My Webcam",outgoingStreamOnlyVideo, mwse.peer("me"))
} };
/** /**
* @param {import("./MWSE/Peer").default} peer * @param {import("./MWSE/Peer").default} peer
*/ */
@ -199,29 +217,19 @@ function IncomingPeer(peer,activeConnect)
{ {
let sendedOTP = false; let sendedOTP = false;
peer.createRTC({ peer.createRTC({
iceServers:[{ iceCandidatePoolSize: 0
urls: "turn:161.97.136.175:3478", },[{
username: "argist-eu-east-25", urls: "turn:161.97.136.175:3478",
credential: "ee7df17eed35f4cf5a207777f3c0cd7d3b1901a5de7aff52ea55742289d7fee2" username: "argist-eu-east-25",
},{ credential: "ee7df17eed35f4cf5a207777f3c0cd7d3b1901a5de7aff52ea55742289d7fee2"
urls: "stun:stun.l.google.com:19302" },{
},{ urls: "stun:stun.l.google.com:19302"
urls: "stun:stun1.l.google.com:19302" }]);
},{
urls: "stun:stun2.l.google.com:19302"
},{
urls: "stun:stun3.l.google.com:19302"
},{
urls: "stun:stun4.l.google.com:19302"
}],
bundlePolicy: "max-compat",
iceCandidatePoolSize: 0,
iceTransportPolicy: "all"
});
if(activeConnect) if(activeConnect)
{ {
peer.rtc.connect(); peer.rtc.connect();
} }
peer.rtc.rtc.turboBitrate = 0;
peer.rtc.on('connected',() => { peer.rtc.on('connected',() => {
if(!activeConnect && !sendedOTP) if(!activeConnect && !sendedOTP)
{ {
@ -238,6 +246,7 @@ function IncomingPeer(peer,activeConnect)
if(!primaryVideoContent) if(!primaryVideoContent)
{ {
activePeer = peer.rtc.rtc;
primaryVideoContent = stream; primaryVideoContent = stream;
setPrimaryVideo(primaryVideoContent, true); setPrimaryVideo(primaryVideoContent, true);
} }
@ -255,4 +264,235 @@ function IncomingPeer(peer,activeConnect)
function OutgoingPeer(peer) function OutgoingPeer(peer)
{ {
removeVideoList(peer.streamY, peer); removeVideoList(peer.streamY, peer);
}
setInterval(()=>{
getStats()
}, 1000)
setInterval(() => {
if(activePeer?.turboBitrate == 0)
{
const senders = activePeer.getSenders();
const videoSender = senders.find(sender => sender.track?.kind === 'video');
if(videoSender)
{
const parameters = videoSender.getParameters();
parameters.encodings[0].maxBitrate = 200000;
videoSender.setParameters(parameters).then(() => {
console.log('Bitrate değiştirildi.');
activePeer.turboBitrate = 1;
})
.catch(error => {
console.error('Bitrate değiştirilirken bir hata oluştu:', error);
activePeer.turboBitrate = -1;
});
}
}
}, 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?"Disabled"/*"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];
} }