UI

avatar-container

아바타 스트리밍 Web Component를 렌더링 합니다.

<avatar-container videoStyle='{"border-radius": "24px"}'></avatar-container>

props	type	default	설명
videoStyle	[key: string]: string | number	x	비디오 요소의 스타일 조절
volume	number	100	비디오 음량 조절

---

chat-container

채팅 Web Component를 렌더링 합니다.

<chat-container delay="60" type="text" isShowCount="true"></chat-container>;

props	type	default	설명
delay	number	30	텍스트 애니메이션 속도
type	'text' | 'voice'	text	채팅 화면 모드
isShowCount	boolean	true	텍스트 모드에서 글자 카운트 UI on/off

Web Components와 React/Vue 환경에서의 속성 전달 방식

Web Components는 React나 Vue와 같은 Virtual DOM 환경에서도 사용할 수 있습니다. 하지만, 각 환경의 동작 방식에 따라 주의가 필요합니다. 속성을 동적으로 변경하거나 추가하려면 ref를 활용해 DOM 요소를 직접 참조하는 방식이 요구됩니다.