# Встраивание комнаты Speak через iframe Комнату Speak можно встроить через iframe в любую веб-страницу: сайт, платформу обучения, личный кабинет или веб-приложение. Участники подключаются к встрече прямо там и не уходят на другой сайт. Для этого не нужны API и настройки в Kinescope — достаточно ссылки на комнату и фрагмента HTML-кода. > **Информация:** Язык интерфейса Speak во фрейме выбирается по языку браузера участника, параметры в ссылке его не меняют. Переключить язык можно в самой комнате: меню **«три точки»** → **«Настройки»** → **«Основные»** → **«Язык»**. ## Кому подходит эта статья * **Онлайн-школам и платформам обучения** — нужно проводить занятие прямо на странице курса * **Организаторам мероприятий** — нужно, чтобы встреча шла на странице события, а не по внешней ссылке * **Разработчикам** — нужно добавить видеовстречи в личный кабинет или веб-приложение ## Как встроить комнату 1. **Скопируйте ссылку на комнату.** Откройте комнату и скопируйте адрес из адресной строки. Во время встречи ссылка есть и в самой комнате: наведите курсор на название комнаты в левом верхнем углу и нажмите значок копирования в строке **«Ссылка»**. Ссылка выглядит так: `https://speak.kinescope.io/jqi-qhua-glk`. Через API ссылку и код комнаты возвращают поля `link` и `code` в ответе `GET /v1/speak/rooms` — смотрите [справочник API](https://docs.kinescope.ru/api/speak/#v1-speak-rooms). 2. **Вставьте код на страницу** и подставьте в `src` ссылку на свою комнату: ```html ``` 3. **Откройте страницу и проверьте встречу:** включите камеру и микрофон на экране входа, войдите в комнату и попробуйте показать экран. Когда участник выходит из встречи, во фрейме остаётся экран «Вы вышли из встречи» с кнопкой **«Вернуться»**. > **Внимание:** **Атрибут `allow` обязателен.** Без него комната откроется, но браузер не даст ей камеру, микрофон и показ экрана — участник увидит «Камера недоступна» или просьбу разрешить камеру и микрофон. ### Что разрешает атрибут allow Браузер по умолчанию не пускает встроенную страницу к камере и другим устройствам. Атрибут `allow` перечисляет, что можно комнате Speak. | Разрешение | Для чего нужно | |---|---| | `camera` | Камера участника | | `microphone` | Микрофон участника | | `display-capture` | Показ экрана | | `fullscreen` | Кнопка **«Во весь экран»** | | `autoplay` | Автовоспроизведение звука и видео других участников | | `clipboard-write` | Копирование ссылки на встречу | Firefox пропускает `autoplay` и `clipboard-write` и пишет об этом предупреждение в консоль. Это нормально: камера, микрофон и показ экрана работают. ## Требования к странице * **Только HTTPS.** Камера и микрофон работают только на защищённых страницах. Если страница открыта по HTTP, вместо комнаты будет ошибка. Для локальной проверки подойдёт `http://localhost`. * **Размер фрейма.** Экран входа целиком помещается во фрейм от 1024×640 пикселей. В более узком фрейме он перестраивается в одну колонку, и превью камеры может не поместиться по высоте. Удобнее всего отдать фрейму всю ширину страницы и высоту окна, на телефоне — весь экран. * **Заголовки безопасности не мешают фрейму.** Если на сайте настроены `Content-Security-Policy`, `Permissions-Policy` или изоляция страницы (`Cross-Origin-Embedder-Policy`), проверьте их по ответу [«Почему фрейм не загружается?»](#faq-speak-iframe-not-loading). * **Без `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 с ролью администратора»](https://docs.kinescope.ru/instrukcii-dlya-razrabotchikov/ssylka-dlya-vhoda-v-speak-s-rolyu-administratora/). > **Внимание:** Ссылка с токеном даёт права администратора любому, кто её откроет. Генерируйте её на сервере и показывайте только авторизованному ведущему — не вставляйте в общую страницу, которую видят все. Если в комнате включён зал ожидания, участники из фрейма ждут с сообщением «Организатор видит ваш запрос — ожидайте». Впустить их может только организатор, который уже в комнате: список участников → **«Ожидают входа»** → **«Впустить»**. ## На телефоне и планшете На мобильных устройствах во фрейме сначала появляется экран **«Больше возможностей — в приложении»** со ссылками на магазины приложений и кнопкой **«Продолжить в браузере»**. * **Чтобы подключиться на сайте,** нажмите **«Продолжить в браузере»** — откроется экран входа, камера и микрофон работают во фрейме. Выбор запоминается на неделю. * **Чтобы поставить приложение,** откройте ссылку на комнату в браузере напрямую. Внутри фрейма ссылки на App Store, Google Play и RuStore могут не открыться: магазины запрещают показ своих страниц во фреймах. ## Что во фрейме работает иначе * **Запрос доступа к камере — от имени вашего сайта.** В Chrome в окне запроса будет домен вашей страницы, а не Kinescope. * **«Картинка в картинке» в Chrome не открывается.** Пункт есть в меню **«три точки»**, но по нажатию ничего не происходит: Chrome разрешает такое окно только странице, открытой напрямую, а не во фрейме. Если режим нужен — откройте комнату по прямой ссылке. * **Шумоподавление RNNoise не работает.** Его можно выбрать в **«Настройки»** → **«Аудио»** → **«Шумоподавление»**, но звук пойдёт без этой обработки. **WebRTC AEC** (стоит по умолчанию) и **DPDFNet (16k)** во фрейме работают. * **Ссылка на встречу в комнате — прямая.** В строке **«Ссылка»** во всплывающем окне у названия комнаты стоит и копируется адрес на `speak.kinescope.io`, а не адрес вашей страницы. Если участники должны заходить через сайт, отправляйте им ссылку на свою страницу. ## Решение проблем {{< faq >}} {{< faq-item id="speak-iframe-camera" q="Почему Speak пишет «Камера недоступна», хотя доступ к камере в браузере разрешён?" >}} Так Speak показывает, что браузер не пускает фрейм к устройствам. Вместо «Камера недоступна» может быть просьба «Разрешите Kinescope использовать вашу камеру и микрофон». Проверьте по порядку: 1. **Атрибут `allow`** — в нём должны быть `camera` и `microphone`. Без них браузер блокирует устройства во фрейме, а в консоли появляется `Permissions policy violation: camera is not allowed in this document`. 2. **Заголовок `Permissions-Policy` вашего сайта** — если в нём есть `camera=()` или `microphone=()`, атрибут `allow` не поможет. Разрешите устройства для Speak, например: `Permissions-Policy: camera=(self "https://speak.kinescope.io"), microphone=(self "https://speak.kinescope.io"), display-capture=(self "https://speak.kinescope.io")`. 3. **Протокол** — страница должна открываться по HTTPS. {{< /faq-item >}} {{< faq-item id="speak-iframe-screen-share" q="Почему не запускается показ экрана?" >}} Если кнопка **«Поделиться экраном»** не срабатывает, добавьте `display-capture` в атрибут `allow`. Проверьте также, что заголовок `Permissions-Policy` вашего сайта не запрещает `display-capture`. {{< /faq-item >}} {{< faq-item id="speak-iframe-blank-screen" q="Почему вместо комнаты пустой тёмный экран?" >}} Фрейм загрузился, но Speak не смог запуститься. Возможные причины: 1. **Браузер блокирует сторонние файлы cookie.** Так по умолчанию работает режим инкогнито в Chrome, а в обычном режиме это включается в настройках конфиденциальности. Во фрейме Speak не получает доступа к хранилищу браузера и не запускается. Участнику нужно разрешить сторонние cookie для `speak.kinescope.io` в настройках браузера или открыть встречу по прямой ссылке. 2. **У iframe есть атрибут `sandbox` без `allow-same-origin`.** Уберите `sandbox` или добавьте нужные значения — смотрите [требования к странице](#требования-к-странице). > **Совет:** Поставьте под фреймом ссылку «Открыть встречу в новой вкладке» с прямым адресом комнаты. Так участник подключится, даже если его браузер не пускает Speak во фрейм. {{< /faq-item >}} {{< faq-item id="speak-iframe-error" q="Почему вместо комнаты сообщение об ошибке?" >}} Если во фрейме вместо экрана входа строка вида `error_boundary ID: …`, чаще всего страница открыта по HTTP. На незащищённой странице браузер не даёт доступа к камере и микрофону, и комната не запускается. Переведите страницу на HTTPS. {{< /faq-item >}} {{< faq-item id="speak-iframe-not-loading" q="Почему фрейм не загружается?" >}} Если на месте фрейма пустой прямоугольник или ошибка браузера, откройте консоль браузера (**F12** → **Console**) и найдите сообщение: * **`violates the following Content Security Policy directive: "frame-src …"`** — политика безопасности сайта не пускает внешние фреймы. Добавьте `https://speak.kinescope.io` в директиву `frame-src` заголовка `Content-Security-Policy`. * **`net::ERR_BLOCKED_BY_RESPONSE`** — на странице включена изоляция: заголовки `Cross-Origin-Embedder-Policy` и `Cross-Origin-Opener-Policy`. Speak в такую страницу не встраивается. Уберите эти заголовки со страницы встречи или вынесите встречу на отдельную страницу без них. {{< /faq-item >}} {{< faq-item id="speak-iframe-owner" q="Почему во фрейме «Вы участник», хотя я владелец комнаты?" >}} Это ожидаемое поведение: во фрейме браузер не передаёт Speak данные вашего входа в Kinescope, поэтому запись и управление доступом недоступны. Заходите в комнату по прямой ссылке или по ссылке с токеном — смотрите раздел [«Вход организатора»](#вход-организатора). {{< /faq-item >}} {{< faq-item id="speak-iframe-waiting" q="Почему участник долго ждёт входа?" >}} Если участник видит «Организатор видит ваш запрос — ожидайте» и его не впускают, значит, в комнате включён зал ожидания, а организатора в ней нет. Организатору нужно зайти по прямой ссылке и впустить участника. Если зал ожидания не нужен, выключите его в комнате: **«Управление доступом»** → **«Зал ожидания»**. {{< /faq-item >}} {{< /faq >}} Если проблема не решилась, напишите в [техническую поддержку](https://t.me/kinescope_bot): приложите адрес страницы с фреймом, код комнаты, название браузера и скриншот консоли. ## Что дальше? После встраивания комнаты рекомендуем: 1. **[Что такое Speak](https://docs.kinescope.ru/speak-beta/chto-takoe-speak/)** — возможности видеовстреч, запись и зал ожидания 2. **[Ссылка для входа в Speak с ролью администратора](https://docs.kinescope.ru/instrukcii-dlya-razrabotchikov/ssylka-dlya-vhoda-v-speak-s-rolyu-administratora/)** — вход ведущего через ваш сайт по ссылке с JWT-токеном 3. **[Рестриминг в Speak](https://docs.kinescope.ru/speak-beta/restriming-v-speak/)** — трансляция встречи на внешние площадки прямо из комнаты 4. **[Диагностика и поддержка](https://docs.kinescope.ru/diagnostika-i-podderzhka/)** — что делать, если со встречей что-то не так Остались вопросы? Напишите в [чат поддержки](https://t.me/kinescope_bot) — специалисты помогут!