WebRTC & WHEP Real-Time Streaming
RUSEON Core implements the standardized WHEP (WebRTC HTTP Egress Protocol), enabling ultra-low latency (< 500ms) live video and audio streaming directly to modern browsers (Chrome, Safari, Firefox, Edge) and mobile clients (iOS, Android) without third-party plugins.
1. WHEP Signaling Flow
2. Browser JavaScript Integration Example
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');
// Attach incoming media track to HTML5 <video>
pc.ontrack = (event) => {
if (event.track.kind === 'video') {
videoElement.srcObject = event.streams[0];
}
};
// Create SDP offer for receiving video and audio
pc.addTransceiver('video', { direction: 'recvonly' });
pc.addTransceiver('audio', { direction: 'recvonly' });
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
// Send SDP Offer to RUSEON WHEP endpoint
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 stream connected successfully!');
}
startWHEP('cam-01');
</script>
</body>
</html>3. WebRTC DataChannel (AI Bounding Box Overlay)
RUSEON Core automatically binds an SCTP DataChannel (label: "metadata") to each WebRTC peer:
javascript
pc.ondatachannel = (event) => {
const dc = event.channel;
if (dc.label === 'metadata') {
dc.onmessage = (msg) => {
const payload = JSON.parse(msg.data);
console.log('Real-time AI detections:', payload.objects);
// Render bounding boxes on HTML5 Canvas overlay
};
}
};4. Configuration in config.yaml
yaml
server:
webrtc:
listen_port: 8555 # Single multiplexed UDP port
nat_1_to_1_ips:
- "203.0.113.50" # Public IPv4/IPv6 address
ice_servers:
- "stun:stun.l.google.com:19302"
ice_transport_policy: "all" # 'all' or 'relay'
turn_username: ""
turn_password: ""