Решение проблемы с видео в Firefox для BigBlueButton

Дата: 2026-01-08
Проблема: Видео в приложении BigBlueButton работает у пользователей, но на хостинг-сервере в браузере Firefox не показывает видео

Описание проблемы

  • ✅ Видео работает в приложении BigBlueButton для пользователей
  • ❌ Видео не отображается в браузере Firefox на хостинг-сервере
  • ✅ Другие браузеры (Chrome, Edge) работают нормально (предположительно)

Возможные причины

1. Отсутствие необходимых заголовков в Nginx для WebRTC

Firefox более строго относится к заголовкам WebRTC, чем другие браузеры.

2. Проблемы с SSL/TLS конфигурацией

Firefox требует правильную настройку SSL/TLS для WebRTC.

3. Content Security Policy (CSP) заголовки

Слишком строгие CSP заголовки могут блокировать WebRTC в Firefox.

4. WebSocket конфигурация

Неправильная настройка WebSocket может влиять на работу видео в Firefox.

5. CORS заголовки

Отсутствие правильных CORS заголовков может блокировать WebRTC в Firefox.

Решение

Шаг 1: Проверка текущей конфигурации Nginx

Проверьте конфигурацию Nginx в контейнере BigBlueButton:

# Войти в контейнер
lxc exec BBB-CONT22-1 -- bash

# Проверить конфигурацию BigBlueButton
cat /etc/nginx/sites-available/bigbluebutton

# Проверить конфигурацию WebRTC SFU
cat /usr/share/bigbluebutton/nginx/webrtc-sfu.nginx
cat /etc/bigbluebutton/nginx/webrtc-sfu.nginx 2>/dev/null || echo "Файл не существует"

Шаг 2: Обновление конфигурации Nginx для Firefox

Firefox требует дополнительные заголовки и настройки для корректной работы WebRTC.

2.1 Обновление основного конфига BigBlueButton

Создайте или обновите файл /etc/bigbluebutton/nginx/bigbluebutton в контейнере:

lxc exec BBB-CONT22-1 -- bash -c "cat > /etc/bigbluebutton/nginx/bigbluebutton << 'EOF'
# HTTP редирект на HTTPS
server {
    listen 80;
    listen [::]:80;
    server_name school.cdto.life;

    location ^~ / {
        return 301 https://\$server_name\$request_uri;
    }

    # Let's Encrypt challenge
    location ^~ /.well-known/acme-challenge/ {
        allow all;
        default_type \"text/plain\";
        root /var/www/bigbluebutton-default/assets;
    }
}

# HTTPS сервер
server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name school.cdto.life;

    # SSL сертификаты
    ssl_certificate /etc/letsencrypt/live/school.cdto.life/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/school.cdto.life/privkey.pem;

    # SSL настройки для WebRTC (важно для Firefox)
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305';
    ssl_prefer_server_ciphers off;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;

    # HSTS
    add_header Strict-Transport-Security \"max-age=31536000; includeSubDomains\" always;

    # CORS заголовки для Firefox
    add_header Access-Control-Allow-Origin \"*\" always;
    add_header Access-Control-Allow-Methods \"GET, POST, OPTIONS\" always;
    add_header Access-Control-Allow-Headers \"Content-Type, Authorization, X-Requested-With\" always;

    # Content Security Policy для WebRTC (менее строгий для Firefox)
    add_header Content-Security-Policy \"default-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob: https: wss: ws:; media-src 'self' blob: https:; connect-src 'self' https: wss: ws:;\" always;

    # Увеличенные таймауты для WebSocket
    proxy_connect_timeout 7d;
    proxy_send_timeout 7d;
    proxy_read_timeout 7d;

    # Основной прокси для BigBlueButton
    location / {
        proxy_pass http://127.0.0.1:8090;
        proxy_http_version 1.1;

        # Базовые заголовки прокси
        proxy_set_header Host \$host;
        proxy_set_header X-Real-IP \$remote_addr;
        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto \$scheme;

        # WebSocket поддержка (критично для Firefox)
        proxy_set_header Upgrade \$http_upgrade;
        proxy_set_header Connection \"upgrade\";

        # Отключение буферизации для WebSocket
        proxy_buffering off;
        proxy_cache off;

        # Дополнительные заголовки для Firefox WebRTC
        proxy_set_header X-Forwarded-Host \$host;
        proxy_set_header X-Forwarded-Port \$server_port;
    }

    # HTML5 клиент BigBlueButton
    location /html5client {
        proxy_pass http://127.0.0.1:8090/html5client;
        proxy_http_version 1.1;

        proxy_set_header Host \$host;
        proxy_set_header X-Real-IP \$remote_addr;
        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto \$scheme;

        # WebSocket поддержка для HTML5 клиента
        proxy_set_header Upgrade \$http_upgrade;
        proxy_set_header Connection \"upgrade\";

        proxy_buffering off;
        proxy_cache off;

        # Увеличенные таймауты
        proxy_connect_timeout 7d;
        proxy_send_timeout 7d;
        proxy_read_timeout 7d;
    }

    # WebRTC SFU (критично для видео)
    location /bbb-webrtc-sfu {
        proxy_pass http://127.0.0.1:3008;
        proxy_http_version 1.1;

        proxy_set_header Host \$host;
        proxy_set_header X-Real-IP \$remote_addr;
        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto \$scheme;

        # WebSocket заголовки
        proxy_set_header Upgrade \$http_upgrade;
        proxy_set_header Connection \"upgrade\";

        # Отключение буферизации
        proxy_buffering off;
        proxy_cache off;

        # Таймауты для WebSocket
        proxy_connect_timeout 7d;
        proxy_send_timeout 7d;
        proxy_read_timeout 7d;

        # Дополнительные заголовки для Firefox
        proxy_set_header X-Forwarded-Host \$host;
        proxy_set_header X-Forwarded-Port \$server_port;
    }

    # API BigBlueButton
    location /api {
        proxy_pass http://127.0.0.1:8090/api;
        proxy_http_version 1.1;

        proxy_set_header Host \$host;
        proxy_set_header X-Real-IP \$remote_addr;
        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto \$scheme;

        proxy_buffering off;
    }

    # Статические файлы
    location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ {
        proxy_pass http://127.0.0.1:8090;
        proxy_cache_valid 200 1y;
        add_header Cache-Control \"public, immutable\";
        expires 1y;
    }
}
EOF"

2.2 Обновление конфигурации WebRTC SFU

Обновите конфигурацию WebRTC SFU для поддержки Firefox:

lxc exec BBB-CONT22-1 -- bash -c "cat > /etc/bigbluebutton/nginx/webrtc-sfu.nginx << 'EOF'
location /bbb-webrtc-sfu {
    proxy_pass http://127.0.0.1:3008;
    proxy_http_version 1.1;

    proxy_set_header Host \$host;
    proxy_set_header X-Real-IP \$remote_addr;
    proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto \$scheme;

    # WebSocket заголовки (критично для Firefox)
    proxy_set_header Upgrade \$http_upgrade;
    proxy_set_header Connection \"upgrade\";

    # Отключение буферизации
    proxy_buffering off;
    proxy_cache off;

    # Таймауты для WebSocket
    proxy_connect_timeout 7d;
    proxy_send_timeout 7d;
    proxy_read_timeout 7d;

    # Дополнительные заголовки для Firefox WebRTC
    proxy_set_header X-Forwarded-Host \$host;
    proxy_set_header X-Forwarded-Port \$server_port;

    # CORS заголовки для Firefox
    add_header Access-Control-Allow-Origin \"*\" always;
    add_header Access-Control-Allow-Methods \"GET, POST, OPTIONS\" always;
    add_header Access-Control-Allow-Headers \"Content-Type, Authorization, X-Requested-With\" always;
}
EOF"

Шаг 3: Проверка конфигурации BigBlueButton WebRTC SFU

Проверьте и обновите конфигурацию bbb-webrtc-sfu:

# Проверить текущую конфигурацию
lxc exec BBB-CONT22-1 -- cat /etc/bigbluebutton/bbb-webrtc-sfu/production.yml

# Убедиться, что используется правильный домен/IP
lxc exec BBB-CONT22-1 -- grep -E "ip:|announcedIp:" /etc/bigbluebutton/bbb-webrtc-sfu/production.yml

Шаг 4: Перезапуск сервисов

После обновления конфигурации перезапустите сервисы:

# Проверить конфигурацию Nginx
lxc exec BBB-CONT22-1 -- nginx -t

# Перезагрузить Nginx
lxc exec BBB-CONT22-1 -- systemctl reload nginx

# Перезапустить bbb-webrtc-sfu
lxc exec BBB-CONT22-1 -- systemctl restart bbb-webrtc-sfu

# Проверить статус сервисов
lxc exec BBB-CONT22-1 -- systemctl status bbb-webrtc-sfu
lxc exec BBB-CONT22-1 -- systemctl status nginx

Шаг 5: Проверка портов WebRTC

Убедитесь, что порты для WebRTC открыты и правильно проброшены:

# Проверить проброс портов на хосте
lxc config show BBB-CONT22-1 | grep -A 5 devices

# Проверить правила iptables для WebRTC портов
sudo iptables -t nat -L -n | grep -E "16384|32768"

# Проверить открытые порты в контейнере
lxc exec BBB-CONT22-1 -- netstat -tuln | grep -E "16384|3008|8090"

Шаг 6: Проверка в Firefox

  1. Откройте Firefox на хостинг-сервере
  2. Откройте консоль разработчика (F12)
  3. Перейдите на вкладку "Network" (Сеть)
  4. Откройте BigBlueButton
  5. Проверьте:
  6. Запросы к /bbb-webrtc-sfu возвращают статус 101 (Switching Protocols)
  7. Нет ошибок CORS
  8. WebSocket соединения устанавливаются успешно

Шаг 7: Диагностика в Firefox

В Firefox откройте about:webrtc для проверки WebRTC соединений:

  1. В адресной строке Firefox введите: about:webrtc
  2. Проверьте активные WebRTC соединения
  3. Убедитесь, что используются правильные ICE candidates
  4. Проверьте, что TURN/STUN серверы доступны

Дополнительные проверки

Проверка версии Firefox

Убедитесь, что используется актуальная версия Firefox:

# На хостинг-сервере (если Firefox установлен)
firefox --version

# Или через веб-интерфейс: about:support

Проверка разрешений в Firefox

  1. Откройте BigBlueButton в Firefox
  2. Нажмите на значок замка в адресной строке
  3. Убедитесь, что разрешены:
  4. Камера
  5. Микрофон
  6. Автовоспроизведение

Проверка расширений Firefox

Некоторые расширения могут блокировать WebRTC:
- Отключите все расширения
- Попробуйте в режиме приватного просмотра
- Попробуйте в безопасном режиме Firefox

Логи для диагностики

Логи Nginx

# Логи доступа
lxc exec BBB-CONT22-1 -- tail -f /var/log/nginx/access.log

# Логи ошибок
lxc exec BBB-CONT22-1 -- tail -f /var/log/nginx/error.log

Логи bbb-webrtc-sfu

# Логи WebRTC SFU
lxc exec BBB-CONT22-1 -- journalctl -u bbb-webrtc-sfu -f

Логи BigBlueButton

# Общие логи BigBlueButton
lxc exec BBB-CONT22-1 -- journalctl -u bbb-web -f

Альтернативные решения

Решение 1: Использование TURN сервера

Если проблема связана с NAT/firewall, настройте TURN сервер:

# Проверить конфигурацию TURN в bbb-webrtc-sfu
lxc exec BBB-CONT22-1 -- cat /etc/bigbluebutton/bbb-webrtc-sfu/production.yml | grep -i turn

Решение 2: Обновление BigBlueButton

Убедитесь, что используется актуальная версия BigBlueButton:

# Проверить версию
lxc exec BBB-CONT22-1 -- bbb-conf --version

# Обновить (если требуется)
lxc exec BBB-CONT22-1 -- apt update && apt upgrade -y

Решение 3: Проверка SSL сертификата

Firefox более строго проверяет SSL сертификаты:

# Проверить сертификат
lxc exec BBB-CONT22-1 -- openssl s_client -connect school.cdto.life:443 -showcerts

# Проверить цепочку сертификатов
lxc exec BBB-CONT22-1 -- openssl s_client -connect school.cdto.life:443 | openssl x509 -noout -text

Чек-лист проверки

  • [ ] Конфигурация Nginx обновлена с заголовками для Firefox
  • [ ] WebSocket заголовки настроены правильно
  • [ ] CORS заголовки добавлены
  • [ ] Content Security Policy настроен для WebRTC
  • [ ] SSL/TLS конфигурация корректна
  • [ ] Порты WebRTC (16384-32768) открыты и проброшены
  • [ ] Сервис bbb-webrtc-sfu перезапущен
  • [ ] Nginx перезагружен
  • [ ] В Firefox разрешены камера и микрофон
  • [ ] В Firefox нет блокирующих расширений
  • [ ] WebSocket соединения устанавливаются (статус 101)
  • [ ] Нет ошибок CORS в консоли Firefox
  • [ ] about:webrtc показывает активные соединения

Следующие шаги

  1. Применить изменения конфигурации
  2. Перезапустить сервисы
  3. Протестировать в Firefox
  4. Проверить логи на наличие ошибок
  5. При необходимости настроить TURN сервер

Статус: Требует применения изменений и тестирования
Приоритет: Высокий (критично для работы видео в Firefox)