Интеграция Whereby Embedded для видеозвонков на сайте
Whereby Embedded — простейший способ добавить видеозвонки: создаёте комнату через API, вставляете <whereby-embed> веб-компонент в HTML — и готово. Никакого WebRTC вручную, никаких клиентских SDK.
Создание комнаты через API
async function createWherebyRoom(params: {
endDate?: Date;
roomMode?: 'normal' | 'group';
roomNamePrefix?: string;
}): Promise<{ roomUrl: string; meetingId: string; hostRoomUrl: string }> {
const response = await fetch('https://api.whereby.dev/v1/meetings', {
method: 'POST',
headers: {
'Authorization': `Bearer ${process.env.WHEREBY_API_KEY}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({
endDate: (params.endDate ?? new Date(Date.now() + 2 * 60 * 60 * 1000)).toISOString(),
roomMode: params.roomMode ?? 'normal',
roomNamePrefix: params.roomNamePrefix,
fields: ['hostRoomUrl'],
}),
});
const meeting = await response.json();
return {
roomUrl: meeting.roomUrl,
meetingId: meeting.meetingId,
hostRoomUrl: meeting.hostRoomUrl, // для организатора — с доп. правами
};
}
Встраивание через веб-компонент
// Нативный HTML — без каких-либо npm-зависимостей
function WherebyCall({ roomUrl, displayName }) {
return (
<div style={{ height: 600 }}>
<whereby-embed
room={roomUrl}
displayName={displayName}
minimal
background="off"
chat="on"
screenshare="on"
style={{ width: '100%', height: '100%', border: 'none', borderRadius: 12 }}
/>
</div>
);
}
// В Next.js — добавить type declaration
declare global {
namespace JSX {
interface IntrinsicElements {
'whereby-embed': React.DetailedHTMLProps<
React.HTMLAttributes<HTMLElement> & {
room: string;
displayName?: string;
minimal?: boolean | string;
chat?: 'on' | 'off';
screenshare?: 'on' | 'off';
background?: 'on' | 'off';
},
HTMLElement
>;
}
}
}
Скрипт Whereby загружается через CDN — добавить в <head>:
<script type="module" src="https://cdn.srv.whereby.com/embed/v2-embed.esm.js"></script>
Premeeting screen
Whereby по умолчанию показывает экран проверки камеры/микрофона перед входом. Для отключения:
<whereby-embed room={roomUrl} skip-media-permission-prompt />
События веб-компонента
const containerRef = useRef<HTMLElement>(null);
useEffect(() => {
const el = containerRef.current;
if (!el) return;
const onJoin = () => console.log('Joined');
const onLeave = (e: CustomEvent) => {
console.log('Left after', e.detail.participantId);
onCallEnd?.();
};
el.addEventListener('ready', onJoin);
el.addEventListener('leave', onLeave);
return () => {
el.removeEventListener('ready', onJoin);
el.removeEventListener('leave', onLeave);
};
}, []);
Сроки
Базовая интеграция Whereby с созданием комнаты и веб-компонентом — 0.5–1 день.