-
Notifications
You must be signed in to change notification settings - Fork 34
/
index.html
102 lines (95 loc) · 9.56 KB
/
index.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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="description" content="Hello is a 100% peer-to-peer video chat app." />
<meta name="keywords" content="video chat, webrtc, peer to peer" />
<meta name="author" content="Vasanth V" />
<meta name="application-name" content="Hello" />
<meta name="theme-color" content="#EFEFEF">
<link rel="author" href="https://twitter.com/vsnthv">
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="icon.png" type="image/png" />
<link rel="icon" href="icon.svg" sizes="any" type="image/svg+xml" />
<title>Hello</title>
<script type="text/javascript" defer src="script.js"></script>
<style type="text/css">
* {outline: 0; }
html{height: 100%;}
body {background:#1E1F24;font-size: 1em;color:#b2b3b7;height: 100%;margin: 0px;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
video {width:100%;height:auto;height:100%;object-fit: cover;}
a, a:visited{color:#1E1F24;}
hr{border: 1px dashed #cdcdcd;border-bottom: 0px;height:0px;}
::-webkit-scrollbar {width: 0px;background: transparent;}
::-webkit-scrollbar-thumb {background: rgba(0,0,0,0);}
[contenteditable='true']:empty:before {cursor: text !important; content: attr(data-placeholder); color: #999;}
#wrap{width: 100%;height:100%;margin: auto;}
.videoWrap {position:relative;float:left;width: 50%;height: 100%;overflow: hidden;}
#selfVideo {-webkit-transform: scaleX(-1);-moz-transform: scaleX(-1);-ms-transform: scaleX(-1);-o-transform: scaleX(-1);transform: scaleX(-1);}
#chatBtn{position: fixed;right:10px;bottom:10px;background: #fff;display: block; height:48px;width:48px;line-height: 48px;text-align: center;text-decoration: none;font-size: 2rem;border-radius: 24px;}
#chatWrap{position: fixed;right:0px;bottom:50px;width:320px;}
#chats{height: 420px;overflow-y: scroll;}
.chat{background:#fff;color:#1E1F24;padding:15px;border-radius: 10px;margin:20px 10px;}
.chat.mine{text-align: right;background: rgba(255,255,255,0.8);}
#newmsg{margin-top: 0px;}
#blanket{position: absolute;top:0px;bottom:0px;left:0px;right:0px;background: rgba(0,0,0,0.7);z-index: 5;}
#intro{position: relative; width:50%;top: 15%;left:25%;right:25%;background: #fff;color:#1E1F24;padding:25px;line-height: 1.75;font-size: 1.2rem;box-sizing: border-box;}
#pitch{padding: 0 0 10px;}
.formWrap{display: none;}
.formWrap input, .formWrap button{box-sizing: border-box;padding:10px;border-radius: 5px;border:1px solid #999;}
.formWrap input{display: block; width:77%;margin-right:2%;float:left;}
.formWrap button{display: block; width:20%;cursor: pointer;border-color:#3498db;background: #3498db;color:#fff;}
.formWrap#step2 button{border-color:#1abc9c;background: #1abc9c;}
.desc{font-size: 1rem;}
#footer{font-size: 0.8rem;text-align: center;padding:15px 0 0;}
@media only screen and (max-width: 960px) {
#intro{width:80%;top: 15%;left:10%;right:10%;padding:15px;}
}
@media only screen and (max-width: 720px) {
.videoWrap {width: 100%;height: 50%;}
#intro{width:96%;top: 15%;left:2%;right:2%;}
}
</style>
</head>
<body ontouchstart="">
<div id="wrap">
<div id="selfWrap" class="videoWrap">
<video autoplay playsinline id="selfVideo" muted volume="0"></video>
</div>
<div id="callerWrap" class="videoWrap">
<video autoplay playsinline id="callerVideo"></video>
</div>
</div>
<div id="chatWrap" style="display: none;">
<div id="chats"></div>
<div class="chat" id="newmsg" contenteditable="true" data-placeholder="Type your message here"></div>
</div>
<a id="chatBtn" href="javascript:toggleChat()">#</a>
<div id="blanket">
<div id="intro">
<div id="pitch">
<strong>Hello</strong> is a 100% peer-to-peer video chat app. It uses WebRTC for real time peer-to-peer video communication. WebRTC does not have peer discovery, so you have to follow the steps to connect with your peer.
</div>
<div class="formWrap" id="step1">
<hr />
<div class="desc"><strong>Step 1:</strong> <i>Copy the below URL and share it with your peer.</i></div>
<input type="text" value="" id="copyMessage" maxlength="4096" />
<button onclick="copyBtn()">Copy</button>
</div>
<div class="formWrap" id="step2">
<hr />
<div class="desc"><strong>Step 2:</strong> <i>Paste the answer you got from your peer.</i></div>
<input type="text" value="" id="pasteMessage" maxlength="4096" />
<button onclick="connectBtn()">Connect</button>
</div>
<div id="footer">
Made by <a href="https://twitter.com/vsnthv" target="_blank">Vasanth</a> · <a href="https://github.com/vasanthv/hello/#readme" target="_blank">About</a>
</div>
</div>
</div>
<script type="text/javascript">
const LZString=function(){function o(o,r){if(!t[o]){t[o]={};for(var n=0;n<o.length;n++)t[o][o.charAt(n)]=n}return t[o][r]}var r=String.fromCharCode,n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$",t={},i={compressToBase64:function(o){if(null==o)return"";var r=i._compress(o,6,function(o){return n.charAt(o)});switch(r.length%4){default:case 0:return r;case 1:return r+"===";case 2:return r+"==";case 3:return r+"="}},decompressFromBase64:function(r){return null==r?"":""==r?null:i._decompress(r.length,32,function(e){return o(n,r.charAt(e))})},compressToUTF16:function(o){return null==o?"":i._compress(o,15,function(o){return r(o+32)})+" "},decompressFromUTF16:function(o){return null==o?"":""==o?null:i._decompress(o.length,16384,function(r){return o.charCodeAt(r)-32})},compressToUint8Array:function(o){for(var r=i.compress(o),n=new Uint8Array(2*r.length),e=0,t=r.length;t>e;e++){var s=r.charCodeAt(e);n[2*e]=s>>>8,n[2*e+1]=s%256}return n},decompressFromUint8Array:function(o){if(null===o||void 0===o)return i.decompress(o);for(var n=new Array(o.length/2),e=0,t=n.length;t>e;e++)n[e]=256*o[2*e]+o[2*e+1];var s=[];return n.forEach(function(o){s.push(r(o))}),i.decompress(s.join(""))},compressToEncodedURIComponent:function(o){return null==o?"":i._compress(o,6,function(o){return e.charAt(o)})},decompressFromEncodedURIComponent:function(r){return null==r?"":""==r?null:(r=r.replace(/ /g,"+"),i._decompress(r.length,32,function(n){return o(e,r.charAt(n))}))},compress:function(o){return i._compress(o,16,function(o){return r(o)})},_compress:function(o,r,n){if(null==o)return"";var e,t,i,s={},p={},u="",c="",a="",l=2,f=3,h=2,d=[],m=0,v=0;for(i=0;i<o.length;i+=1)if(u=o.charAt(i),Object.prototype.hasOwnProperty.call(s,u)||(s[u]=f++,p[u]=!0),c=a+u,Object.prototype.hasOwnProperty.call(s,c))a=c;else{if(Object.prototype.hasOwnProperty.call(p,a)){if(a.charCodeAt(0)<256){for(e=0;h>e;e++)m<<=1,v==r-1?(v=0,d.push(n(m)),m=0):v++;for(t=a.charCodeAt(0),e=0;8>e;e++)m=m<<1|1&t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t>>=1}else{for(t=1,e=0;h>e;e++)m=m<<1|t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t=0;for(t=a.charCodeAt(0),e=0;16>e;e++)m=m<<1|1&t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t>>=1}l--,0==l&&(l=Math.pow(2,h),h++),delete p[a]}else for(t=s[a],e=0;h>e;e++)m=m<<1|1&t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t>>=1;l--,0==l&&(l=Math.pow(2,h),h++),s[c]=f++,a=String(u)}if(""!==a){if(Object.prototype.hasOwnProperty.call(p,a)){if(a.charCodeAt(0)<256){for(e=0;h>e;e++)m<<=1,v==r-1?(v=0,d.push(n(m)),m=0):v++;for(t=a.charCodeAt(0),e=0;8>e;e++)m=m<<1|1&t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t>>=1}else{for(t=1,e=0;h>e;e++)m=m<<1|t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t=0;for(t=a.charCodeAt(0),e=0;16>e;e++)m=m<<1|1&t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t>>=1}l--,0==l&&(l=Math.pow(2,h),h++),delete p[a]}else for(t=s[a],e=0;h>e;e++)m=m<<1|1&t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t>>=1;l--,0==l&&(l=Math.pow(2,h),h++)}for(t=2,e=0;h>e;e++)m=m<<1|1&t,v==r-1?(v=0,d.push(n(m)),m=0):v++,t>>=1;for(;;){if(m<<=1,v==r-1){d.push(n(m));break}v++}return d.join("")},decompress:function(o){return null==o?"":""==o?null:i._decompress(o.length,32768,function(r){return o.charCodeAt(r)})},_decompress:function(o,n,e){var t,i,s,p,u,c,a,l,f=[],h=4,d=4,m=3,v="",w=[],A={val:e(0),position:n,index:1};for(i=0;3>i;i+=1)f[i]=i;for(p=0,c=Math.pow(2,2),a=1;a!=c;)u=A.val&A.position,A.position>>=1,0==A.position&&(A.position=n,A.val=e(A.index++)),p|=(u>0?1:0)*a,a<<=1;switch(t=p){case 0:for(p=0,c=Math.pow(2,8),a=1;a!=c;)u=A.val&A.position,A.position>>=1,0==A.position&&(A.position=n,A.val=e(A.index++)),p|=(u>0?1:0)*a,a<<=1;l=r(p);break;case 1:for(p=0,c=Math.pow(2,16),a=1;a!=c;)u=A.val&A.position,A.position>>=1,0==A.position&&(A.position=n,A.val=e(A.index++)),p|=(u>0?1:0)*a,a<<=1;l=r(p);break;case 2:return""}for(f[3]=l,s=l,w.push(l);;){if(A.index>o)return"";for(p=0,c=Math.pow(2,m),a=1;a!=c;)u=A.val&A.position,A.position>>=1,0==A.position&&(A.position=n,A.val=e(A.index++)),p|=(u>0?1:0)*a,a<<=1;switch(l=p){case 0:for(p=0,c=Math.pow(2,8),a=1;a!=c;)u=A.val&A.position,A.position>>=1,0==A.position&&(A.position=n,A.val=e(A.index++)),p|=(u>0?1:0)*a,a<<=1;f[d++]=r(p),l=d-1,h--;break;case 1:for(p=0,c=Math.pow(2,16),a=1;a!=c;)u=A.val&A.position,A.position>>=1,0==A.position&&(A.position=n,A.val=e(A.index++)),p|=(u>0?1:0)*a,a<<=1;f[d++]=r(p),l=d-1,h--;break;case 2:return w.join("")}if(0==h&&(h=Math.pow(2,m),m++),f[l])v=f[l];else{if(l!==d)return null;v=s+s.charAt(0)}w.push(v),f[d++]=s+v.charAt(0),h--,s=v,0==h&&(h=Math.pow(2,m),m++)}}};return i}();"function"==typeof define&&define.amd?define(function(){return LZString}):"undefined"!=typeof module&&null!=module&&(module.exports=LZString);
</script>
</body>
</html>