mirror of
https://github.com/mii443/libdatachannel.git
synced 2025-08-22 15:15:28 +00:00
46 lines
1.5 KiB
HTML
46 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>libdatachannel media example</title>
|
|
</head>
|
|
<body>
|
|
|
|
<p>Please enter the offer provided to you by the application: </p>
|
|
<textarea cols="50" rows="50"></textarea>
|
|
<button>Submit</button>
|
|
|
|
<script>
|
|
document.querySelector('button').addEventListener('click', async () => {
|
|
let offer = JSON.parse(document.querySelector('textarea').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('textarea').value = JSON.stringify({"type": answer.type, sdp: answer.sdp});
|
|
document.querySelector('p').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);
|
|
})
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|