Skip to content

WebRTC и WHEP стриминг в реальном времени ​

RUSEON Core реализует стандартный протокол WHEP (WebRTC HTTP Egress Protocol), обеспечивающий ультранизкую задержку (< 500 мс) при воспроизведении видео в браузерах (Chrome, Safari, Firefox, Edge) и мобильных приложениях.


1. Поток сигнализации WHEP ​


2. Пример интеграции в JavaScript ​

html
<!DOCTYPE html>
<html>
<head>
  <title>RUSEON WebRTC WHEP Player</title>
</head>
<body>
  <video id="videoPlayer" autoplay playsinline muted controls style="width: 100%; max-width: 960px;"></video>

  <script>
    async function startWHEP(cameraId) {
      const pc = new RTCPeerConnection({
        iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
      });

      const videoElement = document.getElementById('videoPlayer');

      // Привязка медиатрека к <video>
      pc.ontrack = (event) => {
        if (event.track.kind === 'video') {
          videoElement.srcObject = event.streams[0];
        }
      };

      // Добавление трансиверов
      pc.addTransceiver('video', { direction: 'recvonly' });
      pc.addTransceiver('audio', { direction: 'recvonly' });

      const offer = await pc.createOffer();
      await pc.setLocalDescription(offer);

      // Отправка SDP Offer на эндпоинт WHEP
      const response = await fetch(`http://localhost:8080/stream/webrtc/whep/${cameraId}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/sdp'
        },
        body: offer.sdp
      });

      if (!response.ok) {
        throw new Error(`WHEP failed with status ${response.status}`);
      }

      const answerSdp = await response.text();
      await pc.setRemoteDescription({ type: 'answer', sdp: answerSdp });
      console.log('WebRTC WHEP поток успешно подключен!');
    }

    startWHEP('cam-01');
  </script>
</body>
</html>

3. WebRTC DataChannel (Слой рамок детекций ИИ) ​

RUSEON Core автоматически открывает SCTP DataChannel (label: "metadata"):

javascript
pc.ondatachannel = (event) => {
  const dc = event.channel;
  if (dc.label === 'metadata') {
    dc.onmessage = (msg) => {
      const payload = JSON.parse(msg.data);
      console.log('Обнаруженные объекты ИИ:', payload.objects);
      // Отрисовка рамок на Canvas
    };
  }
};

4. Конфигурация в config.yaml ​

yaml
server:
  webrtc:
    listen_port: 8555          # Единый мультиплексированный порт UDP
    nat_1_to_1_ips:
      - "203.0.113.50"         # Публичный IP-адрес сервера
    ice_servers:
      - "stun:stun.l.google.com:19302"
    ice_transport_policy: "all" # 'all' или 'relay'
    turn_username: ""
    turn_password: ""

Связанная документация ​

Released under the MIT License.