react如何使用agora
使用 React 集成 Agora 视频通话 SDK
安装 Agora SDK 在 React 项目中安装 Agora RTC SDK：
npm install agora-rtc-sdk初始化 Agora 客户端 创建一个 Agora 客户端实例并配置：
import AgoraRTC from 'agora-rtc-sdk';
const client = AgoraRTC.createClient({ mode: 'rtc', codec: 'vp8' });设置事件监听 处理连接状态和远程流事件：
client.on('stream-added', (evt) => {
client.subscribe(evt.stream, (err) => console.log('订阅失败', err));
});
client.on('stream-subscribed', (evt) => {
const stream = evt.stream;
stream.play('remote-video');
});加入频道 实现用户加入频道逻辑：
const appId = 'YOUR_APP_ID';
const channel = 'test_channel';
const token = null; // 或用临时token
client.init(appId, () => {
client.join(token, channel, null, (uid) => {
console.log('用户加入成功，UID:', uid);
});
});本地流处理 创建并发布本地视频流：
const localStream = AgoraRTC.createStream({
audio: true,
video: true,
screen: false
});
localStream.init(() => {
localStream.play('local-video');
client.publish(localStream, (err) => console.log('发布失败', err));
});组件实现示例 React 组件封装示例：
import React, { useEffect, useRef } from 'react';
function VideoCall() {
const localVideoRef = useRef();
const remoteVideoRef = useRef();
useEffect(() => {
// 初始化代码放在这里
return () => {
// 组件卸载时清理
client.leave();
localStream.close();
};
}, []);
return (
<div>
<div ref={localVideoRef} id="local-video"></div>
<div ref={remoteVideoRef} id="remote-video"></div>
</div>
);
}错误处理 添加必要的错误处理逻辑：
client.on('error', (err) => {
console.error('客户端错误:', err.reason);
});屏幕共享 实现屏幕共享功能（需浏览器支持）：
const screenStream = AgoraRTC.createStream({
audio: false,
video: false,
screen: true,
extensionId: 'minllpmhdgpndnkomcoccfekfegnlikg'
});
screenStream.init(() => {
client.unpublish(localStream);
client.publish(screenStream);
});注意事项
- 确保使用 HTTPS 协议（Agora Web SDK 要求）
- 处理不同浏览器的兼容性问题
- 生产环境务必使用token鉴权
- 适当处理设备权限问题
