当前位置：首页 > React

react如何使用agora

2026-01-24 02:00:00React

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

注意事项

react如何使用agora