Ctrip Live Streaming Technology Overview and Implementation

Live streaming has grown from PC‑based show and game streams to mobile video streaming, driven by cheap data and the rise of live commerce; Ctrip's live streaming technology addresses this trend by focusing on stream selection, interaction optimization, and rapid iteration.

Live streaming principle – The workflow consists of capture (camera, screen, file), processing (logo, beauty, voice change), encoding (affecting performance and cost), pushing (protocol selection, e.g., RTMP, HLS), distribution (CDN), and playback on the client side. The first four steps are considered the push operation, the fifth is CDN distribution, and the sixth is pull playback.

Encoding – Video encoding compresses video to reduce storage, improve compatibility, and support codecs such as H.264/H.265.

Push protocols – The main protocols compared are:

RTMP: TCP‑based, low latency (1‑5 s), widely supported by encoders, suitable for long‑duration streams, but suffers from buffering under poor network conditions.

HLS: HTTP‑based, higher latency (10‑20 s), easy firewall traversal, good CDN support, but less suitable for interactive scenarios.

WebRTC: UDP‑based, low latency (1‑2 s), simple HTML/JS API, but requires extensive native support and NAT traversal handling.

HTTP‑Flv: HTTP long‑connection, combines low latency of RTMP with HTTP reuse, but caches streams locally and is not ideal for pull scenarios.

Based on the comparison, Ctrip chooses RTMP as the primary protocol because it is the industry standard for encoders, supports long‑duration playback with minimal reconnections, meets the latency requirements of most interactive live scenarios, and benefits from mature open‑source tools (OBS, librtmp, nginx‑rtmp).

Front‑end framework – The live streaming UI is built on a layered architecture:

Lib layer : common utilities, Proxy‑based PushManager and PullManager, EventBus for cross‑platform events, and IMManger for message handling.

Page layer : Activities that instantiate the SDK for push/pull, register listeners, and bridge RN and native components.

View layer : Transparent RNView mounted on top of the native preview to render interactive UI (avatars, comments, gifts, product cards, sharing).

Key Android code snippets illustrate the push and pull setup:

@Override
protected void onCreate(Bundle bundle) {
    super.onCreate(bundle);
    setContentView(R.layout.live_push);
    livePusher = new LivePusher();
    videoView = findViewById(R.id.live_video_preview);
    livePusher.startCameraPreview(videoView);
    String pushUrl = "rtmp://...";
    livePusher.startPusher(pushUrl);
}

@Override
protected void onCreate(Bundle bundle) {
    super.onCreate(bundle);
    setContentView(R.layout.live_pull);
    livePlayer = new LivePlayer();
    playerView = findViewById(R.id.live_video_view);
    String pullUrl = "rtmp://...";
    livePlayer.setPlayerView(playerView);
    livePlayer.startPlay(pullUrl, PLAY_TYPE_LIVE_RTMP);
}

Challenges and solutions – During native‑RN hybrid development, Ctrip faced issues such as audio‑video desynchronization when multiple live rooms were opened, transparent RNView background not applying, and event delivery to RN before its container was ready. Solutions included enforcing a singleton live room, ensuring the fragment background is transparent, and delaying event dispatch until the RN container is initialized.

Conclusion – Live streaming remains a hot technical area; Ctrip adopts a stable native foundation for core streaming functions while leveraging cross‑platform frameworks like ReactNative for rapid UI iteration, balancing performance, maintainability, and development speed.