Встраивание комнаты Speak через iframe

Комнату Speak можно встроить через iframe в любую веб-страницу: сайт, платформу обучения, личный кабинет или веб-приложение. Участники подключаются к встрече прямо там и не уходят на другой сайт.

Для этого не нужны API и настройки в Kinescope — достаточно ссылки на комнату и фрагмента HTML-кода.

Кому подходит эта статья

• Онлайн-школам и платформам обучения — нужно проводить занятие прямо на странице курса
• Организаторам мероприятий — нужно, чтобы встреча шла на странице события, а не по внешней ссылке
• Разработчикам — нужно добавить видеовстречи в личный кабинет или веб-приложение

Как встроить комнату

1. Скопируйте ссылку на комнату. Откройте комнату и скопируйте адрес из адресной строки. Во время встречи ссылка есть и в самой комнате: наведите курсор на название комнаты в левом верхнем углу и нажмите значок копирования в строке «Ссылка». Ссылка выглядит так: https://speak.kinescope.io/jqi-qhua-glk. Через API ссылку и код комнаты возвращают поля link и code в ответе GET /v1/speak/rooms — смотрите справочник API.
2. Вставьте код на страницу и подставьте в src ссылку на свою комнату:

<iframe
  src="https://speak.kinescope.io/jqi-qhua-glk"
  allow="camera; microphone; display-capture; fullscreen; autoplay; clipboard-write"
  style="width: 100%; height: 100vh; min-height: 640px; border: 0;"
></iframe>

3. Откройте страницу и проверьте встречу: включите камеру и микрофон на экране входа, войдите в комнату и попробуйте показать экран. Когда участник выходит из встречи, во фрейме остаётся экран «Вы вышли из встречи» с кнопкой «Вернуться».

Что разрешает атрибут allow

Браузер по умолчанию не пускает встроенную страницу к камере и другим устройствам. Атрибут allow перечисляет, что можно комнате Speak.

Firefox пропускает autoplay и clipboard-write и пишет об этом предупреждение в консоль. Это нормально: камера, микрофон и показ экрана работают.

Требования к странице

• Только HTTPS. Камера и микрофон работают только на защищённых страницах. Если страница открыта по HTTP, вместо комнаты будет ошибка. Для локальной проверки подойдёт http://localhost.
• Размер фрейма. Экран входа целиком помещается во фрейм от 1024×640 пикселей. В более узком фрейме он перестраивается в одну колонку, и превью камеры может не поместиться по высоте. Удобнее всего отдать фрейму всю ширину страницы и высоту окна, на телефоне — весь экран.
• Заголовки безопасности не мешают фрейму. Если на сайте настроены Content-Security-Policy, Permissions-Policy или изоляция страницы (Cross-Origin-Embedder-Policy), проверьте их по ответу «Почему фрейм не загружается?».
• Без sandbox. Атрибут sandbox у iframe лучше не ставить. Если без него нельзя, добавьте в него allow-scripts allow-same-origin allow-forms allow-popups: без allow-same-origin вместо комнаты будет пустой экран.

Вход организатора

Во фрейме Speak не узнаёт владельца комнаты: даже если вы вошли в Kinescope, на экране входа будет «Вы участник», а не «Вы организатор». Браузер не передаёт данные входа во фрейм, встроенный на чужой сайт, поэтому во фрейме все заходят как участники.

Как провести встречу:

• Организатор заходит по прямой ссылке, а участники — через ваш сайт. Откройте https://speak.kinescope.io/<код комнаты> в отдельной вкладке: там у вас будут права организатора — запись, управление доступом и зал ожидания.
• Ведущий заходит через ваш сайт по ссылке с токеном. Ваш сервер подписывает JWT-токен с ролью admin, и вы подставляете в src ссылку вида https://speak.kinescope.io/jqi-qhua-glk?token=<токен>. Роль приходит вместе со ссылкой, а не из данных входа. Как подписать токен — в статье «Ссылка для входа в Speak с ролью администратора».

Если в комнате включён зал ожидания, участники из фрейма ждут с сообщением «Организатор видит ваш запрос — ожидайте». Впустить их может только организатор, который уже в комнате: список участников → «Ожидают входа» → «Впустить».

На телефоне и планшете

На мобильных устройствах во фрейме сначала появляется экран «Больше возможностей — в приложении» со ссылками на магазины приложений и кнопкой «Продолжить в браузере».

• Чтобы подключиться на сайте, нажмите «Продолжить в браузере» — откроется экран входа, камера и микрофон работают во фрейме. Выбор запоминается на неделю.
• Чтобы поставить приложение, откройте ссылку на комнату в браузере напрямую. Внутри фрейма ссылки на App Store, Google Play и RuStore могут не открыться: магазины запрещают показ своих страниц во фреймах.

Что во фрейме работает иначе

• Запрос доступа к камере — от имени вашего сайта. В Chrome в окне запроса будет домен вашей страницы, а не Kinescope.
• «Картинка в картинке» в Chrome не открывается. Пункт есть в меню «три точки», но по нажатию ничего не происходит: Chrome разрешает такое окно только странице, открытой напрямую, а не во фрейме. Если режим нужен — откройте комнату по прямой ссылке.
• Шумоподавление RNNoise не работает. Его можно выбрать в «Настройки» → «Аудио» → «Шумоподавление», но звук пойдёт без этой обработки. WebRTC AEC (стоит по умолчанию) и DPDFNet (16k) во фрейме работают.
• Ссылка на встречу в комнате — прямая. В строке «Ссылка» во всплывающем окне у названия комнаты стоит и копируется адрес на speak.kinescope.io, а не адрес вашей страницы. Если участники должны заходить через сайт, отправляйте им ссылку на свою страницу.

Решение проблем

Если проблема не решилась, напишите в техническую поддержку: приложите адрес страницы с фреймом, код комнаты, название браузера и скриншот консоли.

Что дальше?

После встраивания комнаты рекомендуем:

1. Что такое Speak — возможности видеовстреч, запись и зал ожидания
2. Ссылка для входа в Speak с ролью администратора — вход ведущего через ваш сайт по ссылке с JWT-токеном
3. Рестриминг в Speak — трансляция встречи на внешние площадки прямо из комнаты
4. Диагностика и поддержка — что делать, если со встречей что-то не так

Остались вопросы? Напишите в чат поддержки — специалисты помогут!