react实现直播功能
使用 React 实现直播功能
技术选型
- 视频流协议：HLS (HTTP Live Streaming) 或 WebRTC
- 播放器库：video.js、hls.js 或 react-player
- 后端服务：Node.js + FFmpeg（转码）、第三方直播云服务（如阿里云直播、腾讯云直播）
前端实现步骤
集成播放器库（以 react-player 为例）
import React from 'react';
import ReactPlayer from 'react-player';
const LiveStream = () => {
return (
<ReactPlayer
url="http://example.com/live/stream.m3u8" // HLS 流地址
playing
controls
width="100%"
height="auto"
/>
);
};处理 WebRTC 直播（需后端信令服务）
const LiveWebRTC = () => {
const videoRef = useRef();
useEffect(() => {
const pc = new RTCPeerConnection();
// 添加信令服务器交互代码
pc.ontrack = (e) => {
videoRef.current.srcObject = e.streams[0];
};
}, []);
return <video ref={videoRef} autoPlay playsInline />;
};后端关键处理
FFmpeg 转码命令示例
ffmpeg -i rtmp://input_stream -c:v libx264 -preset ultrafast -f hls -hls_time 4 -hls_list_size 6 output.m3u8Node.js 伪代码（WebRTC 信令）
socket.on('offer', async (offer) => {
const pc = new RTCPeerConnection();
await pc.setRemoteDescription(offer);
const answer = await pc.createAnswer();
socket.emit('answer', answer);
});第三方服务集成（以阿里云为例）
- 配置推流域名和播放域名
- 生成推流地址：
rtmp://push-domain/app/stream?auth_key - 生成播放地址（HLS）：
http://play-domain/app/stream.m3u8
优化建议
- 使用 CDN 加速直播流分发
- 添加弹幕功能：通过 WebSocket 实时收发消息
- 实现自适应码率：根据网络状况切换不同清晰度
- 加入错误处理：网络中断重连、播放失败提示
注意事项
- HLS 有至少 10 秒延迟，低延迟场景需用 WebRTC
- 浏览器兼容性：Safari 对 HLS 支持最好，Chrome 需要 hls.js
- 移动端需添加
playsInline属性 - 跨域问题需配置 CORS 头
Access-Control-Allow-Origin
