Styling
This commit is contained in:
abdussamedulutas
parent
b66adffd3a
commit
cbe424f3e3
2
index.js
2
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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>saQüt Video Streaming</title>
|
||||
<script src="https://ws.saqut.com/script"></script>
|
||||
<link rel="stylesheet" href="./index.css">
|
||||
<link rel="stylesheet" href="./index.css?v=42">
|
||||
</head>
|
||||
<body>
|
||||
<div class="root">
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
|
||||
</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>
|
||||
</html>
|
||||
104
public/index.js
104
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(`
|
||||
<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)
|
||||
{
|
||||
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();
|
||||
if(peerRtc?.turboBitrate !== 1)
|
||||
{
|
||||
const senders = peerRtc.getSenders();
|
||||
const videoSender = senders.find(sender => sender.track?.kind === 'video');
|
||||
if(videoSender)
|
||||
{
|
||||
if(videoSender){
|
||||
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;
|
||||
peerRtc.turboBitrate = 1;
|
||||
});
|
||||
}
|
||||
}
|
||||
}, 5000);*/
|
||||
|
||||
let relative;
|
||||
}
|
||||
},1000);
|
||||
Loading…
Reference in New Issue