Exploring Web Live Streaming: From Web 1.0 to 2.1 – Architecture, AI Integration, and Refactoring

Overview – The author investigates whether web, H5, and mini‑programs can support live streaming, using a school‑wide live‑class system as a testbed. The study highlights the advantages of a zero‑install, instantly‑usable web approach for rapid iteration and experimental business scenarios.

Web 1.0 – Initial Release – A month‑long effort produced a minimal live‑streaming product supporting RTMP playback, instant chat, voting, and gifting. Although the project never launched, the team continued development.

Web 1.1 – Adding AI and RTC – The biggest challenges were AI speech detection, RTC for co‑hosting, and aligning interactive features with the PC client.

For AI speech detection the hark plugin was used:

this._speechEvents = hark(this._stream);
this._speechEvents.on('speaking', () => {
  // createLog('检测到说话')
});
this._speechEvents.on('stopped_speaking', () => {
  // createLog('检测到停止说话')
});
this._speechEvents.on('volume_change', (db) => {
  // handle volume change
});

Audio processing and MP3 encoding were handled with lamejs and the Web Audio API:

const audioCtx = this._audioCtx = new AudioCtx();
this._audioStream = audioCtx.createMediaStreamSource(this._stream);
this._audioRecorder = audioCtx.createScriptProcessor(16384, 1, 1);
this._audioRecorder.onaudioprocess = (e) => {
  const buffer = e.inputBuffer.getChannelData(0);
  this._encodeMp3Worker.postMessage({
    type: 'encode',
    payload: buffer
  });
};

The RTC capability was quickly added by reusing the company’s existing RTC SDK ( @xes/weblive-framework/components/base/players/libs/rtcengine_js_xueersi-1.5.0 ), enabling real‑time co‑hosting.

Web 2.0 – Refactoring and Framework Design – Growing code complexity and team friction prompted a full refactor. A modular live‑streaming framework was created, encapsulating player, chat, signaling, logging, and message handling. The framework is published as an npm package with base classes for interaction, messaging, and initialization, allowing business‑specific extensions.

The refactored framework later powered multiple projects (PHP conference, overseas live streams, lightweight half‑body streams) and supports RTMP, RTC, Tuya, mini‑program, and H5‑RTC playback.

Web 2.1 – Module‑Level Refactor – Focused on signaling processing, future courseware, voice Q&A, and voice assessment modules, and upgraded ESLint configuration ( @xes/eslint-cof ). A new interaction‑message flow diagram was introduced.

Conclusion – The experiments demonstrate that web technologies can indeed deliver live‑streaming with performance comparable to native solutions in many scenarios. The author thanks the development team and invites further discussion on H5 and mini‑program live streaming.