videollamada.app/equipo
Cámara desactivadaHas bloqueado la cámaraTú

Reunión de equipo10:30 · 4 personas esperando

HTML + CSSOverlays

Aviso de permiso de cámara del navegador

Un globo cae desde la barra de direcciones pidiendo cámara y micrófono; según elijas, la llamada se enciende o se bloquea.

Ajustes

16px
1x

Código

<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="Permisos del sitio"><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>Cámara desactivada</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>Has bloqueado la cámara</span><button type="button" class="chg">Cambiar permiso</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">Tú</small></div><p class="mt"><b>Reunión de equipo</b><small>10:30 · 4 personas esperando</small></p><button type="button" class="jn">Unirse ahora</button></div><div class="po" role="dialog" aria-modal="true" aria-labelledby="uvq13-prm-t"><button type="button" class="x" aria-label="Cerrar"><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">Este sitio quiere</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>Usar tu cámara</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>Usar tu micrófono</span></p><div class="ac"><button type="button" data-v="on">Permitir al visitar el sitio</button><button type="button" class="b2" data-v="on">Permitir esta vez</button><button type="button" data-v="no">No permitir</button></div></div></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Overlays

Ver todos: Overlays

Dónde usarlo

Las apps de vídeo dependen del aviso de permisos, y esta maqueta deja diseñar a su alrededor. Permitir convierte la casilla de la sala en una vista en directo y añade un punto de grabación a la barra, y bloquear explica cómo cambiarlo. Encaja en guías de inicio, páginas de ayuda y recorridos de producto.

El color principal va en botones y avatar, y el secundario en el punto de grabación. Cambia el dominio y el texto de la petición, y vuelve a abrir el globo desde el icono de la barra o desde la casilla bloqueada para probar cada camino.