Challenges and Solutions in H5 Live Streaming Development

This article describes the overall process of H5 live streaming, from capturing video on the app side, uploading, server decoding, segment storage, streaming, to playback via a URL on H5 or app clients.

It highlights a typical latency of around 10 seconds and emphasizes the importance of handling this delay in development.

The H5 implementation mainly interacts with the video tag, using an M3U8 URL for playback, but must also manage unpredictable situations such as poor network conditions or the broadcaster turning off the camera, which can cause stream interruptions.

Comments are implemented via WebSocket, which also carries status notifications. The article explains three streaming states (pre‑live, live, ended) and how to switch UI components based on state changes pushed through WebSocket broadcasts.

Because WebSocket messages may be lost, the client periodically re‑broadcasts the live status to ensure synchronization.

For comment handling, the client selects the least‑loaded WebSocket server, implements heartbeat detection, and reconnects when the connection drops, using a 10‑second interval to verify server responses.

The video tag presents compatibility challenges; the author notes that the timeupdate event is the most reliable across browsers, while other events suffer from poor support.

Browser‑specific issues are discussed, such as automatic full‑screen playback in WeChat and QQ browsers and the video element always staying on top, which prevents overlaying DOM elements like comment panels.

To detect a stalled stream, the article proposes monitoring the timeupdate event and comparing currentTime values. Sample code is provided:

var video = document.getElementById('video'); video.pause(); video.play();

Further, a heartbeat and reconnection script is shown to periodically check if the video is stuck and attempt to reload it:

var checkTime = null; var checkLastTime = null; var check = setInterval(function(){ if(checkTime != null){ if(video.paused){ // paused state handling } if(checkTime == checkLastTime || (checkTime== 0 && checkLastTime==0)) { if(!video.paused){ showTip('主播离开一会儿'); video.pause(); video.src = video.src; // reset src for iOS video.play(); } } } checkLastTime = checkTime; }, 10000); video.addEventListener('timeupdate', function(e){ if(checkTime != checkLastTime) hideShowTip(); checkTime = e.target.currentTime; });

The author acknowledges that even with these techniques, some scenarios (e.g., video stuck while the stream has not resumed) still degrade user experience, and there is no perfect solution.

In conclusion, the article shares practical insights and compromises encountered while developing H5 live streaming features, emphasizing the need for creative handling of platform limitations.