Web Live Streaming on Browsers and Vue vs React Hooks: A Practical Comparison

Web Live Streaming on Web Pages

In a browser‑based live stream the common choice is the HLS (HTTP Live Streaming) protocol, originally proposed by Apple. The server cuts the continuous stream into small MPEG‑TS segments and publishes an extended M3U8 playlist; the client repeatedly downloads the playlist to locate and fetch the next media segment.

HLS drawback: server‑side segmentation introduces roughly 20 seconds of latency, can cause playback stutter, and limits custom business logic on the video element.

HTTP‑FLV wraps RTMP inside HTTP, delivering an unbounded HTTP‑FLV stream.

FLV suffers from browser compatibility issues because it relies on the Media Source Extensions (MSE) API and the fetch+stream API, which iOS browsers do not support.

Open‑source projects that implement FLV playback include flv.js, the Tencent Now live ffmpeg‑player, and the WXInline Player.

Additional live‑streaming tasks such as performance monitoring and dynamic resolution downgrade are also required.

For teams that need to embed live streaming in a web page, this overview provides a solid entry point and a clear picture of the underlying workflow, though concrete implementation must be tailored to specific business requirements.

Vue Composition API vs React Hooks

A Hook in both ecosystems allows developers to reuse logic without writing class components. In React, Hooks such as useState and useCallback let functional components “hook into” state and lifecycle; Vue offers a similar capability through the Composition API’s setup function, which supplies state, computed values, watchers, and lifecycle hooks.

The primary purpose of both mechanisms is logic reuse.

API differences:

React defines explicit Hook functions ( useState, useEffect, useCallback, etc.).

Vue’s Composition API provides a single setup entry point that returns reactive state, computed properties, and lifecycle hooks.

Implementation details diverge: React’s Hook system is built on a linked‑list that executes every Hook in the order of component rendering; each render triggers a fresh execution of all Hooks. Vue registers the component’s reactive proxies once; the setup function runs only a single time, and reactivity is driven by Proxy‑based observation.

Consequences:

Because React re‑executes Hooks on every render, developers must guard against unnecessary work using useCallback or useMemo to avoid performance penalties.

Vue’s one‑time setup execution means that tracking changes to variables often requires explicit watch statements.

Both approaches have comparable advantages and drawbacks; the choice mainly influences development speed and maintenance cost rather than functional capability.