Hugging Face's logo

Spaces:
commit3r
/
temp
Running

App Files Community
commit3r commited on
Commit
61cb741
·
verified ·
1 Parent(s): c185c93

update it to use the same stun turn open server so anyone connected is connected to it - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +82 -167
index.html CHANGED
@@ -3,162 +3,40 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>RetroText Stream</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://unpkg.com/peerjs@1.4.7/dist/peerjs.min.js"></script>
9
  <style>
10
- @font-face {
11
- font-family: 'Chicago';
12
- src: url('https://cdn.jsdelivr.net/gh/eliheuer/chicago@master/chicago.woff2') format('woff2');
13
- }
14
-
15
  body {
16
- background: #C0C7C8 url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23a0a7a8' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M5 5h1v1H5V5zM0 0h1v1H0V0zm3 3h1v1H3V3z'/%3E%3C/g%3E%3C/svg%3E");
17
- font-family: 'Chicago', 'SF Mono', monospace;
18
- color: #000;
19
- }
20
-
21
- .mac-window {
22
- border: 2px solid;
23
- border-top-color: #fff;
24
- border-left-color: #fff;
25
- border-right-color: #808080;
26
- border-bottom-color: #808080;
27
- box-shadow: 2px 2px 0 #000;
28
- }
29
-
30
- .title-bar {
31
- background: linear-gradient(to right, #000080, #1084d0);
32
- color: white;
33
- letter-spacing: 0.5px;
34
- }
35
-
36
- .btn {
37
- border: 2px solid;
38
- border-top-color: #fff;
39
- border-left-color: #fff;
40
- border-right-color: #808080;
41
- border-bottom-color: #808080;
42
- background: #c0c0c0;
43
- box-shadow: inset -1px -1px 0 #000;
44
- }
45
-
46
- .btn:active {
47
- border-top-color: #808080;
48
- border-left-color: #808080;
49
- border-right-color: #fff;
50
- border-bottom-color: #fff;
51
- box-shadow: inset 1px 1px 0 #000;
52
- }
53
-
54
- .message-box {
55
- background: #fff;
56
- border: 2px solid;
57
- border-top-color: #808080;
58
- border-left-color: #808080;
59
- border-right-color: #fff;
60
- border-bottom-color: #fff;
61
- }
62
-
63
- .status-bar {
64
- background: #c0c0c0;
65
- border-top: 2px solid #808080;
66
- }
67
-
68
- .scrollbar::-webkit-scrollbar {
69
- width: 12px;
70
- }
71
-
72
- .scrollbar::-webkit-scrollbar-track {
73
- background: #c0c0c0;
74
- border-left: 2px solid #808080;
75
- }
76
-
77
- .scrollbar::-webkit-scrollbar-thumb {
78
- background: #808080;
79
- border: 2px solid #c0c0c0;
80
- border-top-color: #fff;
81
- border-left-color: #fff;
82
- border-right-color: #000;
83
- border-bottom-color: #000;
84
- }
85
-
86
- .terminal-text {
87
- font-family: 'Chicago', monospace;
88
- font-size: 14px;
89
- line-height: 1.4;
90
- color: #000;
91
- }
92
-
93
- .blink {
94
- animation: blink 1s infinite;
95
- }
96
-
97
- @keyframes blink {
98
- 50% { opacity: 0; }
99
- }
100
-
101
- .peer-id {
102
- background: #fff;
103
- border: 1px solid #808080;
104
- padding: 2px 4px;
105
- font-size: 12px;
106
- letter-spacing: 0.5px;
107
- }
108
-
109
- .input-field {
110
- background: #fff;
111
- border: 2px solid;
112
- border-top-color: #000;
113
- border-left-color: #000;
114
- border-right-color: #fff;
115
- border-bottom-color: #fff;
116
- font-family: 'Chicago', monospace;
117
- }
118
-
119
- .input-field:focus {
120
- outline: none;
121
- border: 2px solid #000080;
122
  }
123
  </style>
124
  </head>
125
- <body class="min-h-screen flex items-center justify-center p-4">
126
- <div class="mac-window w-full max-w-2xl">
127
- <!-- Title Bar -->
128
- <div class="title-bar flex items-center justify-between px-3 py-1">
129
- <div class="flex items-center">
130
- <div class="w-3 h-3 rounded-full bg-[#ff6057] mr-2"></div>
131
- <div class="w-3 h-3 rounded-full bg-[#ffbd2e] mr-2"></div>
132
- <div class="w-3 h-3 rounded-full bg-[#28c940] mr-2"></div>
133
- <h1 class="text-sm font-bold">RetroText Stream</h1>
134
- </div>
135
- <div class="text-xs">WebRTC Text Broadcast</div>
136
- </div>
137
-
138
- <!-- Main Content -->
139
- <div class="bg-[#c0c0c0] p-4">
140
-
141
- <!-- Message Display -->
142
- <div class="message-box mb-4 h-64 overflow-hidden">
143
- <div id="message-container" class="terminal-text p-3 h-full overflow-y-auto scrollbar">
144
- <div>> Simple Text Broadcast</div>
145
- <div>> Type messages below</div>
146
- </div>
147
- </div>
148
-
149
- <!-- Input Area -->
150
- <div class="flex">
151
- <input
152
- type="text"
153
- id="message-input"
154
- class="input-field flex-grow px-3 py-2 mr-2"
155
- placeholder="Type message here..."
156
- disabled
157
- >
158
- <button id="send-btn" class="btn px-4 py-2 font-bold" disabled>Send</button>
159
- </div>
160
- </div>
161
-
162
  </div>
163
 
164
  <script>
@@ -167,9 +45,50 @@
167
  const messageInput = document.getElementById('message-input');
168
  const sendBtn = document.getElementById('send-btn');
169
 
170
- // Enable input immediately
171
- messageInput.disabled = false;
172
- sendBtn.disabled = false;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
173
 
174
  function appendMessage(message) {
175
  const messageElement = document.createElement('div');
@@ -178,23 +97,19 @@
178
  messageContainer.scrollTop = messageContainer.scrollHeight;
179
  }
180
 
181
- sendBtn.addEventListener('click', () => {
182
- const message = messageInput.value.trim();
183
- if (message) {
184
- appendMessage(`YOU> ${message}`);
185
- messageInput.value = '';
186
- }
187
  });
188
 
189
- messageInput.addEventListener('keypress', (e) => {
190
- if (e.key === 'Enter') {
191
- const message = messageInput.value.trim();
192
- if (message) {
193
- appendMessage(`YOU> ${message}`);
194
- messageInput.value = '';
195
- }
196
  }
197
- });
198
  });
199
  </script>
200
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=commit3r/temp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Simple Chat</title>
 
7
  <script src="https://unpkg.com/peerjs@1.4.7/dist/peerjs.min.js"></script>
8
  <style>
 
 
 
 
 
9
  body {
10
+ font-family: monospace;
11
+ max-width: 600px;
12
+ margin: 0 auto;
13
+ padding: 20px;
14
+ }
15
+ #message-container {
16
+ height: 300px;
17
+ border: 1px solid #ccc;
18
+ padding: 10px;
19
+ overflow-y: auto;
20
+ margin-bottom: 10px;
21
+ }
22
+ #message-input {
23
+ width: 80%;
24
+ padding: 8px;
25
+ }
26
+ #send-btn {
27
+ width: 18%;
28
+ padding: 8px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  }
30
  </style>
31
  </head>
32
+ <body>
33
+ <h1>Simple Chat</h1>
34
+ <div id="message-container">
35
+ <div>Connecting to chat server...</div>
36
+ </div>
37
+ <div>
38
+ <input type="text" id="message-input" placeholder="Type message here...">
39
+ <button id="send-btn">Send</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40
  </div>
41
 
42
  <script>
 
45
  const messageInput = document.getElementById('message-input');
46
  const sendBtn = document.getElementById('send-btn');
47
 
48
+ // Configuration for public STUN/TURN servers
49
+ const peer = new Peer({
50
+ config: {
51
+ 'iceServers': [
52
+ { urls: 'stun:stun.l.google.com:19302' },
53
+ { urls: 'stun:global.stun.twilio.com:3478?transport=udp' },
54
+ {
55
+ urls: 'turn:numb.viagenie.ca',
56
+ username: 'webrtc@live.com',
57
+ credential: 'muazkh'
58
+ }
59
+ ]
60
+ }
61
+ });
62
+
63
+ let conn;
64
+ const roomId = 'simple-chat-room'; // Fixed room ID for everyone to connect to
65
+
66
+ peer.on('open', (id) => {
67
+ messageContainer.innerHTML = `<div>Connected to chat room. Your ID: ${id}</div>`;
68
+
69
+ // Connect to the fixed room
70
+ conn = peer.connect(roomId);
71
+
72
+ // Set up connection handlers
73
+ conn.on('open', () => {
74
+ appendMessage('Connected to chat room');
75
+ });
76
+
77
+ conn.on('data', (data) => {
78
+ appendMessage(data);
79
+ });
80
+
81
+ conn.on('close', () => {
82
+ appendMessage('Connection closed');
83
+ });
84
+ });
85
+
86
+ peer.on('connection', (connection) => {
87
+ conn = connection;
88
+ conn.on('data', (data) => {
89
+ appendMessage(data);
90
+ });
91
+ });
92
 
93
  function appendMessage(message) {
94
  const messageElement = document.createElement('div');
 
97
  messageContainer.scrollTop = messageContainer.scrollHeight;
98
  }
99
 
100
+ sendBtn.addEventListener('click', sendMessage);
101
+ messageInput.addEventListener('keypress', (e) => {
102
+ if (e.key === 'Enter') sendMessage();
 
 
 
103
  });
104
 
105
+ function sendMessage() {
106
+ const message = messageInput.value.trim();
107
+ if (message && conn && conn.open) {
108
+ conn.send(message);
109
+ appendMessage(`You: ${message}`);
110
+ messageInput.value = '';
 
111
  }
112
+ }
113
  });
114
  </script>
115
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=commit3r/temp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>