当前位置：首页 > React

react如何使用agora

2026-02-12 06:00:26React

在 React 中使用 Agora 实现实时音视频通信

安装 Agora SDK
通过 npm 或 yarn 安装 Agora Web SDK：

npm install agora-rtc-sdk
# 或
yarn add agora-rtc-sdk

初始化 Agora 客户端
在 React 组件中导入 SDK 并创建客户端实例：

import AgoraRTC from 'agora-rtc-sdk';

const client = AgoraRTC.createClient({ mode: 'rtc', codec: 'vp8' });

加入频道并处理音视频流

配置 App ID 和 Token
从 Agora 控制台获取 App ID 和临时 Token（测试时可使用无 Token 模式）：

const appId = 'YOUR_APP_ID';
const channel = 'YOUR_CHANNEL_NAME';
const token = 'YOUR_TOKEN'; // 可为 null

实现加入频道逻辑
调用 client.join() 并处理本地/远程流：

client.join(appId, channel, token, uid, () => {
  // 创建本地音视频流
  const localStream = AgoraRTC.createStream({ audio: true, video: true });

  localStream.init(() => {
    // 播放本地流
    localStream.play('local-video-container');
    // 发布流
    client.publish(localStream);
  });
});

// 监听远程流
client.on('stream-added', (evt) => {
  client.subscribe(evt.stream, 'remote-video-container');
});

处理组件生命周期

使用 useEffect 管理资源
在 React 函数组件中，需在卸载时清理资源：

useEffect(() => {
  return () => {
    client.leave(() => {
      localStream.close();
    });
  };
}, []);

实现基础功能控件

添加静音/取消视频按钮
通过操作流对象实现控制：

const muteAudio = () => {
  localStream.muteAudio();
};
const enableVideo = () => {
  localStream.unmuteVideo();
};

错误处理与日志

监听 SDK 事件
添加错误处理和调试日志：

client.on('error', (err) => {
  console.error('Agora client error:', err);
});

完整组件示例

import React, { useEffect } from 'react';
import AgoraRTC from 'agora-rtc-sdk';

function AgoraVideoCall() {
  let localStream;

  useEffect(() => {
    const client = AgoraRTC.createClient({ mode: 'rtc', codec: 'vp8' });

    client.join('APP_ID', 'CHANNEL', null, (uid) => {
      localStream = AgoraRTC.createStream({ audio: true, video: true });
      localStream.init(() => {
        localStream.play('local-video');
        client.publish(localStream);
      });
    });

    return () => {
      client.leave();
      if (localStream) localStream.close();
    };
  }, []);

  return (
    <div>
      <div id="local-video" style={{ width: 300, height: 200 }}></div>
    </div>
  );
}

注意事项：