-
Notifications
You must be signed in to change notification settings - Fork 0
/
cutnpastecall.html
58 lines (52 loc) · 1.84 KB
/
cutnpastecall.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE HTML>
<html>
<body>
<video id="video1" width="160" height="120" autoplay muted></video>
<video id="video2" width="160" height="120" autoplay></video><br>
<button id="button">Offer:</button>
<textarea id="offer" placeholder="Paste offer here"></textarea><br>
Answer: <textarea id="answer"></textarea><br><div id="div"></div>
<div id="div"></div><br>
<script>
const console = { log: msg => div.innerHTML += msg + "<br>" };
const config = {iceServers: [{urls: "stun:stun.l.google.com:19302"}]};
const pc = new RTCPeerConnection(config);
(async () => {
video1.srcObject = await navigator.mediaDevices.getUserMedia({video:true, audio:true});
for (track of video1.srcObject.getTracks()) {
pc.addTrack(track, video1.srcObject);
}
})();
pc.oniceconnectionstatechange = e => console.log(pc.iceConnectionState);
pc.ontrack = ({streams: [stream]}) => video2.srcObject = stream;
button.onclick = async () => {
button.disabled = true;
await pc.setLocalDescription(await pc.createOffer());
pc.onicecandidate = ({candidate}) => {
if (candidate) return;
offer.value = pc.localDescription.sdp;
offer.select();
answer.placeholder = "Paste answer here";
};
};
offer.onkeypress = async ({keyCode}) => {
if (keyCode != 13 || pc.signalingState != "stable") return;
button.disabled = offer.disabled = true;
await pc.setRemoteDescription({type: "offer", sdp: offer.value});
await pc.setLocalDescription(await pc.createAnswer());
pc.onicecandidate = ({candidate}) => {
if (candidate) return;
answer.focus();
answer.value = pc.localDescription.sdp;
answer.select();
};
};
answer.onkeypress = async ({keyCode}) => {
if (keyCode != 13 || pc.signalingState != "have-local-offer") return;
answer.disabled = true;
await pc.setRemoteDescription({type: "answer", sdp: answer.value});
};
</script>
</pre>
</body>
</html>