-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
177 lines (159 loc) · 7.79 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A one-to-one free to use ad-free web app to meet people around the world over p2p technology.">
<meta name="google-site-verification" content="vO1OkG1HXZbDIOMUHe7mq72wSzhtR3OdWam2PCfna10" />
<title>Pico Meet</title>
<!-- g font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mukta&display=swap" rel="stylesheet">
<!-- local styles -->
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<link rel="manifest" href="manifest.webmanifest">
<!-- ios support -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="/img/apple-touch-icon-180x180.png">
<meta name="apple-mobile-web-app-status-bar" content="#FFE1C4">
<meta name="theme-color" content="#FFE1C4">
</head>
<body>
<!-- toast block -->
<div id="toast"></div>
<!-- setup block -->
<div class="setup">
<!-- header -->
<header>
<h1>Pico Meet</h1>
<h2>meet over p2p</h2>
</header>
<!-- fab btn -->
<div class="fab" id="fab">
<div class="fab_elms">
<button class="fab_elm" onclick="openTab('collect_detail')">SETUP YOUR DETAILS</button>
<button class="fab_elm" onclick="openTab('peer_explorer')">EXPLORE PEERS</button>
<button class="fab_elm" onclick="toRoot()">HOME SCREEN</button>
<button class="fab_elm" onclick="invite()">INVITE SOMEONE</button>
<button class="fab_elm" onclick="toast.clearAllErrors()">CLEAR ALL ERRORS</button>
<button class="fab_elm" onclick="toggleFullScreen()">TOGGLE FULLSCREEN</button>
</div>
<button class="fab_switcher" onclick="fab()">💣</button>
</div>
<!-- root wrapper -->
<div class="wrap">
<!-- connection info -->
<div class="model peer_info">
<h2>Your Peer Connection</h2>
<p>Connection Status: <span class="connected" style="color: yellow;">...wait</span></p>
<p>Connection ID: <span class="with_id" style="color: yellow;">unknown</span></p>
<p>If not connected try reloading the page</p>
<p>You must exit incognito</p>
<button onclick="if(!PeerConnection.open){connectToPeerServer()}" id="force_connect" style="display: none;">TRY CONNECT TO PEER SERVER</button>
</div>
<!-- create or join -->
<div class="model peer_caller" id="entry-modal">
<h2>Call Someone</h2>
<form onsubmit="joinPeer(this.room_input.value, event)" class="peer_caller_wrap">
<label for="room_input">Enter Peer Id</label>
<input id="room_input" class="room-input" placeholder="Enter Peer ID" required autocomplete="off">
<button type="submit" id="entry_m_btn">TRY CALLING</button>
</form>
</div>
<!-- ads -->
<div class="ads">
<div class="ad" onclick="toast.log('Feature not yet implimented.')">
<img src="/ads/ad.jpg" alt="advertisment">
<p>ADs comes with a description.</p>
</div>
</div>
</div>
<!-- custome tabs / fab tabs -->
<!-- details collector -->
<div class="ct" id="collect_detail">
<h2>Set Details</h2>
<div class="ct_wrap">
<form onsubmit="setDetails(event, this)" id="setDetailForm">
<p>All the data you enter below will be available on public database.</p>
<p>
The ID must start and end with an alphanumeric character
(lower or upper case character or a digit).
In the middle dashes (-) and underscores (_) are allowed.
</p>
<label for="peer">Preferred Peer Id</label>
<input type="text" name="peer" id="peer" pattern="^[a-zA-Z0-9_-]+$" title="Blank space not allowed" required placeholder="Alpha numeric value except spaces." autocomplete="off">
<label for="name">Name</label>
<input type="text" name="name" id="name" required placeholder="Your nice name goes here" autocomplete="off">
<label for="bio">Bio</label>
<input type="text" name="bio" id="bio" required placeholder="Your priffered languages fits well" autocomplete="off">
<button type="submit" style="padding: 10px;">Set Details</button>
</form>
</div>
<p style="padding: 10px; color: aqua; background-color: black; margin: 20px 0 100px 0; border-radius: 10px;" onclick="location.href = '/about.html'">
If you are new here, see:
<span style="color: yellow; text-transform: uppercase;"> how to use pico meet </span>
to take controle of this wierd UI.
</p>
</div>
<!-- peer explorer -->
<div class="ct peer_explorer" id="peer_explorer">
<h2>Explore Peers</h2>
<ul class="peer_explorer_wrap" id="explore">
<button onclick="listenToActivePeers(this)" style="padding: 10px;">Watch on DataBase</button>
</ul>
</div>
<!-- freezeer -->
<div id="freez_time">
<p id="pass_time"></p>
</div>
</div>
<!-- facetime block -->
<div class="facetime">
<!-- Remote Video Element-->
<video id="remote-video"></video>
<!-- Local Video Element-->
<video id="local-video"></video>
<!-- call controls -->
<div class="call_controls">
<div class="v_control_wrap">
<button onclick="toggleVid()" class="vid_toggler">📌 SELF VIDEO</button>
<button onclick="toggleFullScreen()">💢 FULLSCREEN</button>
<button onclick="endCall()">📞 END CALL</button>
</div>
<button class="controll_toggler" onclick="vidControl(this)">⚙ CONTROLS</button>
</div>
</div>
</body>
<!-- peerjs & adaptor -->
<script src="/js/peer.js"></script>
<!-- <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script> -->
<!-- firebase -->
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-firestore.js"></script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyAeicVS-SyzzDD8vxKnPDkBf_SRpUMs7q8",
authDomain: "pico-meet.firebaseapp.com",
databaseURL: "https://pico-meet-default-rtdb.asia-southeast1.firebasedatabase.app",
projectId: "pico-meet",
storageBucket: "pico-meet.appspot.com",
messagingSenderId: "864476937589",
appId: "1:864476937589:web:708254489c7003f5fa273c"
};
firebase.initializeApp(firebaseConfig);
DB = firebase.firestore();
const ACTIVE_PEERS = DB.collection('active-peers');
</script>
<!-- local script -->
<script src="/js/app.js"></script>
<!-- sw reg -->
<script>
if('serviceWorker' in navigator){
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('service worker registered'))
.catch(err => console.log('service worker not registered', err));
};
</script>
</html>