Link Search Menu Expand Document

Добавление комнаты на сайт c помощью iFrame

Для добавления на сайт комнаты с трансляцией следует вставить в код страницы элемент iFrame с нужными атрибутами.

Примечание. Для сайта должна быть настроена работа по протоколу HTTPS.

Пример страницы с кодом iFrame:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>livedigital</title>
 </head>
 <body>
  <p>Пример вставки фрейма livedigital</p>
  <iframe
    src="https://edu.livedigital.space/room/<room_alias>?participantName=IvanIvanov&refreshToken=someTokenHere"
    id="userplayer"
    frameborder="0"
    width="880px"
    height="595px"
    allow="camera;microphone;fullscreen;accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture;display-capture;" allowusermedia>
  </iframe>  
 </body>
</html>

Элемент iFrame имеет следующие атрибуты:

  • src - URL для доступа в комнату, где указывается alias созданной комнаты (см. Создание комнат). Также в качестве параметров здесь после символа “?” можно указать имя пользователя (participantName) и его refresh_token (refreshToken) для фоновой авторизации в комнате.
  • id - устаревший атрибут для iFrame, оставленный для совместимости с ранними версиями браузеров, значение может быть любым.
  • frameborder - ширина рамки вокруг фрейма (следует оставить 0 ).
  • width/height - ширина/высота для отображения фрейма на странице.
  • disableSupport - отключает техподдержку livedigital.
  • allow - список разрешений для комнаты, где через знак “;” перечисляются какие возможности будут разрешены для комнаты. Так, в примере кода выше указаны следующие возможности:
    • camera - разрешено использование камеры;
    • microphone - разрешено использование микрофона;
    • fullscreen - разрешено отображение во весь экран;
    • accelerometer - разрешено использование акселерометра (на мобильных устройствах);
    • autoplay - разрешено автоматическое проигрывание;
    • clipboard-write - разрешено копирование в буфер обмена;
    • encrypted-media - разрешено использование так называемого Encrypted Media Extension API, который позволяет управлять проигрыванием медиа контента на странице;
    • display-capture - разрешено использовать захват содержимого экрана;
    • gyroscope - разрешено использование гироскопа;
    • picture-in-picture - разрешено использование режима “картинка-в-картинке”;
    • screen-wake-lock - заблокировано отключение экрана со временем, если открыта страница с включенным элементом iFrame;
    • allowusermedia - отдельно указанное разрешение, указывающее на то, что использование камеры и микрофона пользователем разрешено.

Если для атрибута allow для какого-то разрешения добавить ключевое слово none, то это означает запрет на использование. Например, allow = camera `none` означает, что использование камеры будет запрещено.

Переадресация пользователя из iFrame по окончанию звонка

После завершения сущности звонка (все пользователи покинули комнату/администратор завершил звонок), livedigital отправит в родительское окно iFrame сообщение:

window.parent.postMessage('ld_finish_call');

Чтобы подписаться на это событие, необходимо добавить слушателя message к объекту window, как указано в спецификации:

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {
  if (event.data === 'ld_finish_call') {
    // do something
  }
}