آموزش پخش ویدیو. JavaScript Webrtc Streaming مثال 🌐liberremoteplay

// PeerConnection declaration (note that you will need to specify iceServers)
let peerConnection = peerConnection = new RTCPeerConnection({iceServers});;

// This function returns the media stream generated by getDisplayMedia or
// undefined if the user rejects to share screen.
// Video and Audio properties can be objects to specify some parameters
// like resolution, frame rate, ...
async function getDisplayMediaStream(resolution, idealFrameRate maxFramerate) {
    try {
        const mediastream = await navigator.mediaDevices.getDisplayMedia({
            video: true,
            audio: true,
        });

        return mediastream;
    } catch (e) {
        return undefined;
    }
}

peerConnection.onicecandidate = async (event) => {
    if (event.candidate) {
        const data = {
            type: 'candidate',
            candidate: event.candidate.toJSON(),
            role: 'host'
        };

        return ws().send(JSON.stringify(data));

    }

    const answer = peerConnection?.localDescription?.toJSON();
    const data = {
        type: 'answer',
        answer,
        role: 'host'
    };

    return ws().send(JSON.stringify(data));

};

let offerArrived = false

async function onSignalArrive(data) {

    const { type, offer, candidate, role } = JSON.parse(data);

    if (role !== 'client') return;

    if (type === "candidate") {
        try {peerConnection.addIceCandidate(candidate)} catch {/** */}
        return
    }

    if (type !== 'offer') return;
    if (!offer || offerArrived) return;

    try {
        await peerConnection.setRemoteDescription(offer);
    } catch (e) {
        console.error(e)
        return
    }
    offerArrived = true;

    const stream = await getDisplayMediaStream(resolution, idealFrameRate, maxFramerate);

    // Here I add MediaStream tracks to the WebRTC Peerconnection
    stream?.getTracks().forEach((track) => {
        if (!stream) return;
        peerConnection?.addTrack(track, stream);
    });

    try {

        await peerConnection.setLocalDescription(await peerConnection.createAnswer());

    } catch (e) {
        console.error(e)
        return
    }

}


const cllbck = (ev) =>  onSignalArrive(ev.data)
ws().addEventListener("message", cllbck)
unlistenerStreamingSignal = () => ws().removeEventListener("message", cllbck)
return

const DEFAULT_PREFERED_CODECS = ["video/VP9","video/AV1","video/H264", "video/VP8"]

// This function is a little modification of one that you can find in MDN
// docs
export function getSortedVideoCodecs() {

    const codecs = RTCRtpReceiver.getCapabilities("video")?.codecs;

    if (!codecs) return [];

    return codecs.sort((a, b) => {
      const indexA = DEFAULT_PREFERED_CODECS.value.indexOf(a.mimeType);
      const indexB = DEFAULT_PREFERED_CODECS.value.indexOf(b.mimeType);
      const orderA = indexA >= 0 ? indexA : Number.MAX_VALUE;
      const orderB = indexB >= 0 ? indexB : Number.MAX_VALUE;
      return orderA - orderB;
    });
}

// PeerConnection declaration (note that you will need to specify iceServers)
let peerConnection = peerConnection = new RTCPeerConnection({iceServers});;

// Get the video element
const videoElement = document.getElementById("video-streaming");

// Add transceiver to receive video (if you don't want codec preferences
// is not needed to declare the transceiver)
const transceiver = peerConnection.addTransceiver("video", { direction: "recvonly" });

// Set the codec preferences to the transceiver (this is the prefered
// syntax, a lot of StackOverflow answers are not updated and say that 
// you must modify the raw SDP messages. These days setCodecPreferences
// is supported in almost every modern browsers)
transceiver.setCodecPreferences(getSortedVideoCodecs());

peerConnection.onicecandidate = (e) => {
    if (!e.candidate) return;

    const data = {
        type: 'candidate',
        candidate: e.candidate.toJSON(),
        role: 'client'
    };

    ws().send(JSON.stringify(data));
};

peerConnection.ontrack = (ev) => {

    if (ev.streams && ev.streams[0]) {
        // Setting videoElement source and automatically play video
        videoElement.srcObject = ev.streams[0];
        videoElement.play();
    } else {
        if (!inboundStream) {
        // Setting videoElement source and automatically play video
            inboundStream = new MediaStream();
            videoElement.srcObject = inboundStream;
            videoElement.play();
        }
        // Adding the track to the MediaStream
        inboundStream.addTrack(ev.track);
};

// Create the offer indicating that we want to receive audio/video
const offer = await peerConnection.createOffer({
    offerToReceiveAudio: true,
    offerToReceiveVideo: true,
    iceRestart: true
});

await peerConnection.setLocalDescription(offer);

const data = {
    type: 'offer',
    offer: offer,
    role: 'client'
};

ws().send(JSON.stringify(data));

async function onSignalArrive(data) {
    const { type, answer, candidate, role } = JSON.parse(data);

    if (role !== 'host') {
        return;
    }

    switch (type) {
        case 'answer':
            if (!answer) return;
            await peerConnection.setRemoteDescription(answer);
            break;
        case 'candidate':
            try {await peerConnection.addIceCandidate(candidate)} catch {/** */}
            break;
    }
}

const cllbck = (ev) =>  onSignalArrive(ev.data);
ws().addEventListener("message", cllbck);
unlistenerStreamingSignal = () => ws().removeEventListener("message", cllbck);