diff --git a/index.js b/index.js index b29e170..3bfe2d6 100644 --- a/index.js +++ b/index.js @@ -26,7 +26,7 @@ async function main() // Worker process list const master = new Map(); - const coreCount = 3 //os.cpus().length; + const coreCount = 1 //os.cpus().length; for(let index = 0; index < coreCount; index++) { // Open slave process diff --git a/public/index.css b/public/index.css index d5adbf1..39bd8dd 100644 --- a/public/index.css +++ b/public/index.css @@ -4,36 +4,49 @@ html,body{ } body{ background-color: #141414; + overflow: hidden; +} +*{ + box-sizing: border-box; } .root{ gap: 10px; - padding: 0px; + padding: 10px; height: 100%; display: flex; flex-wrap: nowrap; flex-direction: row; box-sizing: border-box; + overflow: hidden; } .videolist{ - padding-right: 10px; - cursor: pointer; width: 100%; height: 100%; display: grid; - grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(40vh, 1fr)); grid-template-rows: repeat(auto-fit, minmax(23vh, 1fr)); - gap: 5px; + gap: 10px; justify-content: center; align-items: center; + overflow: hidden; } .videolist .frame{ - border: solid 3px transparent; - aspect-ratio: 16 / 9; + border: solid 2px white; width: 100%; - object-fit: contain; + height: 100%; max-width: 100%; max-height: 100%; align-items: center; + border-radius: 20px; + box-sizing: border-box; + padding: 1px; + overflow: hidden; + position: relative; +} +.videolist .frame > video{ + width: 100%; + height: 100%; + object-fit: cover; } .videolist .frame.active{ border: solid 3px green; @@ -53,4 +66,35 @@ video{ background-color: #ffffff1f; } +.tool-container{ + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + display: flex; +} +.tool-container > .tools{ + margin: auto; + background-color: rgba(0, 0, 0, 0.5); + border-radius: 10px; + overflow: hidden; +} +.tool-container > .tools > button{ + border: none; + color: white; + vertical-align: middle; + cursor: pointer; + padding: 0 10px; +} +.tool-container > .tools > button:not(:hover){ + background-color: transparent; +} +.tool-container > .tools > button:hover{ + background-color: rgba(255,255,255,0.2); +} +.tool-container > .tools > button i{ + vertical-align: middle; + line-height: 2; +} diff --git a/public/index.html b/public/index.html index 0a0ce96..e6185c9 100644 --- a/public/index.html +++ b/public/index.html @@ -6,7 +6,7 @@ saQüt Video Streaming - +
@@ -14,6 +14,7 @@
- + + \ No newline at end of file diff --git a/public/index.js b/public/index.js index 9cd76a2..32ac52b 100644 --- a/public/index.js +++ b/public/index.js @@ -26,16 +26,15 @@ let room; * @type {MediaStream} */ let outgoingStream; -/** - * @type {MediaStream} - */ -let outgoingStreamOnlyVideo; /** * @type {HTMLDivElement} */ let videoContainer = document.querySelector(".videolist"); let maxbitrate; let resulation; +let activePeers = {} + +let ofscreencanvas = document.createElement("canvas"); function connect() { @@ -50,9 +49,13 @@ function connect() let interact = false; +setInterval(()=>{ + document.querySelectorAll(".soundon").forEach(e => (e.muted = 0,e.play())); +},1000) + document.addEventListener("click",()=>{ interact = true; - document.querySelectorAll(".soundon").forEach(e => e.muted = 0); + document.querySelectorAll(".soundon").forEach(e => (e.muted = 0,e.play())); }) @@ -63,7 +66,25 @@ let activeVideo; function templateVideo(name, stream,infinitedMute) { - let i = document.createElement("video"); + let t = new DOMParser().parseFromString(` +
+ +
+
+ + +
+
+
+ `,"text/html"); + + let i = t.querySelector("video"); if(infinitedMute == true) { i.muted = 1; @@ -72,12 +93,8 @@ function templateVideo(name, stream,infinitedMute) i.muted = 1; i.classList.add("soundon"); } - i.classList.add("frame") - i.playsInline = 1; - i.autoplay = 1; - i.dataset.name = name; if(stream) i.srcObject = stream; - return i; + return t.querySelector("div"); } function addVideoList(name, stream, peer, infinitedMute) { @@ -121,15 +138,34 @@ async function beginEngine() }; connectRoom(roomid); + + if(url.searchParams.get("maxbitrate")) + { + let n = Number(url.searchParams.get("maxbitrate")); + if(Number.isFinite(n) && !Number.isNaN(n)) + { + maxbitrate = n; + }else maxbitrate = 2500_000; + }else maxbitrate = 2500_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.2; + }else resulation = 1.2; }; window.addEventListener("load", () => { connect() }); + async function startOutgoingWebcam() { - outgoingStream = await navigator.mediaDevices.getUserMedia({ + let mediaStream = await navigator.mediaDevices.getUserMedia({ video: /*true*/{ advanced: [ { width: { exact: 1920 } }, @@ -144,12 +180,13 @@ async function startOutgoingWebcam() { width: { exact: 240 } } ], facingMode: "user" - },/**/ - audio: false + } }); - outgoingStreamOnlyVideo = new MediaStream(outgoingStream); + outgoingStream = mediaStream; } + + async function connectRoom() { await startOutgoingWebcam(); @@ -173,7 +210,7 @@ async function connectRoom() IncomingPeer(peer) } - addVideoList("My Webcam",outgoingStreamOnlyVideo, mwse.peer("me"), true) + addVideoList("My Webcam",outgoingStream, mwse.peer("me"), true) }; @@ -182,7 +219,6 @@ async function connectRoom() */ function IncomingPeer(peer,activeConnect) { - let sendedOTP = false; peer.createRTC({ iceCandidatePoolSize: 0 },[{ @@ -198,21 +234,21 @@ function IncomingPeer(peer,activeConnect) } peer.rtc.rtc.turboBitrate = 0; peer.rtc.on('connected',() => { - if(!activeConnect && !sendedOTP) + if(!activeConnect) { - sendedOTP = true; peer.rtc.sendStream(outgoingStream, "Webcam", {}); + activePeers[peer.socketId] = peer.rtc.rtc; } }); peer.rtc.on('disconnected',() => { removeVideoList(peer.streamY, peer); + delete activePeers[peer.socketId]; }); peer.rtc.on("stream:added", ({stream,name}) => { peer.streamY = peer.socketId + " | " + name + " - " + stream.id; addVideoList(peer.socketId + " | " + name + " - " + stream.id,stream, peer); - if(activeConnect && !sendedOTP) + if(activeConnect) { - sendedOTP = true; peer.rtc.sendStream(outgoingStream, "Webcam", {}); } }) @@ -225,27 +261,25 @@ function OutgoingPeer(peer) removeVideoList(peer.streamY, peer); } -/* +let relative; + + + setInterval(() => { - if(activePeer?.turboBitrate === 0) + for(const [,peerRtc] of Object.entries(activePeers)) { - const senders = activePeer.getSenders(); - const videoSender = senders.find(sender => sender.track?.kind === 'video'); - if(videoSender) + if(peerRtc?.turboBitrate !== 1) { - const parameters = videoSender.getParameters(); - parameters.encodings[0].maxBitrate = maxbitrate; - parameters.encodings[0].scaleResolutionDownBy = resulation; - 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; - }); + const senders = peerRtc.getSenders(); + const videoSender = senders.find(sender => sender.track?.kind === 'video'); + if(videoSender){ + const parameters = videoSender.getParameters(); + parameters.encodings[0].maxBitrate = maxbitrate; + parameters.encodings[0].scaleResolutionDownBy = resulation; + videoSender.setParameters(parameters).then(() => { + peerRtc.turboBitrate = 1; + }); + } } } -}, 5000);*/ - -let relative; \ No newline at end of file +},1000); \ No newline at end of file