Evolution of a New Web Live Streaming System: From Flash to HTML5, AI Integration, and Modular Refactoring

The traditional Flash‑based web live streaming approach became obsolete as browsers dropped Flash support, prompting a migration to HTML5 video tags and the initiation of a new architecture based on the school’s large‑class live streaming system.

The first "entrepreneurial" version was built with an RTMP/HTTP‑Flv player, WebSocket‑based instant chat, and reused signaling channels, but despite a month of development it failed to launch due to various issues.

To address the most challenging problem—web AI capabilities—the team adopted the hark npm plugin for voice activity detection. Sample code:

this._speechEvents = hark(this._stream);
this._speechEvents.on('speaking', () => { /* createLog('检测到说话') */ });
this._speechEvents.on('stopped_speaking', () => { /* createLog('检测到停止说话') */ });
this._speechEvents.on('volume_change', (db) => { /* createLog('检测到音量变化') */ });

Audio encoding was handled with lamejs inside a Web Worker, following a four‑step pipeline: capture microphone stream, send to the worker for MP3 encoding, receive a Blob in the main thread, and transmit it via WebSocket to the AI service for recognition.

Real‑time voice/video communication was added by reusing the corporate RTC SDK, enabling WebRTC‑based instant interactions.

Aligning the web client with the PC client required extensive UI replication, task splitting, and coordination among many developers, leading to code bloat and quality control challenges.

A systematic upgrade refactored the project into a reusable live‑streaming framework packaged as an npm module. Base classes were introduced for player, chat, signaling, logging, and message management, allowing business logic to be implemented by overriding these bases.

The refactored framework quickly powered multiple downstream projects (PHP conference streaming, overseas PC streaming, lightweight half‑body streaming, mini‑program streaming) and now supports RTMP, RTC, Tuya, mini‑program, and H5‑RTC playback.

Further modular refactoring focused on the signaling module and upcoming interactive features such as courseware, voice Q&A, and voice assessment. The team introduced intermediate classes to decouple interactions, split control logic from business implementation, and unified code style with ESLint. Sample audio processing code:

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 });
};

To ensure stability during the 1.0→2.0 upgrade, the team applied technical measures (unit tests for core modules, internal log‑analysis and alert system, gray‑release strategy) and process measures (team-wide technical briefings, module‑owner design reviews, daily stand‑ups, pre‑release self‑testing, release checklists, on‑call duty, and post‑mortem meetings).

Self‑test data shows most metrics comparable to native performance, and future work will extend the live‑class solution to mini‑programs, H5, and Flutter.