diff --git a/common.js b/common.js new file mode 100644 index 0000000..2c51a20 --- /dev/null +++ b/common.js @@ -0,0 +1,59 @@ +var common = (function () { + function fallback(text) { + const isIos = navigator.userAgent.match(/ipad|iphone/i); + const textarea = document.createElement('textarea'); + + // create textarea + textarea.value = text; + + // ios will zoom in on the input if the font-size is < 16px + textarea.style.fontSize = '20px'; + document.body.appendChild(textarea); + + // select text + if (isIos) { + const range = document.createRange(); + range.selectNodeContents(textarea); + + const selection = window.getSelection(); + selection.removeAllRanges(); + selection.addRange(range); + textarea.setSelectionRange(0, 999999); + } else { + textarea.select(); + } + + // copy selection + document.execCommand('copy'); + + // cleanup + document.body.removeChild(textarea); + }; + + function copyFeedback() { + document.body.classList.add('filled'); + + setTimeout(function () { + document.body.classList.remove('filled'); + }, 750); + } + + function copyIntoClipboard(id) { + var elem = document.getElementById(id); + var text = ''; + if (elem) { + text = elem.value; + if (!navigator.clipboard) { + fallback(text); + copyFeedback(); + return; + } + navigator.clipboard.writeText(text); + copyFeedback(); + } + }; + + return { + copyIntoClipboard: copyIntoClipboard + }; +})(); diff --git a/index.html b/index.html index 0e7f518..511bc22 100644 --- a/index.html +++ b/index.html @@ -1,32 +1,133 @@ + Serverless webrtc demo + -

- Serverless simple chat app by passing SDP @ WebRTC - - - -

- - -
-

- OPERA, FIREFOX, CHROME SAFARI, IE, IE-EDGE -
only html, javascript, css
-

+

+ Serverless simple chat app by passing SDP @ WebRTC + + + + +

+ + +
+

+ OPERA, FIREFOX, CHROME SAFARI, IE, IE-EDGE +
only html, javascript, css
+

+ + \ No newline at end of file diff --git a/noserv.create.html b/noserv.create.html index 0e160ae..845dacc 100644 --- a/noserv.create.html +++ b/noserv.create.html @@ -1,78 +1,168 @@ + CREATE WebRTC channel + + -

CREATE WebRTC channel init

-

1.CREATE Offer's SDP

- -

4.GET Participant's SDP

- -

CHAT

-
-
-
+

CREATE WebRTC channel init

+

1.CREATE Offer's SDP + + +

+ +

4.GET Participant's SDP

+ +

CHAT

+
+
+
+
+
+
+

LOG

+
+
+
+
-
-
- + + \ No newline at end of file diff --git a/noserv.css b/noserv.css index a056ed8..c1e3e7d 100644 --- a/noserv.css +++ b/noserv.css @@ -1,8 +1,14 @@ -body {line-height:1.8} +body { + line-height:1.8; + transition: background-color 1s ease-out; + -webkit-transition: background-color 1s ease-out; + -moz-transition: background-color 1s ease-out; + -o-transition: background-color 1s ease-out; +} h2 {font-size:20px;margin:0;padding:0 15px} h3 {font-size:16px;margin:0;padding:0 8px} textarea {display:block;width:100%;box-sizing:border-box;margin:3px;height:50px;font-size:11px;font-family:tahoma,arial,sans-serif} -#chat-screen-wp { +#chat-screen-wp, #log-screen-wp { position:relative; height: 140px; margin: 0 3px; padding: 18px 5px 5px; border:1px solid #dfdfdf; @@ -16,4 +22,7 @@ div.wrap {clear: both; padding:4px 8px} div.info {position:absolute;right:0;top:0;padding:5px 18px;} div.other {color: #0060A0;float:left;padding:5px 18px;background:#FAFAFA;border-radius:8px;} div.me {color: #EB088C;float:right;padding:5px 18px;background:#F4FAFF;border-radius:8px;} -span.who {display: inline-block;margin-right:5px;width:30px;text-align:center;display:none;} \ No newline at end of file +span.who {display: inline-block;margin-right:5px;width:30px;text-align:center;display:none;} +.filled { + background-color: #3498db; +} \ No newline at end of file diff --git a/noserv.join.html b/noserv.join.html index 4c840eb..af72a08 100644 --- a/noserv.join.html +++ b/noserv.join.html @@ -1,75 +1,104 @@ + JOIN WebRTC channel + + -

JOIN WebRTC channel init

-

2.GET Offer's SDP

- -

3.CREATE Participant'S SDP

- -

CHAT

-
-
-
+

JOIN WebRTC channel init

+

2.GET Offer's SDP

+ +

3.CREATE Participant'S SDP

+ +

CHAT

+
+
+
+
+
+
+

LOG

+
+
+
+
-
-
- + var addMSG = function (msg, who) { + var wrap = $("
").addClass("wrap").appendTo($("#chat-screen")); + var div = $("
").addClass(who).appendTo(wrap); + $("").html(who).addClass("who").appendTo(div); + $("").html(msg).addClass("msg").appendTo(div); + $("#chat-screen-wp").scrollTop($("#chat-screen").height()); + } + + var addLog = function (msg) { + var wrap = $("
").addClass("wrap").appendTo($("#log-screen")); + var div = $("
").appendTo(wrap); + $("").appendTo(div); + $("").html(msg).addClass("msg").appendTo(div); + $("#log-screen-wp").scrollTop($("#log-screen").height()); + } + + $("#create").click(createAnswerSDP); + $("#msg").keypress(function (e) { if (e.which == 13) { sendMSG() } }); + $("#send").click(sendMSG); + + \ No newline at end of file