Інтеграція 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 екран
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 день.