react实现直播
React 实现直播功能
在 React 中实现直播功能通常需要结合流媒体协议（如 RTMP、HLS、WebRTC）和第三方库或服务。以下是几种常见的方法：
使用 WebRTC 实现实时直播
WebRTC 是一种支持浏览器间实时通信的技术，适合低延迟直播场景。可以通过 react-webrtc 或原生 WebRTC API 实现：
import { useRef, useEffect } from 'react';
function LiveStream() {
const videoRef = useRef(null);
useEffect(() => {
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
videoRef.current.srcObject = stream;
// 这里需要将 stream 发送到服务器或其他客户端
});
}, []);
return <video ref={videoRef} autoPlay muted />;
}集成 HLS/RTMP 播放器
对于高兼容性直播，可使用 HLS 协议。集成 video.js 或 hls.js 播放流媒体：
import Hls from 'hls.js';
function HLSPlayer({ url }) {
const videoRef = useRef(null);
useEffect(() => {
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(url);
hls.attachMedia(videoRef.current);
}
}, [url]);
return <video ref={videoRef} controls />;
}使用第三方直播服务
快速集成直播功能可考虑云服务如 AWS IVS、腾讯云直播或 Agora：
import AgoraRTC from 'agora-rtc-sdk-ng';
function AgoraLive() {
const client = AgoraRTC.createClient({ mode: 'live', codec: 'h264' });
const join = async () => {
await client.join("APPID", "CHANNEL", "TOKEN");
const localTrack = await AgoraRTC.createMicrophoneAndCameraTracks();
await client.publish(localTrack);
};
return <button onClick={join}>开始直播</button>;
}关键注意事项
- 协议选择：移动端优先使用 HLS，低延迟场景用 WebRTC
- CDN 支持：RTMP 推流+HLS 拉流是常见组合
- 权限处理：浏览器需要摄像头/麦克风访问权限
- 错误处理：网络中断、编解码器不支持等情况需兼容
服务端配合
直播通常需要服务端支持：
- 信令服务器：用于 WebRTC 的 SDP 交换
- 媒体服务器：如 Nginx-RTMP、SRS 处理流分发
- 转码服务：将流转换为不同分辨率/协议
完整实现建议参考各协议官方文档和对应 SDK 的 React 集成示例。
