Размещение и запуск

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

Что уже готово

В папке сайта несколько файлов — этого достаточно для работы:

Как это работает в двух словах

Сигнализация. Когда вы открываете ссылку, браузер через бесплатный сервер PeerJS Cloud узнаёт, кто ещё в комнате, и обменивается техническими данными для соединения. Сервер видит только идентификаторы комнаты и не хранит видео, звук или сообщения.

Видео и чат. Дальше браузеры соединяются напрямую (технология WebRTC). Видео, голос, картинки и текст идут от участника к участнику, минуя сервер. Поэтому нет оплаты за трафик и нет хранилища сообщений: закрыли вкладку — переписка исчезла.

Ограничение. Это mesh-схема: каждый отправляет свою картинку каждому. Для 2–5 человек работает отлично, для 10 — только на хорошем интернете (приложение само снижает битрейт при большом числе участников).

Почему не работает во встроенном предпросмотре AutoClaw

У предпросмотра AutoClaw жёсткая политика безопасности (CSP): странице разрешены сетевые соединения только со своего домена. Для видеосвязи нужен внешний сервер знакомства (WebSocket), и браузер его блокирует — поэтому второй участник видит «Не удалось подключиться». Это ограничение хостинга, а не сайта: на Netlify, GitHub Pages и Cloudflare Pages такой политики нет.

Вывод: проверять видео нужно на опубликованном сайте, а не во встроенном предпросмотре. Чат, кнопки и интерфейс в предпросмотре работают.

Про плашку «Made with AutoClaw»

Её вставляет сам хостинг AutoClaw, а не сайт: она приходит из отдельного iframe и автоматически восстанавливается, поэтому убрать её правкой файлов нельзя. Легальные способы: опубликовать сайт на своём домене (Netlify и другие хостинги) — там плашки нет; либо в интерфейсе AutoClaw привязать свой домен или подтвердить сайт (Verified / Certified).

Вариант 1. Netlify Drop (рекомендую)

Самый быстрый путь: перетащить папку в окно браузера и получить готовую ссылку. Регистрация по почте, без карты, без Git. HTTPS включается автоматически.

1. 1
   Откройте Netlify Dropapp.netlify.com/drop — там большое поле «Drag and drop your site folder».
2. 2
   Перетащите папку сайта целикомВажно: index.html должен оказаться в корне, а рядом — папка vendor. Если перетащить саму папку с сайтом, а не её содержимое, Netlify может создать лишний уровень вложенности.
3. 3
   Войдите, чтобы закрепить сайтНажмите Sign up → почта и пароль. Без аккаунта ссылка живёт недолго; после входа сайт остаётся навсегда и появляется в панели.
4. 4
   Смените имяSite configuration → Change site name → например komnata-ivan. Адрес станет https://komnata-ivan.netlify.app.
5. 5
   Проверьте с телефонаОткройте полученный адрес на телефоне, создайте комнату и зайдите по этой же ссылке ещё раз — должны увидеть себя на втором устройстве.

Как обновлять. Сайт в панели Netlify → вкладка Deploys → Deploy manually → снова перетащите папку. Адрес не изменится.

Вариант 2. GitHub Pages

Подходит, если у вас уже есть аккаунт GitHub. Бесплатно для публичных репозиториев, история версий и откат — из коробки.

1. 1
   Аккаунт GitHubЗарегистрируйтесь на github.com/signup.
2. 2
   Новый репозиторийNew repository → имя, например komnata → тип Public → Create repository.
3. 3
   Загрузите сайтAdd file → Upload files. Перетащите index.html, styles.css, app.js, guide.html, favicon.svg и папку vendor. Важно: index.html должен лежать в корне репозитория. Нажмите Commit changes.
4. 4
   Включите PagesSettings → Pages → Source: Deploy from a branch → ветка main, папка / (root) → Save.
5. 5
   Получите адресЧерез 1–2 минуты сайт будет доступен по адресу https://ваш-логин.github.io/komnata/. HTTPS включается автоматически.

Вариант 3. Cloudflare Pages

Тоже бесплатно и без ограничения трафика, но вход в панель из некоторых сетей даёт ошибку авторизации. Если регистрация проходит — вариант отличный.

1. 1
   ЗарегистрируйтесьОткройте dash.cloudflare.com/sign-up, введите почту и пароль. Подтвердите письмо. Платный тариф не нужен.
2. 2
   Создайте проект PagesВ левом меню: Workers & Pages → Create → вкладка Pages → Upload assets.
3. 3
   Назовите проектНапример, komnata. Имя станет адресом: komnata.pages.dev. Нажмите Create project.
4. 4
   Загрузите файлыПеретащите в окно содержимое папки сайта так, чтобы index.html оказался в корне. Нажмите Deploy site.
5. 5
   ПроверьтеЧерез несколько секунд появится адрес вида https://komnata.pages.dev.

Как обновлять. В проекте: Create new deployment → снова перетащите файлы → Deploy.

Свой домен: пошагово

Домен нужен, если провайдер блокирует бесплатные адреса вроде workers.dev и onrender.com. Свой домен в чёрных списках не находится, а всё остальное (Cloudflare, воркеры, сертификат, трафик) остаётся бесплатным.

1. 1
   Купите доменЛюбой регистратор, лишь бы можно было менять NS-серверы. Подойдёт .ru, .com или дешёвый .xyz.
2. 2
   Добавьте его в CloudflareВ панели Cloudflare: Add a domain → введите домен → план Free. Cloudflare покажет два своих NS-сервера.
3. 3
   Замените NS у регистратораВ настройках домена укажите оба NS из Cloudflare вместо старых. Активация — от 5 минут до 24 часов, Cloudflare пришлёт письмо.
4. 4
   Привяжите сайтWorkers & Pages → воркер с сайтом → Settings → Domains & Routes → Add → Custom domain → ваш домен, например example.ru.
5. 5
   Привяжите проксиТам же у воркера komnata-signal → Domains & Routes → Custom domain → signal.example.ru.
6. 6
   Откройте сайтhttps://example.ru — сайт сам возьмёт прокси с signal.example.ru, и VPN больше не понадобится.

Важно: не добавляйте A/CNAME вручную. При привязке Custom domain Cloudflare создаёт DNS-запись сам; если такая запись уже есть и мешает — удалите её.

Другие варианты привязки

• Netlify: Domain management → Add a domain → следуйте подсказкам.
• GitHub Pages: Settings → Pages → Custom domain → домен → включите Enforce HTTPS. В DNS: CNAME на ваш-логин.github.io.

Если работает только через VPN (Россия)

Сам сайт на workers.dev из России открывается, а вот 0.peerjs.com — нет: DNS подменяется, и запрос возвращает 403 с чужого IP. Поэтому без VPN браузеры не могут найти друг друга. Решение — маленький прокси-воркер в вашем же аккаунте Cloudflare: он принимает соединение с российского IP и сам соединяется с PeerJS из сети Cloudflare.

1. 1
   Создайте воркерCloudflare → Workers & Pages → Create → Worker → имя komnata-signal → Deploy.
2. 2
   Вставьте кодОткройте Edit code, удалите шаблон и вставьте код ниже (он целиком в одном блоке). Нажмите Deploy.
3. 3
   Проверьте адресДолжен получиться https://komnata-signal.ivanovmoney336.workers.dev. Именно этот адрес уже прописан в сайте как сервер по умолчанию.

Если назовёте воркер иначе — откройте сайт, нажмите Сервер и впишите новый адрес в поле «Хост». Тогда настройка применится только в вашем браузере; чтобы она работала у всех, адрес нужно поменять в коде.

export default {
  async fetch(request) {
    const url = new URL(request.url);
    const target = new URL(url.pathname + url.search, 'https://0.peerjs.com');

    if ((request.headers.get('Upgrade') || '').toLowerCase() !== 'websocket') {
      return fetch(target.toString(), {
        method: request.method,
        headers: request.headers
      });
    }

    const pair = new WebSocketPair();
    const [client, server] = Object.values(pair);
    server.accept();

    const upstreamResponse = await fetch(target.toString(), {
      headers: { Upgrade: 'websocket' }
    });
    const upstream = upstreamResponse.webSocket;
    if (!upstream) {
      server.close(1011, 'no upstream');
      return new Response('no upstream', { status: 502 });
    }
    upstream.accept();

    server.addEventListener('message', (e) => {
      try { upstream.send(e.data); } catch (err) {}
    });
    upstream.addEventListener('message', (e) => {
      try { server.send(e.data); } catch (err) {}
    });
    server.addEventListener('close', () => { try { upstream.close(); } catch (err) {} });
    upstream.addEventListener('close', () => { try { server.close(); } catch (err) {} });

    return new Response(null, { status: 101, webSocket: client });
  }
};

Если сервер сигнализации недоступен

PeerJS Cloud — бесплатный общий сервис. В редких случаях он перегружен или заблокирован провайдером. Тогда поднимите свой сервер на бесплатном тарифе Render: это небольшой Node.js-процесс, который только знакомит участников.

Что нужно

1. 1
   Аккаунт RenderРегистрация на render.com через GitHub или почту.
2. 2
   Мини-проект в GitHubСоздайте репозиторий с двумя файлами: package.json и server.js (код ниже).
3. 3
   Web Service в RenderNew → Web Service → подключите репозиторий → Build Command: npm install, Start Command: npm start, тариф Free.
4. 4
   Впишите адрес в приложенииНа главной странице нажмите Сервер (справа сверху), укажите хост вида ваш-сервис.onrender.com, порт 443, путь /, ключ peerjs. Сохраните.

package.json

{
  "name": "komnata-signal",
  "private": true,
  "scripts": { "start": "node server.js" },
  "dependencies": { "peerjs": "^1.5.5" }
}

server.js

const { PeerServer } = require('peerjs');

const port = process.env.PORT || 9000;
PeerServer({ port, path: '/' });
console.log('PeerServer on ' + port);

Если видео не соединяется

Сначала исключите простое: оба участника должны быть на опубликованном сайте (не в предпросмотре), в комнате с одним и тем же кодом, и оба должны нажать «Войти в комнату».

Дальше нажмите на счётчик участников «1 / 10» в шапке комнаты — откроется «Состояние связи». Там видно код комнаты, ваш слот, статус сигналинга и по каждому участнику: открыт ли канал данных (data) и установилось ли медиасоединение (pc, ice). Кнопка «Скопировать» копирует отчёт целиком.

• Участник вообще не появился в списке — разные коды комнат, другой сайт или участник остался в окне входа.
• Участник есть, но pc: checking или failed — сети не смогли соединиться напрямую. Нужен TURN-сервер: он работает как ретранслятор для строгого NAT и мобильных операторов.
• pc: connected, но видео нет — проверьте, не выключена ли камера кнопкой, и разрешён ли доступ в браузере.

Как подключить TURN

Бесплатный TURN выдаёт, например, Metered или ExpressTURN. После регистрации вы получите URL вида turn:host:3478, логин и пароль.

В приложении нажмите Сервер (справа сверху) и заполните поля TURN URL, логин, пароль. Настройки сохранятся в этом браузере и применятся при следующем входе в комнату.

Проверка перед отправкой ссылки

Ограничения и как с ними жить

Частые вопросы

Нужно ли что-то платить или где-то регистрировать комнату?

Нет. Комната создаётся в браузере, живёт, пока в ней есть участники, и исчезает, когда все вышли. Никаких баз данных и аккаунтов.

Можно ли сделать постоянную комнату с одним адресом?

Да. Просто не создавайте новую, а откройте существующую ссылку: код комнаты хранится в адресе ?r=код. Если ссылка одна и та же — это одна и та же комната. Ограничение — 10 одновременных участников.

Почему при первом входе тишина?

Браузер блокирует автозапуск звука до первого клика. Нажмите в любое место страницы — звук включится. Также проверьте, что микрофон не выключен кнопкой внизу.

Куда попадают сообщения и картинки?

Никуда: они передаются напрямую между браузерами по шифрованному WebRTC-каналу и хранятся только в памяти вкладки. После выхода история очищается.

Почему скопированная ссылка начинается с autoclaw-local-html://

Так открывается локальный предпросмотр в приложении AutoClaw: это внутренний адрес, он существует только на вашем компьютере и у друзей не откроется. Сайт определяет такой режим и вместо ссылки копирует код комнаты. Настоящая ссылка появляется только на опубликованном сайте — например, https://komnata-ivan.netlify.app/?r=код.

Можно ли встроить это в свой сайт?

Да, это обычные статические файлы. Скопируйте их в подпапку, например /room/, и дайте ссылку на неё. Внешних зависимостей, кроме бесплатного сервера сигнализации, нет.

Вернуться к комнате