Hugging Face's logo

Spaces:
Adamchab
/
live
Running

App Files Community
Adamchab commited on
Commit
8fd4798
·
verified ·
1 Parent(s): 4aa8c7a

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +535 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Live
3
- emoji: 🔥
4
- colorFrom: red
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: live
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,535 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Live Vidéo - Système de Partage</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .video-box {
11
+ aspect-ratio: 16/9;
12
+ }
13
+
14
+ video {
15
+ background-color: #222;
16
+ }
17
+
18
+ .username {
19
+ background-color: rgba(0, 0, 0, 0.5);
20
+ }
21
+
22
+ .status-indicator {
23
+ width: 10px;
24
+ height: 10px;
25
+ }
26
+
27
+ .modal {
28
+ background-color: rgba(0, 0, 0, 0.5);
29
+ }
30
+
31
+ @keyframes fadeIn {
32
+ from { opacity: 0; transform: translateY(-20px); }
33
+ to { opacity: 1; transform: translateY(0); }
34
+ }
35
+
36
+ .animate-fade-in {
37
+ animation: fadeIn 0.3s ease-out forwards;
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="bg-gray-100 font-sans antialiased">
42
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
43
+ <div class="text-center mb-10">
44
+ <h1 class="text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
45
+ <i class="fas fa-video mr-2"></i>Plateforme de Live Vidéo
46
+ </h1>
47
+ <p class="text-gray-600 mt-2">Connectez-vous et partagez des moments en direct</p>
48
+ </div>
49
+
50
+ <div class="space-y-6">
51
+ <!-- Login Section -->
52
+ <div id="login-section" class="bg-white rounded-xl shadow-lg p-6">
53
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
54
+ <i class="fas fa-door-open text-blue-500 mr-2"></i>Rejoindre ou créer un live
55
+ </h2>
56
+
57
+ <div class="space-y-4">
58
+ <div>
59
+ <label for="username" class="block text-sm font-medium text-gray-700 mb-1">
60
+ <i class="fas fa-user text-blue-500 mr-1"></i>Votre nom
61
+ </label>
62
+ <input type="text" id="username" placeholder="Entrez votre nom" required
63
+ class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
64
+ </div>
65
+
66
+ <div>
67
+ <label for="room-code" class="block text-sm font-medium text-gray-700 mb-1">
68
+ <i class="fas fa-key text-blue-500 mr-1"></i>Code de la salle
69
+ </label>
70
+ <div class="flex space-x-2">
71
+ <input type="text" id="room-code" placeholder="Entrez le code de la salle" value="a234"
72
+ class="flex-1 px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
73
+ <button id="join-btn" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center">
74
+ <i class="fas fa-sign-in-alt mr-2"></i>Rejoindre
75
+ </button>
76
+ </div>
77
+ </div>
78
+
79
+ <div class="pt-2">
80
+ <button id="create-btn" class="w-full px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition flex items-center justify-center">
81
+ <i class="fas fa-plus-circle mr-2"></i>Créer un nouveau live
82
+ </button>
83
+ </div>
84
+ </div>
85
+ </div>
86
+
87
+ <!-- Video Section (hidden initially) -->
88
+ <div id="video-section" class="hidden bg-white rounded-xl shadow-lg p-6">
89
+ <div class="flex justify-between items-center mb-6">
90
+ <h2 class="text-2xl font-semibold text-gray-800 flex items-center">
91
+ <i class="fas fa-video text-blue-500 mr-2"></i>
92
+ Live en cours: <span id="room-display" class="ml-2 bg-blue-100 text-blue-800 px-3 py-1 rounded-full">a234</span>
93
+ </h2>
94
+ <div id="participant-count" class="flex items-center text-gray-600">
95
+ <i class="fas fa-users mr-2"></i>
96
+ <span>1 participant</span>
97
+ </div>
98
+ </div>
99
+
100
+ <!-- Video Grid -->
101
+ <div id="videos" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
102
+ <div class="video-box relative rounded-xl overflow-hidden">
103
+ <video id="local-video" autoplay muted playsinline class="w-full h-full object-cover"></video>
104
+ <div class="username absolute bottom-3 left-3 text-white px-3 py-1 rounded-lg text-sm">
105
+ <i class="fas fa-user-circle mr-1"></i>Vous
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Controls - Modifié pour un meilleur alignement -->
111
+ <div class="mt-6 flex flex-wrap gap-3 justify-between items-center">
112
+ <div class="flex flex-wrap gap-3">
113
+ <button id="toggle-video" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center">
114
+ <i class="fas fa-video mr-2"></i>Désactiver vidéo
115
+ </button>
116
+ <button id="toggle-audio" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center">
117
+ <i class="fas fa-microphone mr-2"></i>Désactiver audio
118
+ </button>
119
+ <button id="share-screen" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition flex items-center">
120
+ <i class="fas fa-desktop mr-2"></i>Partager écran
121
+ </button>
122
+ </div>
123
+ <button id="leave-btn" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition flex items-center">
124
+ <i class="fas fa-sign-out-alt mr-2"></i>Quitter
125
+ </button>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Host Controls (hidden initially) -->
130
+ <div id="host-controls" class="hidden bg-white rounded-xl shadow-lg p-6">
131
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
132
+ <i class="fas fa-cogs text-purple-500 mr-2"></i>Contrôles du live
133
+ </h2>
134
+
135
+ <div class="space-y-6">
136
+ <div>
137
+ <h3 class="text-lg font-medium text-gray-700 mb-2 flex items-center">
138
+ <i class="fas fa-link text-blue-500 mr-2"></i>Lien d'invitation
139
+ </h3>
140
+ <div class="flex">
141
+ <input type="text" id="invite-link" readonly
142
+ class="flex-1 px-4 py-3 rounded-l-lg border border-gray-300 bg-gray-50">
143
+ <button id="copy-btn" class="px-4 py-3 bg-blue-600 text-white rounded-r-lg hover:bg-blue-700 transition flex items-center">
144
+ <i class="fas fa-copy mr-2"></i>Copier
145
+ </button>
146
+ </div>
147
+ </div>
148
+
149
+ <div>
150
+ <h3 class="text-lg font-medium text-gray-700 mb-2 flex items-center">
151
+ <i class="fas fa-users text-purple-500 mr-2"></i>Participants
152
+ </h3>
153
+ <div id="participant-list" class="bg-gray-50 rounded-lg p-4 max-h-60 overflow-y-auto space-y-2">
154
+ <div class="flex items-center p-2 bg-white rounded-lg shadow-sm">
155
+ <span class="status-indicator rounded-full bg-blue-500 mr-3"></span>
156
+ <span>Vous (hôte)</span>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Create Room Modal -->
166
+ <div id="create-room-modal" class="modal hidden fixed inset-0 flex items-center justify-center z-50">
167
+ <div class="bg-white rounded-xl shadow-2xl p-6 w-full max-w-md animate-fade-in">
168
+ <div class="flex justify-between items-center mb-4">
169
+ <h3 class="text-xl font-semibold text-gray-800 flex items-center">
170
+ <i class="fas fa-plus-circle text-purple-500 mr-2"></i>Créer un nouveau live
171
+ </h3>
172
+ <button class="close text-gray-500 hover:text-gray-700 text-2xl">
173
+ <i class="fas fa-times"></i>
174
+ </button>
175
+ </div>
176
+
177
+ <p class="text-gray-600 mb-4">
178
+ Choisissez un code pour votre salle (ou laissez vide pour un code généré automatiquement)
179
+ </p>
180
+
181
+ <div class="mb-6">
182
+ <input type="text" id="new-room-code" placeholder="Code de la salle (optionnel)"
183
+ class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition">
184
+ </div>
185
+
186
+ <button id="confirm-create" class="w-full px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition flex items-center justify-center">
187
+ <i class="fas fa-check-circle mr-2"></i>Créer et rejoindre
188
+ </button>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Notification Modal -->
193
+ <div id="notification-modal" class="modal hidden fixed inset-0 flex items-center justify-center z-50">
194
+ <div class="bg-white rounded-xl shadow-2xl p-6 w-full max-w-md animate-fade-in">
195
+ <div class="flex justify-between items-center mb-4">
196
+ <h3 id="notification-title" class="text-xl font-semibold text-gray-800 flex items-center">
197
+ <i class="fas fa-bell text-blue-500 mr-2"></i>Notification
198
+ </h3>
199
+ <button class="close text-gray-500 hover:text-gray-700 text-2xl">
200
+ <i class="fas fa-times"></i>
201
+ </button>
202
+ </div>
203
+
204
+ <p id="notification-message" class="text-gray-600 mb-6">
205
+ Message de notification ici.
206
+ </p>
207
+
208
+ <div class="text-center">
209
+ <button id="notification-confirm" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
210
+ OK
211
+ </button>
212
+ </div>
213
+ </div>
214
+ </div>
215
+
216
+ <!-- Success Toast -->
217
+ <div id="toast" class="hidden fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg flex items-center">
218
+ <i class="fas fa-check-circle mr-2"></i>
219
+ <span id="toast-message">Action réussie!</span>
220
+ </div>
221
+
222
+ <script>
223
+ // Variables globales
224
+ let localStream = null;
225
+ let peers = {};
226
+ let isHost = false;
227
+ let roomCode = "a234";
228
+ let username = "";
229
+ let videoEnabled = true;
230
+ let audioEnabled = true;
231
+ let screenShareStream = null;
232
+
233
+ // Éléments DOM
234
+ const loginSection = document.getElementById('login-section');
235
+ const videoSection = document.getElementById('video-section');
236
+ const hostControls = document.getElementById('host-controls');
237
+ const usernameInput = document.getElementById('username');
238
+ const roomCodeInput = document.getElementById('room-code');
239
+ const joinBtn = document.getElementById('join-btn');
240
+ const createBtn = document.getElementById('create-btn');
241
+ const roomDisplay = document.getElementById('room-display');
242
+ const toggleVideoBtn = document.getElementById('toggle-video');
243
+ const toggleAudioBtn = document.getElementById('toggle-audio');
244
+ const shareScreenBtn = document.getElementById('share-screen');
245
+ const leaveBtn = document.getElementById('leave-btn');
246
+ const inviteLink = document.getElementById('invite-link');
247
+ const copyBtn = document.getElementById('copy-btn');
248
+ const participantCount = document.getElementById('participant-count');
249
+ const participantList = document.getElementById('participant-list');
250
+ const createRoomModal = document.getElementById('create-room-modal');
251
+ const newRoomCodeInput = document.getElementById('new-room-code');
252
+ const confirmCreateBtn = document.getElementById('confirm-create');
253
+ const notificationModal = document.getElementById('notification-modal');
254
+ const notificationTitle = document.getElementById('notification-title');
255
+ const notificationMessage = document.getElementById('notification-message');
256
+ const notificationConfirm = document.getElementById('notification-confirm');
257
+ const localVideo = document.getElementById('local-video');
258
+ const videosContainer = document.getElementById('videos');
259
+ const toast = document.getElementById('toast');
260
+ const toastMessage = document.getElementById('toast-message');
261
+
262
+ // Fonction pour générer un code de salle aléatoire
263
+ function generateRoomCode() {
264
+ return Math.random().toString(36).substring(2, 6).toUpperCase();
265
+ }
266
+
267
+ // Afficher une notification
268
+ function showNotification(title, message) {
269
+ notificationTitle.textContent = title;
270
+ notificationMessage.textContent = message;
271
+ notificationModal.classList.remove('hidden');
272
+ }
273
+
274
+ // Afficher un toast
275
+ function showToast(message, isSuccess = true) {
276
+ toastMessage.textContent = message;
277
+ toast.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg flex items-center animate-fade-in ${isSuccess ? 'bg-green-500' : 'bg-red-500'} text-white`;
278
+ toast.classList.remove('hidden');
279
+
280
+ setTimeout(() => {
281
+ toast.classList.add('hidden');
282
+ }, 3000);
283
+ }
284
+
285
+ // Simuler la connexion à une salle
286
+ async function joinRoom(code) {
287
+ if (!username) {
288
+ showNotification("Erreur", "Veuillez entrer votre nom pour rejoindre.");
289
+ return;
290
+ }
291
+
292
+ if (!code) {
293
+ showNotification("Erreur", "Veuillez entrer un code de salle.");
294
+ return;
295
+ }
296
+
297
+ roomCode = code.toUpperCase();
298
+
299
+ try {
300
+ // Simuler l'accès à la caméra/micro
301
+ localStream = await navigator.mediaDevices.getUserMedia({
302
+ video: true,
303
+ audio: true
304
+ });
305
+
306
+ localVideo.srcObject = localStream;
307
+ loginSection.classList.add('hidden');
308
+ videoSection.classList.remove('hidden');
309
+
310
+ if (isHost) {
311
+ hostControls.classList.remove('hidden');
312
+ const currentUrl = window.location.href.split('?')[0];
313
+ inviteLink.value = `${currentUrl}?room=${roomCode}`;
314
+ }
315
+
316
+ roomDisplay.textContent = roomCode;
317
+
318
+ showToast(`Vous avez rejoint la salle ${roomCode}`, true);
319
+
320
+ // Simuler l'ajout d'un participant
321
+ setTimeout(() => {
322
+ const videoBox = document.createElement('div');
323
+ videoBox.className = 'video-box relative rounded-xl overflow-hidden';
324
+ videoBox.id = 'video-container-demo-peer';
325
+
326
+ const video = document.createElement('video');
327
+ video.id = 'video-demo-peer';
328
+ video.autoplay = true;
329
+ video.playsinline = true;
330
+ video.className = 'w-full h-full object-cover';
331
+
332
+ // Simuler une vidéo de test
333
+ video.srcObject = new MediaStream([localStream.getVideoTracks()[0].clone()]);
334
+
335
+ const usernameDiv = document.createElement('div');
336
+ usernameDiv.className = 'username absolute bottom-3 left-3 text-white px-3 py-1 rounded-lg text-sm';
337
+ usernameDiv.innerHTML = '<i class="fas fa-user-circle mr-1"></i>Participant Test';
338
+ videoBox.appendChild(usernameDiv);
339
+ videoBox.appendChild(video);
340
+ videosContainer.appendChild(videoBox);
341
+
342
+ // Mettre à jour le compteur
343
+ participantCount.innerHTML = '<i class="fas fa-users mr-2"></i>2 participants';
344
+
345
+ // Ajouter à la liste des participants
346
+ const participantItem = document.createElement('div');
347
+ participantItem.className = 'flex items-center p-2 bg-white rounded-lg shadow-sm';
348
+ participantItem.innerHTML = `
349
+ <span class="status-indicator rounded-full bg-green-500 mr-3"></span>
350
+ Participant Test
351
+ `;
352
+ participantList.appendChild(participantItem);
353
+ }, 2000);
354
+
355
+ } catch (error) {
356
+ console.error("Erreur simulation:", error);
357
+ showNotification("Erreur", "Impossible d'accéder à la caméra ou au microphone. Veuillez vérifier vos autorisations.");
358
+ }
359
+ }
360
+
361
+ // Quitter la salle
362
+ function leaveRoom() {
363
+ if (localStream) {
364
+ localStream.getTracks().forEach(track => track.stop());
365
+ }
366
+
367
+ if (screenShareStream) {
368
+ screenShareStream.getTracks().forEach(track => track.stop());
369
+ }
370
+
371
+ // Supprimer les vidéos des autres participants
372
+ const videos = document.querySelectorAll('.video-box:not(:first-child)');
373
+ videos.forEach(video => video.remove());
374
+
375
+ // Réinitialiser
376
+ localVideo.srcObject = null;
377
+ videoSection.classList.add('hidden');
378
+ hostControls.classList.add('hidden');
379
+ loginSection.classList.remove('hidden');
380
+
381
+ showToast("Vous avez quitté la salle", true);
382
+ }
383
+
384
+ // Fonction pour partager l'écran
385
+ async function shareScreen() {
386
+ try {
387
+ // Désactiver le partage d'écran si déjà actif
388
+ if (screenShareStream) {
389
+ stopScreenSharing();
390
+ return;
391
+ }
392
+
393
+ // Obtenir le flux de partage d'écran
394
+ screenShareStream = await navigator.mediaDevices.getDisplayMedia({
395
+ video: {
396
+ cursor: "always",
397
+ displaySurface: "monitor"
398
+ },
399
+ audio: false
400
+ });
401
+
402
+ // Remplacer la vidéo locale par le partage d'écran
403
+ localVideo.srcObject = screenShareStream;
404
+ shareScreenBtn.innerHTML = '<i class="fas fa-stop-circle mr-2"></i>Arrêter le partage';
405
+ showToast("Partage d'écran activé", true);
406
+
407
+ // Gérer la fin du partage d'écran
408
+ screenShareStream.getVideoTracks()[0].onended = () => {
409
+ stopScreenSharing();
410
+ };
411
+
412
+ } catch (error) {
413
+ console.error("Erreur partage écran:", error);
414
+ if (error.name !== 'NotAllowedError') {
415
+ showNotification("Erreur", "Impossible de partager l'écran.");
416
+ }
417
+ }
418
+ }
419
+
420
+ function stopScreenSharing() {
421
+ if (screenShareStream) {
422
+ screenShareStream.getTracks().forEach(track => track.stop());
423
+ localVideo.srcObject = localStream;
424
+ screenShareStream = null;
425
+ shareScreenBtn.innerHTML = '<i class="fas fa-desktop mr-2"></i>Partager écran';
426
+ showToast("Partage d'écran arrêté", true);
427
+ }
428
+ }
429
+
430
+ // Événements
431
+ joinBtn.addEventListener('click', () => {
432
+ username = usernameInput.value.trim();
433
+ const code = roomCodeInput.value.trim().toUpperCase();
434
+
435
+ if (username && code) {
436
+ isHost = false;
437
+ joinRoom(code);
438
+ } else {
439
+ showNotification("Informations manquantes", "Veuillez entrer votre nom et le code de la salle.");
440
+ }
441
+ });
442
+
443
+ createBtn.addEventListener('click', () => {
444
+ username = usernameInput.value.trim();
445
+
446
+ if (username) {
447
+ isHost = true;
448
+ createRoomModal.classList.remove('hidden');
449
+ } else {
450
+ showNotification("Nom manquant", "Veuillez entrer votre nom pour créer une salle.");
451
+ }
452
+ });
453
+
454
+ confirmCreateBtn.addEventListener('click', () => {
455
+ const customCode = newRoomCodeInput.value.trim().toUpperCase();
456
+ const code = customCode || generateRoomCode();
457
+
458
+ createRoomModal.classList.add('hidden');
459
+ joinRoom(code);
460
+ });
461
+
462
+ toggleVideoBtn.addEventListener('click', () => {
463
+ if (localStream) {
464
+ const videoTracks = localStream.getVideoTracks();
465
+ videoTracks.forEach(track => {
466
+ track.enabled = !track.enabled;
467
+ });
468
+
469
+ videoEnabled = videoTracks[0]?.enabled || false;
470
+ toggleVideoBtn.innerHTML = videoEnabled
471
+ ? '<i class="fas fa-video mr-2"></i>Désactiver vidéo'
472
+ : '<i class="fas fa-video-slash mr-2"></i>Activer vidéo';
473
+
474
+ showToast(`Vidéo ${videoEnabled ? 'activée' : 'désactivée'}`, true);
475
+ }
476
+ });
477
+
478
+ toggleAudioBtn.addEventListener('click', () => {
479
+ if (localStream) {
480
+ const audioTracks = localStream.getAudioTracks();
481
+ audioTracks.forEach(track => {
482
+ track.enabled = !track.enabled;
483
+ });
484
+
485
+ audioEnabled = audioTracks[0]?.enabled || false;
486
+ toggleAudioBtn.innerHTML = audioEnabled
487
+ ? '<i class="fas fa-microphone mr-2"></i>Désactiver audio'
488
+ : '<i class="fas fa-microphone-slash mr-2"></i>Activer audio';
489
+
490
+ showToast(`Audio ${audioEnabled ? 'activé' : 'désactivé'}`, true);
491
+ }
492
+ });
493
+
494
+ shareScreenBtn.addEventListener('click', shareScreen);
495
+
496
+ leaveBtn.addEventListener('click', () => {
497
+ leaveRoom();
498
+ });
499
+
500
+ copyBtn.addEventListener('click', () => {
501
+ inviteLink.select();
502
+ document.execCommand('copy');
503
+ copyBtn.innerHTML = '<i class="fas fa-check mr-2"></i>Copié !';
504
+ showToast("Lien copié dans le presse-papier", true);
505
+
506
+ setTimeout(() => {
507
+ copyBtn.innerHTML = '<i class="fas fa-copy mr-2"></i>Copier';
508
+ }, 2000);
509
+ });
510
+
511
+ // Fermer les modales
512
+ document.querySelectorAll('.close').forEach(closeBtn => {
513
+ closeBtn.addEventListener('click', () => {
514
+ createRoomModal.classList.add('hidden');
515
+ notificationModal.classList.add('hidden');
516
+ });
517
+ });
518
+
519
+ notificationConfirm.addEventListener('click', () => {
520
+ notificationModal.classList.add('hidden');
521
+ });
522
+
523
+ // Vérifier s'il y a un code de salle dans l'URL
524
+ window.addEventListener('load', () => {
525
+ const urlParams = new URLSearchParams(window.location.search);
526
+ const roomParam = urlParams.get('room');
527
+
528
+ if (roomParam) {
529
+ roomCodeInput.value = roomParam;
530
+ usernameInput.focus();
531
+ }
532
+ });
533
+ </script>
534
+ <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=Adamchab/live" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
535
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Live Vidéo - Système de Partage</title> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } .header { text-align: center; margin-bottom: 30px; } .main-content { display: flex; flex-direction: column; gap: 20px; } .login-section, .video-section, .control-section { background-color: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .video-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin-top: 20px; } .video-box { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 16/9; } video { width: 100%; height: 100%; object-fit: cover; background-color: #222; } .username { position: absolute; bottom: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.5); color: white; padding: 5px 10px; border-radius: 4px; font-size: 14px; } .input-group { display: flex; margin-bottom: 15px; } input { flex-grow: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } button { padding: 10px 20px; background-color: #4285f4; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } button:hover { background-color: #3367d6; } .controls { display: flex; gap: 10px; margin-top: 15px; } .btn-danger { background-color: #ea4335; } .btn-danger:hover { background-color: #d33426; } .copy-link { display: flex; margin-top: 15px; background-color: #f8f9fa; padding: 10px; border-radius: 4px; align-items: center; } .copy-link input { margin-right: 10px; } .participants { margin-top: 15px; } .participant-list { max-height: 200px; overflow-y: auto; } .status-indicator { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; } .status-online { background-color: #34a853; } .status-offline { background-color: #ea4335; } .hidden { display: none; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; } .modal-content { background-color: white; padding: 30px; border-radius: 8px; max-width: 500px; width: 100%; } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .close { cursor: pointer; font-size: 24px; } .text-center { text-align: center; } .text-success { color: #34a853; } </style> </head> <body> <div class="container"> <div class="header"> <h1>Plateforme de Live Vidéo</h1> </div> <div class="main-content"> <!-- Section de connexion --> <div class="login-section" id="login-section"> <h2>Rejoindre ou créer un live</h2> <div class="input-group"> <input type="text" id="username" placeholder="Votre nom" required> </div> <div class="input-group"> <input type="text" id="room-code" placeholder="Code de la salle"> <button id="join-btn" style="margin-left: 10px;">Rejoindre</button> </div> <div> <button id="create-btn">Créer un nouveau live</button> </div> </div> <!-- Section vidéo - cachée au départ --> <div class="video-section hidden" id="video-section"> <h2>Live en cours: <span id="room-display"></span></h2> <div class="video-container" id="videos"> <div class="video-box"> <video id="local-video" autoplay muted playsinline></video> <div class="username">Vous</div> </div> </div> <div class="controls"> <button id="toggle-video">Désactiver vidéo</button> <button id="toggle-audio">Désactiver audio</button> <button id="share-screen">Partager écran</button> <button class="btn-danger" id="leave-btn">Quitter</button> </div> </div> <!-- Section contrôle (uniquement pour le créateur) --> <div class="control-section hidden" id="host-controls"> <h2>Contrôles du live</h2> <div class="copy-link"> <input type="text" id="invite-link" readonly> <button id="copy-btn">Copier le lien</button> </div> <div class="participants"> <h3>Participants (<span id="participant-count">1</span>)</h3> <div class="participant-list" id="participant-list"> <!-- Les participants seront ajoutés ici dynamiquement --> </div> </div> </div> </div> </div> <!-- Modales --> <div id="create-room-modal" class="modal hidden"> <div class="modal-content"> <div class="modal-header"> <h2>Créer un nouveau live</h2> <span class="close">&times;</span> </div> <p>Choisissez un code pour votre salle (ou laissez vide pour un code généré automatiquement)</p> <div class="input-group"> <input type="text" id="new-room-code" placeholder="Code de la salle (optionnel)"> </div> <button id="confirm-create">Créer et rejoindre</button> </div> </div> <div id="notification-modal" class="modal hidden"> <div class="modal-content"> <div class="modal-header"> <h2 id="notification-title">Notification</h2> <span class="close">&times;</span> </div> <p id="notification-message"></p> <div class="text-center"> <button id="notification-confirm">OK</button> </div> </div> </div> <!-- Inclusion de Firebase et PeerJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/9.17.1/firebase-app-compat.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/9.17.1/firebase-database-compat.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/1.4.7/peerjs.min.js"></script> <script> // Configuration de Firebase - À REMPLACER PAR VOS PROPRES IDENTIFIANTS const firebaseConfig = { apiKey: "VOTRE_API_KEY", authDomain: "VOTRE_AUTH_DOMAIN", databaseURL: "VOTRE_DATABASE_URL", projectId: "VOTRE_PROJECT_ID", storageBucket: "VOTRE_STORAGE_BUCKET", messagingSenderId: "VOTRE_MESSAGING_SENDER_ID", appId: "VOTRE_APP_ID" }; // Initialisation de Firebase firebase.initializeApp(firebaseConfig); const database = firebase.database(); // Variables globales let localStream = null; let peers = {}; let isHost = false; let roomCode = ""; let username = ""; let myPeer = null; let videoEnabled = true; let audioEnabled = true; let screenShareStream = null; // Éléments DOM const loginSection = document.getElementById('login-section'); const videoSection = document.getElementById('video-section'); const hostControls = document.getElementById('host-controls'); const usernameInput = document.getElementById('username'); const roomCodeInput = document.getElementById('room-code'); const joinBtn = document.getElementById('join-btn'); const createBtn = document.getElementById('create-btn'); const roomDisplay = document.getElementById('room-display'); const toggleVideoBtn = document.getElementById('toggle-video'); const toggleAudioBtn = document.getElementById('toggle-audio'); const shareScreenBtn = document.getElementById('share-screen'); const leaveBtn = document.getElementById('leave-btn'); const inviteLink = document.getElementById('invite-link'); const copyBtn = document.getElementById('copy-btn'); const participantCount = document.getElementById('participant-count'); const participantList = document.getElementById('participant-list'); const createRoomModal = document.getElementById('create-room-modal'); const newRoomCodeInput = document.getElementById('new-room-code'); const confirmCreateBtn = document.getElementById('confirm-create'); const notificationModal = document.getElementById('notification-modal'); const notificationTitle = document.getElementById('notification-title'); const notificationMessage = document.getElementById('notification-message'); const notificationConfirm = document.getElementById('notification-confirm'); const localVideo = document.getElementById('local-video'); const videosContainer = document.getElementById('videos'); // Fonction pour générer un code de salle aléatoire function generateRoomCode() { return Math.random().toString(36).substring(2, 8).toUpperCase(); } // Afficher une notification function showNotification(title, message) { notificationTitle.textContent = title; notificationMessage.textContent = message; notificationModal.classList.remove('hidden'); } // Rejoindre une salle async function joinRoom(code) { if (!username) { showNotification("Erreur", "Veuillez entrer votre nom pour rejoindre."); return; } if (!code) { showNotification("Erreur", "Veuillez entrer un code de salle."); return; } roomCode = code.toUpperCase(); // Vérifier si la salle existe const roomRef = database.ref(`rooms/${roomCode}`); const snapshot = await roomRef.once('value'); if (!snapshot.exists() && !isHost) { showNotification("Erreur", "Cette salle n'existe pas. Veuillez vérifier le code."); return; } // Initialiser le flux vidéo local try { localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }); // Afficher la vidéo locale localVideo.srcObject = localStream; // Masquer la section de connexion et afficher la section vidéo loginSection.classList.add('hidden'); videoSection.classList.remove('hidden'); if (isHost) { hostControls.classList.remove('hidden'); // Créer la salle dans Firebase await roomRef.set({ host: username, created: firebase.database.ServerValue.TIMESTAMP }); // Générer le lien d'invitation const currentUrl = window.location.href.split('?')[0]; inviteLink.value = `${currentUrl}?room=${roomCode}`; } // Mettre à jour l'affichage du code de salle roomDisplay.textContent = roomCode; // Initialiser PeerJS initializePeerConnection(); // S'inscrire comme participant const participantRef = database.ref(`rooms/${roomCode}/participants/${myPeer.id}`); participantRef.set({ username: username, joined: firebase.database.ServerValue.TIMESTAMP }); // Supprimer le participant lorsqu'il se déconnecte participantRef.onDisconnect().remove(); // Si c'est l'hôte, supprimer la salle lorsqu'il se déconnecte if (isHost) { roomRef.onDisconnect().remove(); } // Écouter les participants listenForParticipants(); } catch (error) { console.error("Erreur lors de l'accès à la caméra et au micro:", error); showNotification("Erreur", "Impossible d'accéder à la caméra ou au microphone. Veuillez vérifier vos autorisations."); } } // Initialiser la connexion PeerJS function initializePeerConnection() { // Générer un ID unique pour ce peer const peerId = `${roomCode}-${Date.now()}-${Math.random().toString(36).substring(2, 10)}`; myPeer = new Peer(peerId, { debug: 3 }); myPeer.on('open', (id) => { console.log('Mon ID PeerJS:', id); }); // Gérer les appels entrants myPeer.on('call', (call) => { // Répondre avec notre flux vidéo call.answer(localStream); // Ajouter la vidéo distante à notre interface call.on('stream', (remoteStream) => { addVideoStream(call.peer, remoteStream); }); // Gérer la déconnexion call.on('close', () => { removeVideoStream(call.peer); }); // Stocker l'appel peers[call.peer] = call; }); myPeer.on('error', (err) => { console.error('Erreur PeerJS:', err); showNotification("Erreur de connexion", `Une erreur s'est produite: ${err.message}`); }); } // Appeler un nouveau participant function connectToNewUser(userId, stream) { const call = myPeer.call(userId, stream); call.on('stream', (remoteStream) => { addVideoStream(userId, remoteStream); }); call.on('close', () => { removeVideoStream(userId); }); peers[userId] = call; } // Ajouter un flux vidéo à l'interface function addVideoStream(userId, stream) { // Vérifier si ce flux existe déjà if (document.getElementById(`video-${userId}`)) { return; } // Créer les éléments pour la vidéo const videoBox = document.createElement('div'); videoBox.className = 'video-box'; videoBox.id = `video-container-${userId}`; const video = document.createElement('video'); video.id = `video-${userId}`; video.srcObject = stream; video.autoplay = true; video.playsinline = true; // Obtenir le nom du participant database.ref(`rooms/${roomCode}/participants/${userId}`).once('value', (snapshot) => { const participant = snapshot.val(); if (participant) { const usernameDiv = document.createElement('div'); usernameDiv.className = 'username'; usernameDiv.textContent = participant.username; videoBox.appendChild(usernameDiv); } }); videoBox.appendChild(video); videosContainer.appendChild(videoBox); } // Supprimer un flux vidéo de l'interface function removeVideoStream(userId) { const videoContainer = document.getElementById(`video-container-${userId}`); if (videoContainer) { videoContainer.remove(); } // Supprimer l'appel if (peers[userId]) { peers[userId].close(); delete peers[userId]; } } // Écouter les participants function listenForParticipants() { const participantsRef = database.ref(`rooms/${roomCode}/participants`); participantsRef.on('child_added', (snapshot) => { const participant = snapshot.val(); const participantId = snapshot.key; // Mettre à jour la liste des participants updateParticipantList(); // Si c'est un nouveau participant et que je suis déjà connecté if (participantId !== myPeer.id && localStream) { // L'appeler pour établir la connexion connectToNewUser(participantId, localStream); } }); participantsRef.on('child_removed', (snapshot) => { const participantId = snapshot.key; // Mettre à jour la liste des participants updateParticipantList(); // Supprimer la vidéo removeVideoStream(participantId); }); } // Mettre à jour la liste des participants function updateParticipantList() { const participantsRef = database.ref(`rooms/${roomCode}/participants`); participantsRef.once('value', (snapshot) => { // Vider la liste participantList.innerHTML = ''; const participants = snapshot.val() || {}; const count = Object.keys(participants).length; // Mettre à jour le compteur participantCount.textContent = count; // Ajouter chaque participant à la liste Object.entries(participants).forEach(([id, data]) => { const participantItem = document.createElement('div'); participantItem.innerHTML = ` <span class="status-indicator status-online"></span> ${data.username} ${id === myPeer.id ? '(vous)' : ''} `; participantList.appendChild(participantItem); }); }); } // Quitter la salle function leaveRoom() { // Arrêter tous les flux if (localStream) { localStream.getTracks().forEach(track => track.stop()); } if (screenShareStream) { screenShareStream.getTracks().forEach(track => track.stop()); } // Fermer toutes les connexions Object.values(peers).forEach(call => call.close()); peers = {}; // Supprimer le participant if (myPeer && roomCode) { database.ref(`rooms/${roomCode}/participants/${myPeer.id}`).remove(); } // Fermer la connexion PeerJS if (myPeer) { myPeer.destroy(); } // Réinitialiser les variables myPeer = null; localStream = null; screenShareStream = null; isHost = false; roomCode = ""; // Réafficher la section de connexion videoSection.classList.add('hidden'); hostControls.classList.add('hidden'); loginSection.classList.remove('hidden'); // Vider le conteneur de vidéos (sauf la vidéo locale) const videos = document.querySelectorAll('.video-box:not(:first-child)'); videos.forEach(video => video.remove()); // Réinitialiser la vidéo locale localVideo.srcObject = null; } // Événements joinBtn.addEventListener('click', () => { username = usernameInput.value.trim(); const code = roomCodeInput.value.trim().toUpperCase(); if (username && code) { isHost = false; joinRoom(code); } else { showNotification("Informations manquantes", "Veuillez entrer votre nom et le code de la salle."); } }); createBtn.addEventListener('click', () => { username = usernameInput.value.trim(); if (username) { isHost = true; createRoomModal.classList.remove('hidden'); } else { showNotification("Nom manquant", "Veuillez entrer votre nom pour créer une salle."); } }); confirmCreateBtn.addEventListener('click', () => { const customCode = newRoomCodeInput.value.trim().toUpperCase(); const code = customCode || generateRoomCode(); createRoomModal.classList.add('hidden'); joinRoom(code); }); toggleVideoBtn.addEventListener('click', () => { if (localStream) { const videoTracks = localStream.getVideoTracks(); videoTracks.forEach(track => { track.enabled = !track.enabled; }); videoEnabled = videoTracks[0]?.enabled || false; toggleVideoBtn.textContent = videoEnabled ? "Désactiver vidéo" : "Activer vidéo"; } }); toggleAudioBtn.addEventListener('click', () => { if (localStream) { const audioTracks = localStream.getAudioTracks(); audioTracks.forEach(track => { track.enabled = !track.enabled; }); audioEnabled = audioTracks[0]?.enabled || false; toggleAudioBtn.textContent = audioEnabled ? "Désactiver audio" : "Activer audio"; } }); shareScreenBtn.addEventListener('click', async () => { try { if (!screenShareStream) { // Commencer le partage d'écran screenShareStream = await navigator.mediaDevices.getDisplayMedia({ video: true }); // Remplacer le flux vidéo local par le partage d'écran const videoTrack = screenShareStream.getVideoTracks()[0]; const sender = Object.values(peers).forEach(peer => { const senders = peer._pc.getSenders(); const videoSender = senders.find(s => s.track && s.track.kind === 'video'); if (videoSender) { videoSender.replaceTrack(videoTrack); } }); // Mettre à jour l'affichage local localVideo.srcObject = screenShareStream; // Arrêter le partage d'écran lorsque l'utilisateur arrête videoTrack.onended = () => { stopScreenSharing(); }; shareScreenBtn.textContent = "Arrêter le partage"; } else { stopScreenSharing(); } } catch (error) { console.error("Erreur lors du partage d'écran:", error); showNotification("Erreur", "Impossible de partager l'écran. Veuillez réessayer."); } }); function stopScreenSharing() { if (screenShareStream) { screenShareStream.getTracks().forEach(track => track.stop()); // Rétablir la vidéo de la caméra const videoTrack = localStream.getVideoTracks()[0]; if (videoTrack) { Object.values(peers).forEach(peer => { const senders = peer._pc.getSenders(); const videoSender = senders.find(s => s.track && s.track.kind === 'video'); if (videoSender) { videoSender.replaceTrack(videoTrack); } }); // Rétablir l'affichage local localVideo.srcObject = localStream; } screenShareStream = null; shareScreenBtn.textContent = "Partager écran"; } } leaveBtn.addEventListener('click', () => { leaveRoom(); }); copyBtn.addEventListener('click', () => { inviteLink.select(); document.execCommand('copy'); // Afficher une confirmation copyBtn.textContent = "Copié !"; setTimeout(() => { copyBtn.textContent = "Copier le lien"; }, 2000); }); // Fermer les modales document.querySelectorAll('.close').forEach(closeBtn => { closeBtn.addEventListener('click', () => { createRoomModal.classList.add('hidden'); notificationModal.classList.add('hidden'); }); }); notificationConfirm.addEventListener('click', () => { notificationModal.classList.add('hidden'); }); // Vérifier s'il y a un code de salle dans l'URL window.addEventListener('load', () => { const urlParams = new URLSearchParams(window.location.search); const roomParam = urlParams.get('room'); if (roomParam) { roomCodeInput.value = roomParam; // Focus sur le champ nom usernameInput.focus(); } }); // Gérer la déconnexion à la fermeture de la page window.addEventListener('beforeunload', () => { leaveRoom(); }); </script> </body> </html> ...Le code pour intégrer le live est 1234
2
+ Corrigé les erreurs et fait en sorte que tout les boutons fonctionnent code a234
3
+ Les boutons ne sont pas aligné et partage d'écran ne fonctionne pas