Как встроить живую камеру на сайт

Код для встраивания

Откройте камеру в кабинете и скопируйте код для встраивания. Он выглядит так — PUBLIC_ID это публичный идентификатор камеры, по нему не видно ни IP, ни пароля камеры:

<iframe src="https://live.videocamera.ge/embed/PUBLIC_ID"
  style="width:100%;aspect-ratio:16/9;border:0"
  title="Live camera"
  allow="autoplay;fullscreen;picture-in-picture" allowfullscreen></iframe>

Вставьте код в HTML страницы там, где должно быть видео. Замените title описанием камеры (например, «Батумский бульвар, онлайн»), чтобы экранные дикторы и поисковики понимали, что в кадре.

Размер на любом экране

width:100% растягивает плеер на всю ширину блока, а aspect-ratio:16/9 сам рассчитывает высоту — и на телефоне, и на компьютере. Для камеры 4:3 укажите aspect-ratio:4/3. Некоторые старые конструкторы вырезают aspect-ratio — тогда используйте классический вариант с обёрткой (56.25% = 9 ÷ 16; для 4:3 — 75%):

<div style="position:relative;width:100%;padding-top:56.25%">
  <iframe src="https://live.videocamera.ge/embed/PUBLIC_ID"
    style="position:absolute;top:0;left:0;width:100%;height:100%;border:0"
    title="Live camera" loading="lazy"
    allow="autoplay;fullscreen;picture-in-picture" allowfullscreen></iframe>
</div>

loading="lazy" говорит браузеру загружать плеер, только когда посетитель до него доскроллит. Полезно, если на странице несколько камер.

Автозапуск и беззвучный старт

Все современные браузеры (Chrome, Safari, Firefox, Edge) запускают видео автоматически, только если оно без звука. Поэтому наш плеер стартует беззвучно: посетитель открывает страницу и сразу видит трансляцию. Несколько правил:

• Не удаляйте из кода allow="autoplay;fullscreen;picture-in-picture" — без него автозапуск и полноэкранный режим внутри фрейма могут блокироваться.
• На iPhone режим энергосбережения или экономии трафика иногда отключает автозапуск. Тогда посетитель видит кнопку Play и включает видео одним касанием.
• Отключить автозапуск, скрыть брендинг и привязать к названию камеры рекламную ссылку можно в настройках встраивания в кабинете.

Конструкторы сайтов

• Tilda: добавьте блок T123 («HTML-код», категория «Другое»), вставьте код и опубликуйте. В превью редактора видео может не отображаться — проверяйте на опубликованной странице.
• Wix: Add Elements → Embed Code → Embed HTML. Выберите «Website address» и вставьте прямую ссылку на камеру или «Code» и вставьте код. Wix сам не меняет размер элемента — растяните рамку до 16:9 вручную.
• WordPress: проще всего наш плагин для WordPress с шорткодом. Без него используйте блок «Custom HTML». Учтите: пользователям без права unfiltered_html (например, в multisite) WordPress вырезает iframe — у шорткода этой проблемы нет.
• Joomla: стандартный редактор TinyMCE обычно удаляет iframe. Либо уберите iframe из списка Prohibited Elements в System → Plugins → Editor - TinyMCE, либо создайте модуль Custom и вставьте код с выключенным редактором (Toggle Editor).

Прямая ссылка

Нет сайта или хотите поделиться трансляцией в соцсетях, мессенджере или через QR-код? Скопируйте в кабинете прямую ссылку на камеру — она открывает тот же плеер на отдельной странице. Помните, что ссылка работает как ключ: если она попала не к тем людям, отзовите или обновите её в кабинете, и старая сразу перестанет работать.

Только на вашем сайте: разрешённые домены

Кто угодно может скопировать ваш код и вставить на свой сайт. Чтобы этого не случилось, укажите в настройках камеры разрешённые домены — браузер не покажет плеер на чужом сайте (это обеспечивает заголовок frame-ancestors). Пишите полный адрес с https:// и оба варианта, если сайт открывается по обоим:

https://example.ge
https://www.example.ge

В конструкторах добавьте и тот домен, на котором сайт реально открывается (например, поддомен Tilda или Wix, если свой домен ещё не подключён). Как ограничить просмотр паролем, подтверждением email или расписанием — в статье Защита трансляции.