-
Notifications
You must be signed in to change notification settings - Fork 25
/
Copy pathnoserv.create.html
78 lines (72 loc) · 2.32 KB
/
noserv.create.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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> CREATE WebRTC channel </title>
<link href="noserv.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<h2> CREATE WebRTC channel <span id="status"> init </span></h2>
<h3> 1.CREATE Offer's SDP </h3>
<textarea id="creater-sdp"></textarea>
<h3> 4.GET Participant's SDP <button id="start">start</button></h3>
<textarea id="joiner-sdp" placeholder="HERE COPY AND PASTE [3.Participant'S SDP]"></textarea>
<h3> CHAT </h3>
<div id="chat">
<div id="chat-screen-wp">
<div id="chat-screen"></div>
</div>
<div id="ct"><input id="msg" disabled><button id="send" disabled>send</button></div>
</div>
<script>
//var server = { urls: "stun:stun.l.google.com:19302" };
var sdpConstraints = { optional: [{RtpDataChannels: true}] };
var pc = new RTCPeerConnection(null);
var dc;
pc.oniceconnectionstatechange = function(e) {
var state = pc.iceConnectionState;
$('#status').html(state);
if (state == "connected") $("#msg, #send").attr("disabled", false);
};
pc.onicecandidate = function(e) {
if (e.candidate) return;
$("#creater-sdp").val(JSON.stringify(pc.localDescription));
}
function createOfferSDP() {
dc = pc.createDataChannel("chat");
pc.createOffer().then(function(e) {
pc.setLocalDescription(e)
});
dc.onopen = function(){$("textarea").attr("disabled",true);addMSG("CONNECTED!", "info")};
dc.onmessage = function(e) {
if (e.data) addMSG(e.data, "other");
}
};
function start() {
var answerSDP = $('#joiner-sdp').val()
var answerDesc = new RTCSessionDescription(JSON.parse(answerSDP));
pc.setRemoteDescription(answerDesc);
}
var addMSG = function(msg, who) {
var wrap = $("<div>").addClass("wrap").appendTo($("#chat-screen"));
var div = $("<div>").addClass(who).appendTo(wrap);
$("<span>").html(who).addClass("who").appendTo(div);
$("<span>").html(msg).addClass("msg").appendTo(div);
$("#chat-screen-wp").scrollTop($("#chat-screen").height());
}
createOfferSDP();
var sendMSG = function() {
var value = $("#msg").val();
if (value) {
dc.send(value);
addMSG(value, "me");
$("#msg").val('');
}
}
$("#start").click(function(){start();});
$("#msg").keypress(function(e) {if(e.which == 13) {sendMSG()}});
$("#send").click(sendMSG);
</script>
</body>
</html>