Playing WebRTC Streams - Ant Media Server

Overview

Playing WebRTC streams allows you to receive live video and audio from Ant Media Server with ultra-low latency. The player automatically handles adaptive bitrate streaming, network fluctuations, and quality adjustments.

Quick Start

Basic Player Example

// Initialize WebRTC Adaptor for playback
var webRTCAdaptor = new WebRTCAdaptor({
    websocket_url: "wss://your-server.com:5443/WebRTCAppEE/websocket",
    mediaConstraints: {
        video: false,
        audio: false
    },
    peerconnection_config: {
        iceServers: [{urls: "stun:stun1.l.google.com:19302"}]
    },
    sdp_constraints: {
        OfferToReceiveAudio: true,
        OfferToReceiveVideo: true
    },
    remoteVideoId: "remoteVideo",
    isPlayMode: true,
    callback: function(info, obj) {
        if (info == "initialized") {
            console.log("WebRTC Adaptor initialized");
        }
        else if (info == "play_started") {
            console.log("Playing stream: " + obj.streamId);
        }
        else if (info == "play_finished") {
            console.log("Playback finished");
        }
    },
    callbackError: function(error, message) {
        console.log("Error: " + error + " Message: " + message);
    }
});

// Start playing
var streamId = "stream123";
webRTCAdaptor.play(streamId);

HTML Setup

<!DOCTYPE html>
<html>
<head>
    <title>WebRTC Player</title>
</head>
<body>
    <video id="remoteVideo" autoplay controls playsinline></video>
    
    <script src="https://your-server.com:5443/WebRTCAppEE/js/webrtc_adaptor.js"></script>
    <script>
        // Initialize player (see code above)
    </script>
</body>
</html>

Configuration Options

SDP Constraints for Playback

sdp_constraints: {
    OfferToReceiveAudio: true,  // Receive audio track
    OfferToReceiveVideo: true   // Receive video track
}

Audio-Only Playback

sdp_constraints: {
    OfferToReceiveAudio: true,
    OfferToReceiveVideo: false
}

Video-Only Playback

sdp_constraints: {
    OfferToReceiveAudio: false,
    OfferToReceiveVideo: true
}

Player Mode Flag

isPlayMode: true  // Set to true for playback, false for publishing

Callbacks

Playback Callback Events

callback: function(info, obj) {
    switch(info) {
        case "initialized":
            // WebRTC Adaptor ready for playback
            console.log("Player initialized");
            break;
            
        case "play_started":
            // Playback successfully started
            console.log("Stream ID: " + obj.streamId);
            break;
            
        case "play_finished":
            // Playback stopped or stream ended
            console.log("Playback finished");
            break;
            
        case "newStreamAvailable":
            // New stream track available
            console.log("New track: " + obj.track.id);
            break;
            
        case "ice_connection_state_changed":
            // ICE connection state updated
            console.log("ICE state: " + obj.state);
            break;
            
        case "updated_stats":
            // Updated playback statistics
            console.log("Bitrate: " + obj.videoBitrate);
            console.log("Packet Lost: " + obj.videoPacketsLost);
            console.log("RTT: " + obj.currentRoundTripTime);
            break;
            
        case "data_received":
            // Data channel message received
            console.log("Data: " + obj.data);
            break;
    }
}

Error Handling

callbackError: function(error, message) {
    switch(error) {
        case "no_stream_exist":
            console.log("Stream does not exist: " + message);
            // Retry or show message to user
            break;
            
        case "notSetRemoteDescription":
            console.log("Failed to set remote description");
            break;
            
        case "WebSocketNotConnected":
            console.log("WebSocket not connected");
            // Attempt reconnection
            break;
            
        case "playTimeoutError":
            console.log("Play timeout - stream may not be available");
            break;
            
        case "ice_connection_state_failed":
            console.log("ICE connection failed");
            // Stop and restart playback
            break;
    }
}

Adaptive Bitrate Playback

Automatic Quality Selection

The server automatically selects the best quality based on network conditions:

// Enable adaptive bitrate (enabled by default)
var webRTCAdaptor = new WebRTCAdaptor({
    // ... other config
    callback: function(info, obj) {
        if (info == "updated_stats") {
            console.log("Current bitrate: " + obj.videoBitrate);
            console.log("Resolution: " + obj.resolutionHeight + "p");
        }
    }
});

Force Specific Quality

Override automatic selection to force a specific resolution:

// Force 720p quality
var streamId = "stream123";
var resolutionHeight = 720; // 360, 480, 720, 1080, etc.

webRTCAdaptor.forceStreamQuality(streamId, resolutionHeight);

Get Available Resolutions

// Get available ABR resolutions for a stream
webRTCAdaptor.getStreamInfo(streamId);

// Callback will receive stream info
callback: function(info, obj) {
    if (info == "streamInformation") {
        console.log("Available resolutions:");
        obj.streamInfo.forEach(function(stream) {
            console.log(stream.streamHeight + "p - " + stream.videoBitrate + " kbps");
        });
    }
}

Multi-Track Playback

Playing Multiple Tracks

// Play main stream with additional tracks
var streamId = "stream123";
var trackIds = ["track1", "track2"];

webRTCAdaptor.play(streamId, null, null, trackIds);

// Handle new tracks in callback
callback: function(info, obj) {
    if (info == "newStreamAvailable") {
        // Attach track to video element
        var video = document.getElementById("video-" + obj.trackId);
        video.srcObject = new MediaStream([obj.track]);
    }
}

Playing with Subtracks

// Play specific subtracks (for conference room scenarios)
var streamId = "room123";
var trackIds = ["participant1", "participant2", "participant3"];

webRTCAdaptor.play(streamId, null, null, trackIds);

Advanced Features

Playing with Token Authentication

var streamId = "stream123";
var token = "your-play-token";

webRTCAdaptor.play(streamId, token);

Playing with Subscriber Information

var streamId = "stream123";
var token = null;
var subscriberId = "subscriber123";
var subscriberCode = "code456";
var trackIds = [];
var metaData = {userId: "user123", location: "US"};

webRTCAdaptor.play(streamId, token, subscriberId, subscriberCode, 
                   trackIds, metaData);

Enable Data Channel

var webRTCAdaptor = new WebRTCAdaptor({
    // ... other config
    dataChannelEnabled: true,
    callback: function(info, obj) {
        if (info == "data_received") {
            console.log("Data received: " + obj.data);
        }
    }
});

Server-Side API

IWebRTCClient Interface

The server-side client interface handles media transmission:

public interface IWebRTCClient {
    // Send video packet to client
    void sendVideoPacket(ByteBuffer videoPacket, boolean isKeyFrame, 
                        long timestamp, int frameRotation, 
                        List<NaluIndex> naluIndices, String trackId);
    
    // Send audio packet to client
    void sendAudioPacket(ByteBuffer audioPacket, long timestamp, String trackId);
    
    // Set remote SDP
    void setRemoteDescription(SessionDescription sdp);
    
    // Add ICE candidate
    void addIceCandidate(IceCandidate iceCandidate);
    
    // Start streaming
    void start();
    
    // Stop streaming
    void stop();
    
    // Get target bitrate
    int getTargetBitrate();
    
    // Force stream quality
    boolean forceStreamQuality(int streamHeight, String subtrackId);
}

Quality Control

The server adapts streaming quality automatically:

// Adapt streaming quality based on network
adaptor.adaptStreamingQuality(streamId, webRTCClient, codec);

// Force specific quality
adaptor.forceStreamingQuality(streamId, webRTCClient, streamHeight);

// Get client statistics
List<WebRTCClientStats> stats = adaptor.getWebRTCClientStats(streamId);
for (WebRTCClientStats stat : stats) {
    int bitrate = stat.getMeasuredBitrate();
    int packetLoss = stat.getVideoSentStats().getPacketLost();
    int rtt = stat.getVideoSentStats().getRoundTripTime();
}

Player Statistics

Real-Time Statistics

// Enable statistics callback
var webRTCAdaptor = new WebRTCAdaptor({
    // ... other config
    callback: function(info, obj) {
        if (info == "updated_stats") {
            displayStats(obj);
        }
    }
});

function displayStats(stats) {
    console.log("=== Playback Statistics ===");
    console.log("Video Bitrate: " + stats.videoBitrate + " kbps");
    console.log("Audio Bitrate: " + stats.audioBitrate + " kbps");
    console.log("Packets Lost: " + stats.videoPacketsLost);
    console.log("Frames Dropped: " + stats.framesDropped);
    console.log("Resolution: " + stats.resolutionWidth + "x" + stats.resolutionHeight);
    console.log("Frame Rate: " + stats.frameRate + " fps");
    console.log("RTT: " + stats.currentRoundTripTime + " ms");
}

Best Practices

1. Handle Stream Availability

function playStream(streamId) {
    // Check if stream exists before playing
    fetch('https://server.com:5443/WebRTCAppEE/rest/v2/broadcasts/' + streamId)
        .then(response => response.json())
        .then(data => {
            if (data.status === "broadcasting") {
                webRTCAdaptor.play(streamId);
            } else {
                console.log("Stream is not live yet");
            }
        });
}

2. Auto-Reconnect on Failure

var reconnectInterval;

callbackError: function(error, message) {
    if (error == "ice_connection_state_failed" || error == "playTimeoutError") {
        // Attempt reconnection after delay
        reconnectInterval = setTimeout(function() {
            console.log("Attempting to reconnect...");
            webRTCAdaptor.stop(streamId);
            webRTCAdaptor.play(streamId);
        }, 3000);
    }
}

3. Clean Up Resources

function stopPlayback() {
    // Stop playing
    webRTCAdaptor.stop(streamId);
    
    // Close WebSocket
    webRTCAdaptor.closeWebSocket();
    
    // Clear video element
    document.getElementById("remoteVideo").srcObject = null;
}

4. Handle Mobile Browsers

// iOS Safari requires user interaction to play
var playButton = document.getElementById("playButton");
playButton.addEventListener("click", function() {
    webRTCAdaptor.play(streamId);
});

Troubleshooting

Common Issues

Issue: Video not playing

Check if stream exists and is live
Verify remoteVideoId matches video element ID
Ensure autoplay is enabled on video element
Check browser autoplay policies (may require muted or user interaction)

Issue: High latency

Check network conditions and bandwidth
Verify WebRTC ports are not blocked
Consider using TURN server if behind restrictive firewall
Check server load and available resources

Issue: Playback keeps buffering

Network bandwidth insufficient for stream quality
Let adaptive bitrate algorithm adjust quality
Check for packet loss in statistics

Next Steps

Publishing Streams

Learn how to publish WebRTC streams

Peer-to-Peer

Build P2P applications with WebRTC

​Overview

​Quick Start

​Basic Player Example

​HTML Setup

​Configuration Options

​SDP Constraints for Playback

​Audio-Only Playback

​Video-Only Playback

​Player Mode Flag

​Callbacks

​Playback Callback Events

​Error Handling

​Adaptive Bitrate Playback

​Automatic Quality Selection

​Force Specific Quality

​Get Available Resolutions

​Multi-Track Playback

​Playing Multiple Tracks

​Playing with Subtracks

​Advanced Features

​Playing with Token Authentication

​Playing with Subscriber Information

​Enable Data Channel

​Server-Side API

​IWebRTCClient Interface

​Quality Control

​Player Statistics

​Real-Time Statistics

​Best Practices

​1. Handle Stream Availability

​2. Auto-Reconnect on Failure

​3. Clean Up Resources

​4. Handle Mobile Browsers

​Troubleshooting

​Common Issues

​Next Steps