CamFrame

Marco de cámara con el interior vacío, para que OBS ponga la cámara debajo, con etiqueta de nombre y estado.

Cuándo usarlo

Props. ratio (16:9, 4:3, 1:1), width, live, name, role (por ejemplo, pronombres o cargo), children (solo para maquetar: en directo no se pasa nada), style, liveLabel.

Cuándo usarlo. En el overlay de directo, sobre la fuente de vídeo. El marco es un borde de 2px en border-primary con radius-2xl, sin fondo. La etiqueta va abajo a la izquierda en bg-primary_alt; live añade el punto verde y la palabra "En directo", nunca solo el color.

Evita. Poner fondo al marco: taparía la cámara. Más de una etiqueta por marco. Esquinas distintas de radius-2xl, que es la de las tarjetas flotantes del sistema.

Ampliaciones sobre la guía. liveLabel cambia "En directo". Ojo: role es el texto junto al nombre, no un rol ARIA.

Ejemplos

En directoTu canalella/él

Invitada

Mod

Props

Prop	Tipo	Por defecto	Descripción
`ratio`	`"16:9" · "4:3" · "1:1"`	`16:9`
`width`	`string \| number`	`480`
`live`	`boolean`	`false`	Añade el punto verde y la palabra "En directo": nunca solo el color.
`name`	`ReactNode`	—
`role`	`ReactNode`	—	Pronombres o cargo, junto al nombre.
`children`	`ReactNode`	—	Solo para maquetar: en directo no se pasa nada y OBS pone la cámara debajo.
`liveLabel`	`string`	—	Sustituye a "En directo" (ampliación sobre la guía).
`className`	`string`	—
`style`	`CSSProperties`	—

Código

import { CamFrame } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<CamFrame ratio="16:9" width={480} live name="Tu canal" role="ella/él" />
		</>
	);
}

---
import { CamFrame } from "@jotis-me/react";
---

<CamFrame ratio="16:9" width={480} live name="Tu canal" role="ella/él" />