diff --git a/public/index.css b/public/index.css index f8556f5..d5adbf1 100644 --- a/public/index.css +++ b/public/index.css @@ -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; -} \ No newline at end of file + + diff --git a/public/index.html b/public/index.html index 5e59258..0a0ce96 100644 --- a/public/index.html +++ b/public/index.html @@ -10,16 +10,10 @@
-
- - -
-
- \ No newline at end of file diff --git a/public/index.js b/public/index.js index 7a1dd05..ad76cf6 100644 --- a/public/index.js +++ b/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
- TURN Server: Adjusted / ${turnused ? "Using now":"Never used"}
- STUN Server: Adjusted / used
- Websocket: Active connected
- Local Candidate Type: ${{ - host:"Direct Connection", - srflx: "Behind NAT (with STUN)", - prflx: "Proxy Connection (with STUN)", - relay: "TURN Server Connection" - }[stats.localCandidateType]}
- Local Protocol: ${stats.localProtocol}
- Local Address: ${stats.localAddress}
- Local Port: ${stats.localPort}
- - Remote Candidate Type: ${{ - host:"Direct Connection", - srflx: "Behind NAT (with STUN)", - prflx: "Proxy Connection (with STUN)", - relay: "TURN Server Connection" - }[stats.remoteCandidateType]}
- Remote Protocol: ${stats.remoteProtocol}
- Remote Address: ${stats.remoteAddress}
- Remote Port: ${stats.remotePort}
- - Connection Total Bytes Send: Total: ${hfs(stats.candidateBytesSent)} | Current : ${hfs(stats.candidateBytesSent - relative.candidateBytesSent)}
- Connection Total Bytes Recaived: Total: ${hfs(stats.candidateBytesReceived)} | Current : ${hfs(stats.candidateBytesReceived - relative.candidateBytesReceived)}
- Connection Round Trip Time: ${stats.currentRoundTripTime}ms
- - Incoming Video Decoder: ${stats.inboundvideo.decoderImplementation}
- Incoming Frame Width: ${stats.inboundvideo.frameWidth}px
- Incoming Frame Height: ${stats.inboundvideo.frameHeight}px
- Incoming Frame Per Second: ${stats.inboundvideo.framesPerSecond}
- Incoming Decode Time (CPU Time): ${(stats.inboundvideo.totalDecodeTime - relative.inboundvideo.totalDecodeTime).toFixed(3)}ms
- - Outgoing Video Encoder: ${stats.outboundvideo.encoderImplementation}
- Outgoing Frame Width: ${stats.outboundvideo.frameWidth}px
- Outgoing Frame Height: ${stats.outboundvideo.frameHeight}px
- Outgoing Frame Per Second: ${stats.outboundvideo.framesPerSecond}
- Outgoing Decode Time (CPU Time): ${(stats.outboundvideo.totalEncodeTime - relative.outboundvideo.totalEncodeTime).toFixed(3)}ms
- Quality Increase Limitator: ${stats.outboundvideo.qualityLimitationReason}
- - Crypting SRTP Cipher: ${stats.srtpCipher}
- Crypting D-TLS Cipher: ${stats.dtlsCipher}
- ${stats.localcert ? `EndToEnd Crypto Local Cert. Algoritm: ${stats.localcert.fingerprintAlgorithm}
- EndToEnd Crypto Remote Cert. Algoritm: ${stats.remotecert.fingerprintAlgorithm}
` : ''} - Bitrate Booster: ${activePeer.turboBitrate==0?"Waiting conditions":activePeer.turboBitrate==1?"Boosting":"Fail"}
- Codec Handcooling : Failed
- Hardware Accelerated : Failed
- - MWSE Version: 0.7.0-beta
- Load Balancing: Active
- Max P2P Hardware Connection: ~${((Math.random()*5)|0) + 72}
- Max P2P Software Connection: ~24
- Max Server Connection: 231
- SDP Adaptation: Long time session
- `; - 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]; -} \ No newline at end of file +let relative; \ No newline at end of file