Agora.io React Native直播推流：非主播用户如何显示主播屏幕捕获？

要让观众端看到主播的屏幕捕获流，核心是监听远端屏幕流事件，并渲染对应主播uid的屏幕流视图，以下是具体步骤和代码示例：

1. 核心逻辑说明 #

主播开启屏幕捕获后，Agora会将屏幕内容作为一路独立的视频流发送到频道。观众端需要：

• 监听远端用户加入事件，获取主播的uid
• 监听远端视频状态变化，确认屏幕流已可用
• 使用主播的uid和屏幕流源类型渲染视图

2. 代码实现步骤 #

第一步：维护远端主播uid的状态 #

在组件中添加状态变量，用于存储主播的uid：

const [remoteScreenUid, setRemoteScreenUid] = useState(null);

第二步：监听Agora远端事件 #

在初始化Agora引擎时，注册以下事件监听：

import { AgoraRtcEngine, VideoSourceType, RenderModeType } from 'react-native-agora';

// 初始化引擎后注册监听
useEffect(() => {
  const engine = AgoraRtcEngine.create({ appId: '你的APPID' });
  
  // 监听远端用户加入
  engine.addListener('onUserJoined', (uid, elapsed) => {
    // 这里可通过业务逻辑判断是否为主播，比如约定主播uid、角色或通过服务器传递主播信息
    setRemoteScreenUid(uid);
  });

  // 监听远端视频状态变化，确认屏幕流已就绪
  engine.addListener('onRemoteVideoStateChanged', (uid, state, reason, elapsed) => {
    if (state === 3) { // 视频状态为可用
      // 可选：若频道内存在多流，可通过主播端自定义消息或Agora流属性验证是否为屏幕流
      setRemoteScreenUid(uid);
    }
  });

  // 以观众角色加入频道
  engine.joinChannel(null, '你的频道名', null, 0);

  return () => {
    engine.removeAllListeners();
    engine.leaveChannel();
    engine.destroy();
  };
}, []);

第三步：渲染远端屏幕流视图 #

在组件中根据remoteScreenUid渲染对应的屏幕流视图：

{remoteScreenUid && (
  <RtcSurfaceView
    style={styles.videoView}
    canvas={{
      uid: remoteScreenUid, // 此处使用主播的uid，而非代表本地的0
      sourceType: VideoSourceType.VideoSourceScreen,
      renderMode: RenderModeType.RenderModeFit,
    }}
  />
)}

3. 注意事项 #

• 主播端必须正确配置：需调用startScreenCapture开启屏幕捕获，同时频道模式设为直播模式，主播角色设为BROADCASTER
• 多流区分：若频道内同时存在摄像头流和屏幕流，可通过主播端发送自定义RTC消息告知屏幕流uid，或结合流属性判断
• 权限保障：确保观众端已申请网络等必要权限

内容的提问来源于stack exchange，提问作者BÜNYAMİN YETİM