Reunión de equipo10:30 · 4 personas esperando
Este sitio quiere
videollamada.app
Usar tu cámara
Usar tu micrófono
Demande d'accès à la caméra du navigateur
Une bulle tombe de la barre d'adresse pour demander caméra et micro ; selon ton choix, l'appel s'allume ou se bloque.
Réglages
Code
<div class="uvq13-prm" data-p="ask"><div class="tb"><span class="dots" aria-hidden="true"><i></i><i></i><i></i></span><div class="ad"><button type="button" class="fire" aria-haspopup="dialog" aria-label="Autorisations du site"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/></svg></button><span class="url">videollamada.app/equipo</span><span class="cam" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="7" width="12" height="10" rx="2"/><path d="M15 10.5l6-3v9l-6-3"/></svg><i></i></span></div></div><div class="lob"><div class="vid"><span class="st s0"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="7" width="12" height="10" rx="2"/><path d="M15 10.5l6-3v9l-6-3M3 3l18 18"/></svg><span>Caméra désactivée</span></span><span class="st s2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M6 6l12 12"/></svg><span>Tu as bloqué la caméra</span><button type="button" class="chg">Modifier l'autorisation</button></span><span class="me" aria-hidden="true"><i class="hd"></i><i class="bd"></i><i class="lv"><b></b><b></b><b></b></i></span><small class="tag">Vous</small></div><p class="mt"><b>Réunion d'équipe</b><small>10:30 · 4 personas esperando</small></p><button type="button" class="jn">Rejoindre</button></div><div class="po" role="dialog" aria-modal="true" aria-labelledby="uvq13-prm-t"><button type="button" class="x" aria-label="Fermer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button><p class="ti" id="uvq13-prm-t">Ce site souhaite</p><p class="dm">videollamada.app</p><p class="rw"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="7" width="12" height="10" rx="2"/><path d="M15 10.5l6-3v9l-6-3"/></svg><span>Utiliser ta caméra</span></p><p class="rw"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21"/></svg><span>Utiliser ton micro</span></p><div class="ac"><button type="button" data-v="on">Autoriser pendant la visite du site</button><button type="button" class="b2" data-v="on">Autoriser cette fois</button><button type="button" data-v="no">Ne pas autoriser</button></div></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Overlays
Voir tout : OverlaysOù l’utiliser
Les applis vidéo dépendent de la demande d'autorisation, et cette maquette aide à concevoir autour. Autoriser transforme la vignette de la salle en aperçu en direct et ajoute un point d'enregistrement dans la barre, bloquer explique comment changer d'avis. Pour un guide de démarrage, une page d'aide ou une visite produit.
La couleur principale sert aux boutons et à l'avatar, la seconde au point d'enregistrement. Change le domaine et le texte de la demande, puis rouvre la bulle depuis l'icône de la barre ou la vignette bloquée pour tester chaque cas.