Unlocking H5 Video Live Streaming: From Capture to Playback

1. Mobile Video Live Streaming Development

Mobile live streaming has exploded, with most internet companies offering their own products. H5 plays a crucial role because it spreads quickly, is easy to publish, and can directly play live video.

The overall architecture consists of three main blocks:

Video Recording End : Typically a PC webcam or mobile camera/microphone, with mobile devices being the primary source.

Video Playback End : Can be a PC player, native mobile player, or an H5 video tag; native players dominate today.

Video Server End : Usually an Nginx server that receives the video stream from the recorder and serves it to the player.

2. H5 Video Recording

WebRTC (Web Real‑Time Communication) enables browsers to capture audio/video, but support is limited on mobile browsers. The basic WebRTC recording flow is:

Call window.navigator.webkitGetUserMedia() to obtain the camera stream.

Convert the stream to window.webkitRTCPeerConnection format.

Transfer the stream to the server via WebSocket.

Because many mobile browsers still lack full WebRTC support, native iOS/Android recording is often preferred for better performance.

3. H5 Live Video Playback

Live playback on H5 typically uses the HLS (HTTP Live Streaming) protocol, which is natively supported on iOS and Android. A simple video tag can play an HLS stream:

<video src="your.m3u8" controls autoplay></video>

1. What is HLS?

HLS splits a live stream into small HTTP‑based segments. The .m3u8 playlist file contains metadata and references to .ts segment files, which hold the actual video data.

2. HLS Request Flow

Client requests the .m3u8 URL via HTTP.

Server returns a playlist with a few segment URLs.

Client sequentially fetches each .ts segment and plays them.

3. HLS Latency

Latency depends on segment length and playlist size; a typical configuration (5‑second segments, 5‑segment playlist) yields ~25 seconds delay. Reducing segment duration lowers latency but increases request overhead.

4. iOS Audio/Video Capture

Video Encoding : Raw video from the iPhone camera is encoded (e.g., H.264) before upload.

Audio Encoding : Audio is encoded (e.g., AAC) similarly.

Codec Standards : H.264 for video, AAC for audio are supported by HLS.

Use AVCaptureSession and AVCaptureDevice to capture raw streams.

Encode video with H.264 and audio with AAC using built‑in iOS libraries.

Package encoded streams into packets.

Establish an RTMP connection and push the stream to the server.

5. RTMP and Server Setup

RTMP (Real‑Time Messaging Protocol) offers lower latency than HLS but requires Flash on browsers, making it unsuitable for iOS. It is commonly used for pushing streams to the server.

To build an RTMP server:

Install Nginx.

Add the nginx‑rtmp‑module (e.g., https://github.com/arut/nginx-rtmp-module ).

Configure nginx.conf with an RTMP block and set rtmp://IP:1935/hls/mystream as the push URL.

Restart Nginx.

6. User Interaction in Live Streams

Gift sending – implemented with DOM and CSS3 animations.

Comments/Danmu – real‑time messages via WebSocket (fallback to long‑polling), with animation and collision detection.

7. Summary

While native playback offers lower latency, H5 remains essential for its rapid distribution, ease of use, and cross‑platform reach. Combining H5 video tags, HLS for streaming, and RTMP for low‑latency push creates a flexible live‑streaming solution for modern mobile applications.