cpp
/
libdatachannel
mirror of https://github.com/paullouisageneau/libdatachannel


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>libdatachannel media example</title>
</head>
<body>

<div style="display:inline-block; width:40%;">
    <h1>SENDER</h1>
    <p id="send-help">Please enter the offer provided to you by the application: </p>
    <textarea style="width:100%;" id=send-text rows="50"></textarea>
    <button id=send-btn>Submit</button>
</div>
<div style="display:inline-block; width:40%;">
    <h1>RECEIVER</h1>
    <p id="recv-help">Please enter the offer provided to you by the application: </p>
    <textarea id=recv-text style="width:100%;" rows="50"></textarea>
    <button id=recv-btn>Submit</button>
</div>
<div id="videos">

</div>
<script>
    document.querySelector('#send-btn').addEventListener('click',  async () => {
        let offer = JSON.parse(document.querySelector('#send-text').value);
        rtc = new RTCPeerConnection({
            // Recommended for libdatachannel
            bundlePolicy: "max-bundle",
        });

        rtc.onicegatheringstatechange = (state) => {
            if (rtc.iceGatheringState === 'complete') {
                // We only want to provide an answer once all of our candidates have been added to the SDP.
                let answer = rtc.localDescription;
                document.querySelector('#send-text').value = JSON.stringify({"type": answer.type, sdp: answer.sdp});
                document.querySelector('#send-help').value = 'Please paste the answer in the application.';
                alert('Please paste the answer in the application.');
            }
        }
        await rtc.setRemoteDescription(offer);

        let media = await navigator.mediaDevices.getUserMedia({
            video: {
                width: 1280,
                height: 720
            }
        });
        media.getTracks().forEach(track => rtc.addTrack(track, media));
        let answer = await rtc.createAnswer();
        await rtc.setLocalDescription(answer);
    });

    document.querySelector('#recv-btn').addEventListener('click',  async () => {
        let offer = JSON.parse(document.querySelector('#recv-text').value);
        rtc = new RTCPeerConnection({
            // Recommended for libdatachannel
            bundlePolicy: "max-bundle",
        });

        rtc.onicegatheringstatechange = (state) => {
            if (rtc.iceGatheringState === 'complete') {
                // We only want to provide an answer once all of our candidates have been added to the SDP.
                let answer = rtc.localDescription;
                document.querySelector('#recv-text').value = JSON.stringify({"type": answer.type, sdp: answer.sdp});
                document.querySelector('#recv-help').value = 'Please paste the answer in the application.';
                alert('Please paste the answer in the application.');
            }
        }
        let trackCount = 0;
        rtc.ontrack = (ev) => {
            let thisID = trackCount++;

            document.querySelector("#videos").innerHTML += "<video width=100% height=100% id='video-" + thisID + "'></video>";
            let tracks = [];
            rtc.getReceivers().forEach(recv => tracks.push(recv.track));
            document.querySelector("#video-" + thisID).srcObject = new MediaStream(tracks);
            document.querySelector("#video-" + thisID).play();
        };
        await rtc.setRemoteDescription(offer);
        let answer = await rtc.createAnswer();
        await rtc.setLocalDescription(answer);
    });
</script>

</body>
</html>