Play RTSP stream

1. Overview

zwplayer is a video player designed specifically for HTML5 web pages, enabling seamless playback of RTSP protocol video streams in modern browsers. This solution primarily addresses the real-time playback requirements of network camera RTSP video streams in modern H5 browsers.

2. Technical Background

Modern browsers (such as Chrome, Edge, Firefox, etc.) have the following limitations:

No support for ActiveX controls
Unable to perform TCP protocol Socket programming via JavaScript

Therefore, current modern browsers cannot natively play RTSP protocol streams.

3. Solution Architecture

This solution works by handing over the RTSP stream requested by the H5 player to a media gateway server (co-processing streaming media server). The media gateway server pulls the camera's RTSP stream and performs protocol conversion (including transcoding when necessary), transforming the RTSP stream into WEBRTC, HTTP-FLV, HLS, or DASH streams that modern browsers support. ZWPlayer then utilizes the MSE interface to achieve plugin-free playback of RTSP video streams in H5 web pages.

3.1 Flow Diagram

rtsp flow diagram

3.2 Process Description

Starting Point: User Request Initiation

H5 Web User Requests Playback → zwplayer Initialization Configuration

User triggers playback request in web page
zwplayer initializes based on configuration parameters
Pass RTSP stream URL directly to zwplayer

Phase 1: Server-side Processing

Request Forwarding: zwplayer sends the RTSP stream URL to the media gateway

Parameters carried: xmc_url, rtsp_over_tcp, rtsp_bypass, etc.

Stream Acquisition: Media gateway pulls the original RTSP stream
Protocol Conversion: Media gateway performs real-time protocol conversion:

RTSP → WEBRTC/HTTP-FLV/HLS/DASH
Based on the rtsp_bypass parameter setting, determines whether transcoding is required

Phase 2: Client-side Playback

Stream Reception: Browser receives the converted streaming media data
MSE Decoding: zwplayer calls the browser MSE interface for decoding
Video Rendering: zwplayer plays the video

3.3 Configuration Parameters

To directly play RTSP protocol streams in H5 browsers, the following parameters need to be passed during zwplayer player construction:

Parameter Name	Type	Default Value	Required	Description
`xmc_url`	String	-	Yes	Media gateway address. The media gateway pulls the camera's `rtsp` stream and converts it to protocols supported by HTML5 players (such as http-flv, webrtc, etc.). Examples: `ws://xmc.zwplayer.cn:8138` or http://xmc.zwplayer.cn:8138. `zwplayer` interacts with the media gateway using the WebSocket protocol.
`rtsp_over_tcp`	Boolean	true	No	RTSP transport protocol selection (true=TCP, false=UDP). RTSP using UDP transport cannot cross network segments. Therefore, if crossing network segments is required, such as forwarding public network camera video, TCP-based RTSP protocol is recommended.
`rtsp_bypass`	Boolean	false	No	Whether to re-encode audio and video
`has_audio`	Boolean	false	No	Whether to retain the audio stream

Network Transmission Recommendations

LAN environment: Can try rtsp_over_tcp: false (UDP transport, lower latency)
Cross-network/Public network: Recommended rtsp_over_tcp: true (TCP transport, better stability)

Performance Optimization Options

rtsp_bypass: true: No re-encoding, lower latency (requires browser support for original encoding format)
rtsp_bypass: false: Force transcoding, better compatibility

4. Complete Example

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="https://cdn.zwplayer.cn/v3/zwplayer/zwplayer.js"></script>
</head>
<body>
    <div id="mse" style="width: 800px; height: 450px;"></div>
    
    <script type="text/javascript">
        // Player configuration
        var streamInfo = {
            playerElm: '#mse',        // Player container element
            url: 'rtsp://admin:ab123456@192.168.1.64:554/main',  // RTSP stream URL
            xmc_url: 'http://xmc.zwplayer.cn:8138',  // Media gateway address, modify according to actual situation
            rtsp_over_tcp: true,     // Use TCP transport
            rtsp_bypass: true,       // Enable encoding bypass
            has_audio: false,        // Disable audio
        };
        var player1 = new ZWPlayer(streamInfo);
    </script>
</body>
</html>

5. Millisecond-level Low Latency Demo

If using webrtc output without transcoding, the overall latency is less than 300 milliseconds, even lower than the camera's own preview latency:

Low latency actual test:

Catalog Navigation