如何在React Native中使用Agora视频通话实现移动端屏幕共享功能

前置依赖准备 #

• 确认使用agora-react-native-rtc SDK 4.x及以上版本，低版本未封装RN端屏幕共享调用接口
• 项目minSdkVersion(Android)≥21，minimum deployments(iOS)≥12.0

Android端配置 #

在android/app/src/main/AndroidManifest.xml中添加权限声明：

<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" />
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

iOS端配置 #

1. 在Xcode中为项目添加Broadcast Upload Extension扩展，扩展与主项目配置相同的App Group ID
2. 在主项目Info.plist中添加权限声明：

<key>NSCameraUsageDescription</key>
<string>需要访问摄像头进行视频通话</string>
<key>NSMicrophoneUsageDescription</key>
<string>需要访问麦克风进行语音通话</string>
<key>NSLocalNetworkUsageDescription</key>
<string>需要本地网络权限进行音视频传输</string>

核心实现代码 #

import React, { useEffect, useRef, useState } from 'react';
import { View, Button, PermissionsAndroid, Platform } from 'react-native';
import RtcEngine, {
  ChannelProfile,
  ClientRole,
  VideoSourceType,
} from 'agora-react-native-rtc';

// 替换为自己的Agora应用配置
const APP_ID = '你的Agora应用ID';
const CHANNEL_NAME = '测试频道名';
const TOKEN = '你的频道鉴权Token';

const AgoraVideoCall = () => {
  const rtcEngineRef = useRef(null);
  const [isScreenSharing, setIsScreenSharing] = useState(false);

  // 初始化RTC引擎并加入频道
  useEffect(() => {
    initRtcEngine();
    // 页面销毁时释放资源
    return () => {
      rtcEngineRef.current?.leaveChannel();
      rtcEngineRef.current?.destroy();
    };
  }, []);

  const initRtcEngine = async () => {
    rtcEngineRef.current = await RtcEngine.create(APP_ID);
    await rtcEngineRef.current.setChannelProfile(ChannelProfile.LiveBroadcasting);
    await rtcEngineRef.current.setClientRole(ClientRole.Broadcaster);
    await rtcEngineRef.current.enableVideo();
    await rtcEngineRef.current.joinChannel(TOKEN, CHANNEL_NAME, null, 0);
  };

  // Android权限申请
  const requestAndroidPermission = async () => {
    if (Platform.OS === 'android' && Platform.Version >= 33) {
      const grants = await PermissionsAndroid.requestMultiple([
        PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,
        PermissionsAndroid.PERMISSIONS.FOREGROUND_SERVICE_MEDIA_PROJECTION,
      ]);
      return Object.values(grants).every(item => item === PermissionsAndroid.RESULTS.GRANTED);
    }
    return true;
  };

  // 切换屏幕共享状态
  const toggleScreenShare = async () => {
    if (!rtcEngineRef.current) return;
    if (isScreenSharing) {
      // 停止屏幕共享
      await rtcEngineRef.current.stopScreenCapture();
      setIsScreenSharing(false);
    } else {
      const permissionPass = await requestAndroidPermission();
      if (!permissionPass) return;
      const captureConfig = {
        videoDimensions: { width: 1280, height: 720 },
        frameRate: 15,
        bitrate: 1200,
        captureAudio: true, // 是否同时采集系统内音频
      };
      // iOS需传入提前配置的App Group ID
      if (Platform.OS === 'ios') {
        captureConfig.appGroupId = '你的App Group ID';
      }
      await rtcEngineRef.current.startScreenCapture(captureConfig);
      setIsScreenSharing(true);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        title={isScreenSharing ? '停止屏幕共享' : '开启屏幕共享'}
        onPress={toggleScreenShare}
      />
    </View>
  );
};

export default AgoraVideoCall;

若需要订阅远端用户的屏幕共享流，监听onUserJoined回调，判断流类型为VideoSourceType.Screen时，调用setupRemoteVideo绑定渲染视图即可。

内容的提问来源于stack exchange，提问作者rahul patil