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

Styling

This commit is contained in:
abdussamedulutas 2025-07-01 21:26:31 +03:00
parent b66adffd3a
commit cbe424f3e3
4 changed files with 130 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.js
View File

@ -26,7 +26,7 @@ async function main()
// Worker process list // Worker process list
const master = new Map(); const master = new Map();
const coreCount = 3 //os.cpus().length; const coreCount = 1 //os.cpus().length;
for(let index = 0; index < coreCount; index++) for(let index = 0; index < coreCount; index++)
{ {
// Open slave process // Open slave process

60
public/index.css
View File

@ -4,36 +4,49 @@ html,body{
} }
body{ body{
background-color: #141414; background-color: #141414;
overflow: hidden;
}
*{
box-sizing: border-box;
} }
.root{ .root{
gap: 10px; gap: 10px;
padding: 0px; padding: 10px;
height: 100%; height: 100%;
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
flex-direction: row; flex-direction: row;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden;
} }
.videolist{ .videolist{
padding-right: 10px;
cursor: pointer;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: grid; 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)); grid-template-rows: repeat(auto-fit, minmax(23vh, 1fr));
gap: 5px; gap: 10px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
overflow: hidden;
} }
.videolist .frame{ .videolist .frame{
border: solid 3px transparent; border: solid 2px white;
aspect-ratio: 16 / 9;
width: 100%; width: 100%;
object-fit: contain; height: 100%;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
align-items: center; 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{ .videolist .frame.active{
border: solid 3px green; border: solid 3px green;
@ -53,4 +66,35 @@ video{
background-color: #ffffff1f; 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;
}

5
public/index.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>saQüt Video Streaming</title> <title>saQüt Video Streaming</title>
<script src="https://ws.saqut.com/script"></script> <script src="https://ws.saqut.com/script"></script>
<link rel="stylesheet" href="./index.css"> <link rel="stylesheet" href="./index.css?v=42">
</head> </head>
<body> <body>
<div class="root"> <div class="root">
@ -14,6 +14,7 @@
</div> </div>
</div> </div>
<script src="index.js?v=32"></script> <script src="index.js?v=42"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</body> </body>
</html> </html>

114
public/index.js
View File

@ -26,16 +26,15 @@ let room;
* @type {MediaStream} * @type {MediaStream}
*/ */
let outgoingStream; let outgoingStream;
/**
* @type {MediaStream}
*/
let outgoingStreamOnlyVideo;
/** /**
* @type {HTMLDivElement} * @type {HTMLDivElement}
*/ */
let videoContainer = document.querySelector(".videolist"); let videoContainer = document.querySelector(".videolist");
let maxbitrate; let maxbitrate;
let resulation; let resulation;
let activePeers = {}
let ofscreencanvas = document.createElement("canvas");
function connect() function connect()
{ {
@ -50,9 +49,13 @@ function connect()
let interact = false; let interact = false;
setInterval(()=>{
document.querySelectorAll(".soundon").forEach(e => (e.muted = 0,e.play()));
},1000)
document.addEventListener("click",()=>{ document.addEventListener("click",()=>{
interact = true; 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) function templateVideo(name, stream,infinitedMute)
{ {
let i = document.createElement("video"); let t = new DOMParser().parseFromString(`
<div class="frame">
<video autoplay playsinline muted data-name="${name}">
</video>
<div class="tool-container">
<div class="tools">
<button>
<i class="material-icons">home</i>
</button>
<button>
<i class="material-icons">close</i>
</button>
</div>
</div>
</div>
`,"text/html");
let i = t.querySelector("video");
if(infinitedMute == true) if(infinitedMute == true)
{ {
i.muted = 1; i.muted = 1;
@ -72,12 +93,8 @@ function templateVideo(name, stream,infinitedMute)
i.muted = 1; i.muted = 1;
i.classList.add("soundon"); i.classList.add("soundon");
} }
i.classList.add("frame")
i.playsInline = 1;
i.autoplay = 1;
i.dataset.name = name;
if(stream) i.srcObject = stream; if(stream) i.srcObject = stream;
return i; return t.querySelector("div");
} }
function addVideoList(name, stream, peer, infinitedMute) function addVideoList(name, stream, peer, infinitedMute)
{ {
@ -121,15 +138,34 @@ async function beginEngine()
}; };
connectRoom(roomid); 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", () => { window.addEventListener("load", () => {
connect() connect()
}); });
async function startOutgoingWebcam() async function startOutgoingWebcam()
{ {
outgoingStream = await navigator.mediaDevices.getUserMedia({ let mediaStream = await navigator.mediaDevices.getUserMedia({
video: /*true*/{ video: /*true*/{
advanced: [ advanced: [
{ width: { exact: 1920 } }, { width: { exact: 1920 } },
@ -144,12 +180,13 @@ async function startOutgoingWebcam()
{ width: { exact: 240 } } { width: { exact: 240 } }
], ],
facingMode: "user" facingMode: "user"
},/**/ }
audio: false
}); });
outgoingStreamOnlyVideo = new MediaStream(outgoingStream); outgoingStream = mediaStream;
} }
async function connectRoom() async function connectRoom()
{ {
await startOutgoingWebcam(); await startOutgoingWebcam();
@ -173,7 +210,7 @@ async function connectRoom()
IncomingPeer(peer) 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) function IncomingPeer(peer,activeConnect)
{ {
let sendedOTP = false;
peer.createRTC({ peer.createRTC({
iceCandidatePoolSize: 0 iceCandidatePoolSize: 0
},[{ },[{
@ -198,21 +234,21 @@ function IncomingPeer(peer,activeConnect)
} }
peer.rtc.rtc.turboBitrate = 0; peer.rtc.rtc.turboBitrate = 0;
peer.rtc.on('connected',() => { peer.rtc.on('connected',() => {
if(!activeConnect && !sendedOTP) if(!activeConnect)
{ {
sendedOTP = true;
peer.rtc.sendStream(outgoingStream, "Webcam", {}); peer.rtc.sendStream(outgoingStream, "Webcam", {});
activePeers[peer.socketId] = peer.rtc.rtc;
} }
}); });
peer.rtc.on('disconnected',() => { peer.rtc.on('disconnected',() => {
removeVideoList(peer.streamY, peer); removeVideoList(peer.streamY, peer);
delete activePeers[peer.socketId];
}); });
peer.rtc.on("stream:added", ({stream,name}) => { peer.rtc.on("stream:added", ({stream,name}) => {
peer.streamY = peer.socketId + " | " + name + " - " + stream.id; peer.streamY = peer.socketId + " | " + name + " - " + stream.id;
addVideoList(peer.socketId + " | " + name + " - " + stream.id,stream, peer); addVideoList(peer.socketId + " | " + name + " - " + stream.id,stream, peer);
if(activeConnect && !sendedOTP) if(activeConnect)
{ {
sendedOTP = true;
peer.rtc.sendStream(outgoingStream, "Webcam", {}); peer.rtc.sendStream(outgoingStream, "Webcam", {});
} }
}) })
@ -225,27 +261,25 @@ function OutgoingPeer(peer)
removeVideoList(peer.streamY, peer); removeVideoList(peer.streamY, peer);
} }
/* let relative;
setInterval(() => { setInterval(() => {
if(activePeer?.turboBitrate === 0) for(const [,peerRtc] of Object.entries(activePeers))
{ {
const senders = activePeer.getSenders(); if(peerRtc?.turboBitrate !== 1)
const videoSender = senders.find(sender => sender.track?.kind === 'video');
if(videoSender)
{ {
const parameters = videoSender.getParameters(); const senders = peerRtc.getSenders();
parameters.encodings[0].maxBitrate = maxbitrate; const videoSender = senders.find(sender => sender.track?.kind === 'video');
parameters.encodings[0].scaleResolutionDownBy = resulation; if(videoSender){
videoSender.setParameters(parameters).then(() => { const parameters = videoSender.getParameters();
// console.log('Bitrate değiştirildi.'); parameters.encodings[0].maxBitrate = maxbitrate;
activePeer.turboBitrate = 1; parameters.encodings[0].scaleResolutionDownBy = resulation;
}) videoSender.setParameters(parameters).then(() => {
.catch(error => { peerRtc.turboBitrate = 1;
// console.error('Bitrate değiştirilirken bir hata oluştu:', error); });
activePeer.turboBitrate = -1; }
});
} }
} }
}, 5000);*/ },1000);
let relative;