Фрейм и SDK

Подключение

Тег <script>:

<script src="https://rismik.ru/sdk/whiteboard.js"></script>
<script>
  const lesson = Whiteboard.mount(container, { url, onEvent })
</script>

npm (ESM, с типами): @whiteboard-studio/embed — import { mount } from '@whiteboard-studio/embed'.

React: @whiteboard-studio/embed-react:

import { WhiteboardLesson, type WhiteboardLessonHandle } from '@whiteboard-studio/embed-react'

const ref = useRef<WhiteboardLessonHandle>(null)
<WhiteboardLesson ref={ref} url={link} height="80vh" onEvent={(e) => e.type === 'wb:leave' && router.back()} />
const png = await ref.current?.command('exportPng')

`mount(container, options)`

Параметр
`url`	обязательно	ссылка участника от вашего сервера
`onEvent`	`(event) => void`	события урока
`height`	CSS, по умолчанию `720px`	ширина фрейма — всегда 100%
`title`	строка	подпись фрейма для экранных дикторов
`commandTimeoutMs`	по умолчанию 30 000	сколько ждать ответа на команду

Возвращает объект { iframe, ready, command, destroy }:

ready — промис. Выполняется на wb:ready, отклоняется на wb:error и wb:minutes-exhausted.
command(name) — промис с результатом команды.
destroy() — убирает фрейм и подписки.

SDK принимает сообщения только от источника ссылки и отправляет команды только ему.

События (урок → ваша страница)

`type`	Поля	Когда
`wb:ready`	`role`, `mode`, `lessonId`	урок открыт
`wb:joined`	`call: true`	участник вошёл в видеозвонок
`wb:leave`	—	участник нажал «Выйти»: закройте урок или верните человека на вашу страницу
`wb:error`	`code`: `link_expired`, `not_found`, `archived`, `unavailable`	урок не открылся
`wb:minutes-exhausted`	`code`	минуты закончились, новый урок не начнётся

Команды (ваша страница → урок)

Команда	Результат
`exportPng`	строка `data:image/png;base64,…` — текущая страница доски
`exportPdf`	`Blob` (application/pdf) — все страницы доски
`fitToScreen`	`true` — показать всё содержимое доски

Без SDK команду отправляют так: iframe.contentWindow.postMessage({ type: 'wb:command', id: 'любая строка', command: 'exportPng' }, new URL(lessonUrl).origin), где lessonUrl — ссылка на урок (сейчас это https://rismik.ru, у ссылок на старый адрес — https://whiteboard.quest-practices.ru). Ответ придёт сообщением { type: 'wb:result', id, command, result, error? }.

Урок отправляет сообщения только на домены, которые вы указали. Сообщения с других адресов он не принимает.

Права фрейма

Фрейму нужен атрибут allow="camera; microphone; display-capture; fullscreen". SDK ставит его сам. Без него браузер не даст доступ к камере и микрофону.

Cookie во фрейме не используются. Поэтому урок работает и там, где браузер блокирует сторонние cookie: в Safari, в Chrome без сторонних cookie и в режиме инкогнито.

Режимы

full — доска, видеозвонок, чат.
board_only — доска и чат. Видео у вас своё, кнопки звонка нет.

У преподавателя (role: teacher) есть управление уроком. У ученика — полный набор инструментов доски, а управления уроком нет.