MWSE/public/index.js

/**
 * @type {import("./MWSE/index").default}
 */
let mwse;
/**
 * @type {string}
 */
let mySocketId;
/**
 * @type {string}
 */
let myIPAddress;
/**
 * @type {string}
 */
let myNumber;
/**
 * @type {string}
 */
let roomid;
/**
 * @type {import("./MWSE/Room").default}
 */
let room;
/**
 * @type {MediaStream}
 */
let outgoingStream;
/**
 * @type {HTMLDivElement}
 */
let videoContainer = document.querySelector(".videolist");
let maxbitrate;
let resulation;
let activePeers = {}

let ofscreencanvas = document.createElement("canvas");

function connect()
{
    mwse = new MWSE({
        endpoint: "wss://ws.saqut.com"
    });
    
    mwse.scope(beginEngine);
}



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,e.play()));
})


/**
 * @type {HTMLVideoElement}
 */
let activeVideo;

function templateVideo(name, stream,infinitedMute)
{
    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;
    }else if(interact == false)
    {
        i.muted = 1;
        i.classList.add("soundon");
    }
    if(stream) i.srcObject = stream;
    return t.querySelector("div");
}
function addVideoList(name, stream, peer, infinitedMute)
{
    if(!videoContainer.querySelector(`[name="${name}"]`))
    {
        let video = templateVideo(name, stream, infinitedMute);
        video.dataset.user = peer.socketId;
        videoContainer.appendChild(video);
    }
}

function removeVideoList(name)
{
    if(videoContainer.querySelector(`[data-name="${name}"]`))
    {
        let k = videoContainer.querySelector(`[data-name="${name}"]`);
        if(k.dataset.user == activeVideo?.dataset.user || !activeVideo)
        {
            activePeer = null;
        }
        k.remove();
    }
}

async function beginEngine()
{
    let me = mwse.peer("me");
    me.disablePairAuth();
    mySocketId = me.socketId;
    myIPAddress = await mwse.virtualPressure.allocAPIPAddress();
    myNumber = await mwse.virtualPressure.allocAPNumber();

    let url = new URL(window.location);
    roomid = url.searchParams.get("room");
    
    if(!!roomid == 0)
    {
        let hash = window.crypto.randomUUID();
        url.searchParams.set("room", hash);
        window.location = url.href;
    };

    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()
{
    let mediaStream = await navigator.mediaDevices.getUserMedia({
        video: /*true*/{
            advanced: [
                { width: { exact: 1920 } },
                { width: { exact: 1600 } },
                { width: { exact: 1366 } },
                { width: { exact: 1280 } },
                { width: { exact: 1024 } },
                { width: { exact: 900 } },
                { width: { exact: 800 } },
                { width: { exact: 640 } },
                { width: { exact: 320 } },
                { width: { exact: 240 } }
            ],
            facingMode: "user"
        }
    });
    outgoingStream = mediaStream;
}



async function connectRoom()
{
    await startOutgoingWebcam();

    room = mwse.room({
        name: roomid,
        joinType: "free",
        accessType: "private",
        description: "Private free joined room",
        ifexistsJoin: true,
        notifyActionEjected: true,
        notifyActionInvite: false,
        notifyActionJoined: true
    });
    await room.createRoom();
    
    room.on("join", peer => IncomingPeer(peer, true));
    room.on("eject", peer => OutgoingPeer(peer));

    for (const peer of await room.fetchPeers()) {
        IncomingPeer(peer)
    }

    addVideoList("My Webcam",outgoingStream, mwse.peer("me"), true)

};

/**
 * @param {import("./MWSE/Peer").default} peer 
 */
function IncomingPeer(peer,activeConnect)
{
    peer.createRTC({
        iceCandidatePoolSize: 0
    },[{
        urls: "turn:20.166.82.187:3478",
        username: "turnserver",
        credential: "turnserver"
    },{
        urls: "stun:stun.l.google.com:19302"
    }]);
    if(activeConnect)
    {
        peer.rtc.connect();
    }
    peer.rtc.rtc.turboBitrate = 0;
    peer.rtc.on('connected',() => {
        if(!activeConnect)
        {
            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)
        {
            peer.rtc.sendStream(outgoingStream, "Webcam", {});
        }
    })
}
/**
 * @param {import("./MWSE/Peer").default} peer 
 */
function OutgoingPeer(peer)
{
    removeVideoList(peer.streamY, peer);
}

let relative;



setInterval(() => {
    for(const [,peerRtc] of Object.entries(activePeers))
    {
        if(peerRtc?.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;
                });
            }
        }
    }
},1000);