Una lámina de cristal delante de un monitor con un rotulador al lado, como metáfora de dibujar sobre una pantalla en directo
Drawing

Anota y graba sobre tu propia pantalla, en directo y desde el navegador

Estás explicando algo y necesitas señalar una cosa concreta de tu pantalla. Lo habitual es hacer una captura, abrirla en algún editor, pintarle un círculo rojo y enviar la imagen. Funciona justo hasta que la pantalla cambia. La hoja de cálculo se desplaza, el panel se actualiza, la aplicación pasa al siguiente paso — y tu captura anotada ya no es más que la foto de un momento que ha pasado. Lo que querías era dibujar sobre la pantalla, no sobre una fotografía suya.

La app de pizarra a pantalla completa hace exactamente eso. Abre el tablero, elige Compartir mi pantalla, indica en el diálogo del propio navegador qué quieres compartir y tu pantalla aparecerá detrás del lienzo. A partir de ahí dibujas encima con el mismo lápiz, las mismas flechas, formas, notas adhesivas y texto de siempre — solo que lo que hay debajo está vivo y se sigue actualizando mientras anotas. Esta guía explica cómo iniciar la captura, qué está haciendo realmente el tablero cuando pone una pantalla detrás de tu dibujo, qué contiene la grabación y una cosa que conviene tener clarísima antes de confiar en todo esto: una pantalla compartida no se guarda nunca.

Por qué una captura deja de servir en cuanto algo se mueve

Una captura es una buena superficie para anotar algo que ya está terminado. Un mockup, un informe impreso, un error que ya has reproducido y congelado: la capturas una vez, la marcas y listo. El problema empieza cuando el sujeto sigue moviéndose. Un panel en directo se refresca mientras dibujas la flecha. Un formulario se valida según escribes. Un registro de compilación va bajando. Un mapa se vuelve a dibujar al hacer zoom. En todos esos casos, en el instante en que congelas una imagen dejas de hablar de la cosa y empiezas a hablar de un recuerdo suyo.

El segundo problema es el rodeo. Anotar una captura significa capturar, cambiar de aplicación, pegar, dibujar, exportar, volver y compartir: seis pasos, tres de los cuales generan un archivo que en realidad no querías crear. La mitad de las veces lo haces a media frase en una llamada, con todo el mundo mirando cómo buscas la herramienta de recorte. Dibujar directamente sobre la pantalla en directo elimina las dos cosas a la vez: no se captura nada, no se exporta nada, y lo que rodeas es la cosa misma en lugar de una copia que empezó a envejecer en cuanto la hiciste.

Cómo poner tu pantalla detrás del tablero

Abre la app de pizarra a pantalla completa. En la barra de herramientas hay un pequeño grupo de controles de fondo: uno para usar un archivo de imagen como fondo, otro para compartir tu pantalla y —en cuanto hay un fondo puesto— otro para quitarlo. Pulsa Compartir mi pantalla y el navegador toma el mando: abre su propio selector, el mismo que ves al compartir en una videollamada, y te pregunta qué quieres compartir. Ese diálogo es del navegador, no de la página. Tú decides si es una pestaña concreta, una ventana de una aplicación o una pantalla entera, y la página solo recibe aquello que hayas elegido ahí. Si cambias de idea, cierra el selector y no ocurre nada: el tablero se queda exactamente como estaba.

Al confirmar, la superficie compartida aparece detrás del lienzo, ajustada para caber, y dibujas encima. Todo lo demás del tablero funciona con normalidad: el lápiz y el subrayador, formas con línea discontinua o punteada, flechas con punta a un lado o a los dos, texto, notas adhesivas, deshacer y rehacer, guías de alineación. Si lo que quieres es marcar una imagen fija —una captura que ya hiciste, una foto, un plano, un diagrama exportado de otro sitio— usa Imagen de fondo y elige el archivo: se comporta igual, sin el movimiento, y con una diferencia importante frente a una pantalla compartida — esa imagen se queda con el tablero. Y cuando quieras volver al blanco de siempre, Quitar el fondo lo desprende y, si había una pantalla compartida, detiene la captura.

Qué significa exactamente "detrás del tablero"

Merece la pena ser preciso con el mecanismo, porque los dos tipos de fondo están hechos de forma distinta y eso es lo que explica lo que notarás después. El tablero es un único lienzo HTML que se vuelve a pintar entero en cada fotograma, y todo lo que dibujas vive en una lista ordenada de objetos que llamamos la escena. Un fondo de imagen entra en esa lista: la imagen se ajusta a la vista que tienes delante y se inserta como un objeto de imagen bloqueado, en el último lugar del orden de capas — un miembro más de la escena, solo que colocado detrás de todo y bloqueado para que no lo arrastres sin querer. Una pantalla en directo no puede entrar, porque un flujo no es un valor que quepa en una lista. Se pinta aparte, antes que la escena: primero el flujo, después la cuadrícula de puntos opcional y luego todas las formas y trazos, en orden. En los dos casos los píxeles acaban en el mismo lienzo: tu dibujo nunca flota en una capa transparente aparte sobre un elemento de vídeo.

En una captura en directo, la fuente es un elemento <video> que transporta el flujo que ha entregado el navegador. Un elemento de vídeo no avisa al lienzo de que tiene un fotograma nuevo, así que el tablero mantiene un bucle de repintado mientras la captura está activa y redibuja en cada fotograma de animación para que el fondo esté siempre al día. Ese bucle solo existe mientras hay una pantalla realmente compartida; en cuanto se detiene la captura, se detiene con ella. Un fondo de imagen no necesita nada de esto: se redibuja desde la escena como cualquier otro objeto, y las imágenes muy grandes se reducen a un máximo razonable antes de guardarse, porque un fondo siempre se muestra escalado a la vista y una foto de doce megapíxeles costaría memoria —y tamaño del archivo guardado— sin ganancia visible.

Anotaciones que se quedan pegadas a lo que señalan

El detalle que hace esto realmente útil, y no solo vistoso, es que el fondo se coloca en las coordenadas del mundo del tablero, no clavado a tu pantalla. El tablero es un lienzo infinito con una cámara encima; desplazarse y hacer zoom mueven la cámara, no el dibujo. Cuando se pone un fondo, su rectángulo se calcula una vez en ese mismo espacio del mundo y luego lo arrastra la misma transformación de cámara que a todo lo demás.

La consecuencia práctica: si haces zoom sobre una esquina de un panel compartido para rodear una cifra, el círculo y la cifra amplían juntos y siguen alineados. Si te desplazas de lado, los dos se van a la vez. Si el fondo se hubiera reajustado a la ventana en cada fotograma, la cámara se habría anulado a sí misma y la imagen habría quedado fija a la pantalla: tu flecha se habría separado de aquello que señalaba en cuanto te movieras. Como el fondo está anclado al mundo, las anotaciones se quedan pegadas a lo que señalan, que es toda la razón de anotar encima de algo en vez de al lado.

Nada se sube, y el navegador decide qué se comparte

Compartir pantalla suena inquietante hasta que miras adónde van de verdad los píxeles. El tablero obtiene el flujo a través de la API de captura de pantalla del navegador, y ese flujo se consume en tu propia máquina: se dibuja en un lienzo de la misma pestaña y en ningún otro sitio. No hay servidor por medio. No se sube ningún fotograma, no se crea ninguna sesión y no existe ninguna cuenta a la que asociar nada. Cierras la pestaña y el flujo termina con ella.

El navegador también se queda con los mandos, y eso es intencionado. La especificación Screen Capture del W3C exige que una captura solo empiece a raíz de un gesto del usuario y después de que este haya elegido explícitamente una superficie: por eso el selector lo dibuja el navegador y no la página, y por eso un sitio web no puede preseleccionar lo que compartes ni arrancar una captura por su cuenta. Mientras la captura está en marcha, tu navegador muestra su propio indicador de que estás compartiendo, y puedes cortarla desde ahí en cualquier momento sin tocar la página. Si lo haces, el tablero se entera al instante: el fondo desaparece, el bucle de repintado se detiene y un aviso para lectores de pantalla confirma que se ha quitado el fondo. Es el mismo modelo de privacidad que el resto del tablero, que tampoco envía tus trazos a ninguna parte — lo cuenta entero nuestra guía sobre la pizarra online sin registro.

Una mano con un lápiz digital justo encima de la pantalla de un portátil, como metáfora de anotar sobre lo que se está viendo

Qué se guarda: la imagen se queda, la pantalla no

Conviene decirlo sin rodeos, porque dar por hecho lo contrario te costará trabajo: una pantalla en directo es un flujo, no datos, y no se guarda nunca. El archivo que guarda el tablero —la escena JSON que exportas y el autoguardado local que te ofrece restaurar el último tablero— contiene los objetos que dibujaste y nada de lo que solo pasó por delante. Ahí dentro no hay ni un fotograma de tu pantalla. Las exportaciones cuentan lo mismo: PNG, SVG y PDF salen todas de la escena, así que una pantalla compartida no aparece en ninguna. Si mañana vuelves a abrir ese tablero, tu dibujo reaparecerá tal cual lo dejaste, flotando sobre un lienzo en blanco, y si quieres la pantalla otra vez detrás tendrás que volver a compartirla.

Con un fondo de imagen ocurre justo lo contrario, y conviene grabárselo porque antes funcionaba al revés. Una imagen que eliges como fondo no es un efecto de visualización pintado bajo el dibujo: se coloca dentro de la escena, como un objeto de imagen real, bloqueado y empujado hasta el fondo del orden de capas. De ese único hecho se derivan todas las consecuencias que esperarías: se escribe en el JSON que exportas, la conserva el autoguardado local, vuelve a su sitio al reabrir el tablero, y se dibuja en las exportaciones a PNG, SVG y PDF por debajo de todo lo que hayas anotado encima. Exporta un SVG y la imagen va incrustada en el archivo; exporta un PNG y queda fijada en los píxeles. No hay que hacer nada especial: marcas una captura, cierras la pestaña, vuelves mañana, y siguen ahí la captura y tus flechas.

Queda entonces una pregunta legítima: si un fondo de imagen se guarda igualmente, ¿cuándo conviene usar la herramienta Añadir imagen de siempre? Ya no es cuestión de si perdura —las dos perduran—, sino de qué papel juega la imagen. Imagen de fondo es para una imagen sobre la que dibujas: llega ajustada a la vista que tienes delante, se coloca detrás de todas las formas y está bloqueada, así que ningún arrastre despistado te la sacará de debajo de las anotaciones, y elegir un segundo fondo sustituye al primero en vez de amontonar uno detrás de otro. Añadir imagen es para una imagen que es un elemento más entre varios: llega desbloqueada y a su tamaño, y la mueves, la redimensionas, la rotas y la pones por delante o por detrás de otras formas, tantas como quieras. La regla rápida: una sola cosa que vas a anotar, fondo; varias cosas que vas a componer, Añadir imagen. Y Compartir mi pantalla cuando el sujeto sigue moviéndose y una imagen fija ya habría caducado antes de que terminaras de dibujar sobre ella. Nuestra guía sobre exportar una pizarra a PNG, SVG y PDF detalla qué contiene cada uno de esos archivos.

Grabar: vectores por defecto, la pantalla solo si lo pides

El tablero puede grabar una sesión narrada, y la forma en que lo hace interactúa con los fondos de una manera que conviene entender. Por defecto el grabador no captura píxeles: guarda el audio de tu micrófono junto a una serie de instantáneas de la escena. La reproducción es, por tanto, una reinterpretación: el tablero vuelve a dibujar a partir de las instantáneas al compás del audio, y por eso puedes recorrer la línea de tiempo y por eso el resultado se mantiene nítido a cualquier tamaño. También es la razón de que, por defecto, una sesión grabada sobre una pantalla compartida se exporte solo con tus trazos: en la grabación no había píxeles de pantalla desde el principio.

Eso está bien para un diagrama que has dibujado de cero, y no sirve de nada para el recorrido por un panel en directo. Así que cuando hay una pantalla realmente compartida aparece una casilla extra junto al botón de grabar: incluir la pantalla en la grabación. Márcala antes de grabar y el tablero grabará además el propio lienzo compuesto —pantalla y trazos juntos, tal y como se veían—, mezclado con la misma pista de micrófono. Al exportar recibirás ese archivo en lugar de la reproducción. La diferencia importa sobre todo a posteriori: la exportación por reproducción solo puede mostrar el fondo que haya en el momento de exportar, así que si la captura ya ha terminado obtendrías un vídeo de tus anotaciones sobre la nada. La grabación opcional es una captura real de lo que había en el lienzo mientras grababas, así que sobrevive al final de la captura, y suele ser justo el vídeo que querías.

Dos salvedades honestas. La casilla solo aparece cuando hay una pantalla en directo detrás del lienzo y tu navegador admite la exportación de vídeo, que usa la API de grabación de MediaStream para producir un archivo WebM: eso significa Chrome, Edge o Firefox, no Safari. Y si cortas la captura a mitad de la grabación, la grabación se detiene y se cierra ahí mismo en lugar de seguir en silencio sobre un lienzo vacío; obtienes un vídeo más corto pero válido y un mensaje que explica por qué. Para todo lo demás sobre grabar —cómo narrar, cómo revisar la reproducción, cómo guardar un archivo de proyecto— la guía complementaria sobre grabar un recorrido narrado en la pizarra profundiza mucho más.

Modo limpio: esconde todos los controles y mantén Alt para recuperarlos

En cuanto hay una pantalla detrás del lienzo, la barra de herramientas del tablero estorba: flota justo encima de aquello que intentas enseñar y, si estás presentando o grabando, tu público también la ve. El modo limpio la quita: un solo interruptor esconde la barra, los paneles de las esquinas, la paleta de estilo, el minimapa, el botón de ayuda e incluso los enlaces para salir de la app, y deja únicamente tu pantalla y tu dibujo.

Lo oculto está oculto de verdad, no solo invisible: los controles escondidos se marcan como inertes y se ocultan a las tecnologías de apoyo, así que no puedes caer con el tabulador en un botón invisible ni un lector de pantalla leerá una barra que nadie ve. Para recuperar los controles un momento, mantén pulsada Alt (Opción en un Mac): la interfaz reaparece mientras la tecla está abajo y se esfuma al soltarla. Se usa Alt porque los otros modificadores evidentes ya están ocupados —Mayús añade a la selección y restringe proporciones, y la barra espaciadora desplaza el lienzo—, así que tomar prestado cualquiera de los dos habría roto el dibujo. Si estás en una pantalla táctil y no tienes tecla Alt, queda una pequeña pastilla en el centro superior de la pantalla mientras el modo limpio está activo —justo donde reaparece la barra—, con una zona de toque del tamaño de un dedo alrededor: tócala para traer los controles y vuelve a tocarla para mandarlos fuera. La reaparición nunca se queda enganchada: cambiar de ventana con Alt+Tab, cambiar de pestaña o abrir un menú contextual devuelven la interfaz a su sitio, así que no vas a dejar a la sala mirando una barra que creías escondida. Si trabajar sin distracciones es justo lo que buscas, el argumento del lienzo desnudo lo desarrolla entero.

Dónde funciona y dónde no

Compartir pantalla depende de la API de captura de pantalla, y esa API es cosa de escritorio. Safari en iPhone y iPad no la implementa, y las versiones para Android de Chrome y de Firefox tampoco. En lugar de ofrecer un botón que va a fallar, el tablero sencillamente no muestra Compartir mi pantalla cuando la API no está: en un móvil o una tableta verás la opción de imagen de fondo y no la de pantalla. El fondo de imagen sí funciona en todas partes, que cubre el caso móvil más habitual, el de marcar una captura que acabas de hacer — y como ese sí se guarda con el tablero, lo que marques sobrevive a cerrar la pestaña.

En el escritorio, la función vive en la app de pizarra a pantalla completa y no en la pizarra incrustada en la página, porque es donde tiene sentido: una superficie para anotar la pantalla debería ser toda la pantalla. La captura es solo de vídeo —no se pide audio del sistema ni de la pestaña— y solo hay un fondo puesto a la vez, así que elegir una imagen mientras compartes pantalla sustituye a la pantalla, y al revés. Por último, esto no es una sesión colaborativa: el tablero es una superficie de una sola persona, así que lo que compartes lo estás dibujando tú, en tu máquina, y llega a los demás únicamente a través de tu software de llamadas o de un archivo exportado.

Cuatro cosas que merece la pena anotar en directo

  • Un panel de métricas en una revisión. Comparte la pestaña, rodea la métrica que se ha movido, dibuja la tendencia que estás defendiendo y deja que las cifras sigan actualizándose debajo. Nadie tiene que forzar la vista sobre una captura de ayer para seguir un argumento sobre hoy.
  • Un error que sabes reproducir pero no congelar. Comparte la ventana, provoca el comportamiento y marca el momento en que se tuerce mientras se está torciendo. Con la casilla de grabar la pantalla marcada, le entregas a quien programa un vídeo del fallo real con tus flechas encima, y no una descripción escrita de él.
  • Enseñar a usar un programa paso a paso. Comparte la aplicación, dibuja el recorrido de clics mientras hablas, borra los trazos y haz el paso siguiente sobre la misma ventana viva. Es la versión digital de señalar el monitor de otra persona, y encaja con el mismo público que una pizarra a pantalla completa para clases online.
  • Comentar el diseño de un prototipo en marcha. Un prototipo es interactivo por definición, así que una imagen fija pierde justo aquello que estás revisando. Compártelo, ve pasando por él y anota cada estado según llegas a él.

Empieza con una pantalla y una flecha

Aquí no hay mucho que aprender, y esa es la idea. Abre la app de tablero, pulsa Compartir mi pantalla, elige una ventana en el selector del navegador y dibuja una flecha señalando algo. Activa el modo limpio si la barra estorba, y mantén Alt cuando necesites recuperarla. Si vas a grabar, marca la casilla que incluye la pantalla antes de pulsar grabar, no después. Cuando termines, quita el fondo — o simplemente cierra la pestaña, que corta la captura y se lleva el flujo con ella.

Todo lo anterior ocurre en tu propia máquina: sin subidas, sin cuenta, sin sesión guardada y sin ninguna copia de tu pantalla olvidada por ahí, porque la pantalla nunca fue un dato que el tablero pudiera conservar. Si prefieres enseñar un tablero antes que una pantalla, las páginas de la pizarra a pantalla completa y de la pizarra online explican el motor de dibujo en sí, y presentar con una pizarra a pantalla completa cubre la cara de público en vivo de la misma herramienta.

← Volver al Blog