如何在React-Native中通过Twilio实现iOS向Web发布本地屏幕共享轨道

一、前置配置 #

1. 安装依赖 #

确保已安装Twilio React Native SDK：

npm install @twilio/react-native-video
# 或使用yarn
yarn add @twilio/react-native-video

iOS需额外安装Pods：

cd ios && pod install && cd ..

2. 配置系统权限 #

• iOS：在Info.plist中添加权限描述：

<key>NSScreenCaptureUsageDescription</key>
<string>需要屏幕共享权限以在视频通话中分享屏幕内容</string>
<key>NSMicrophoneUsageDescription</key>
<string>需要麦克风权限以在屏幕共享时同步音频（可选）</string>

• Android：在AndroidManifest.xml中添加权限：

<uses-permission android:name="android.permission.MEDIA_PROJECTION" />
<uses-permission android:name="android.permission.RECORD_AUDIO" /> <!-- 可选，若需音频共享 -->
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

二、实现屏幕共享流程 #

1. 请求权限并创建屏幕共享轨道 #

React Native无法直接使用Web端的navigator.mediaDevices.getDisplayMedia，需通过Twilio SDK提供的方法适配原生系统API：

import { TwilioVideo } from '@twilio/react-native-video';
import { Platform } from 'react-native';

async function createScreenShareTrack() {
  let screenTrack;
  try {
    if (Platform.OS === 'android') {
      // Android先请求MediaProjection权限
      const permissionResult = await TwilioVideo.requestScreenCapturePermission();
      if (!permissionResult.granted) throw new Error('屏幕共享权限被拒绝');
      
      screenTrack = await TwilioVideo.createScreenShareTrack({
        audio: false, // 是否同步音频，按需开启
        video: { width: 1920, height: 1080, frameRate: 30 }
      });
    } else if (Platform.OS === 'ios') {
      // iOS基于ReplayKit直接创建轨道
      screenTrack = await TwilioVideo.createScreenShareTrack({
        audio: false,
        video: { width: 1920, height: 1080, frameRate: 30 }
      });
    }
    return screenTrack;
  } catch (error) {
    console.error('创建屏幕轨道失败:', error);
    throw error;
  }
}

2. 发布/取消发布屏幕轨道 #

和Web端逻辑一致，先清理旧轨道再发布新轨道：

import { useState, useRef } from 'react';

// 假设已通过Twilio SDK连接到房间，videoRoomRef为房间实例引用
const videoRoomRef = useRef(null);
const [localScreenTrack, setLocalScreenTrack] = useState(null);

// 启动屏幕共享
async function startScreenShare() {
  try {
    const newScreenTrack = await createScreenShareTrack();
    
    // 取消已发布的旧屏幕轨道（如果存在）
    if (localScreenTrack) {
      videoRoomRef.current.localParticipant.unpublishTrack(localScreenTrack);
      localScreenTrack.stop();
    }
    
    // 发布新轨道
    videoRoomRef.current.localParticipant.publishTrack(newScreenTrack, {
      name: "screen_share"
    });
    setLocalScreenTrack(newScreenTrack);
  } catch (error) {
    console.error('启动屏幕共享失败:', error);
  }
}

// 停止屏幕共享
async function stopScreenShare() {
  if (localScreenTrack) {
    videoRoomRef.current.localParticipant.unpublishTrack(localScreenTrack);
    localScreenTrack.stop();
    setLocalScreenTrack(null);
  }
}

3. 渲染远端屏幕共享内容 #

监听房间内的轨道变化，筛选出标记为screen_share的轨道并渲染：

import { useState, useEffect } from 'react';
import { View } from 'react-native';
import { VideoView } from '@twilio/react-native-video';

const [remoteScreenTrack, setRemoteScreenTrack] = useState(null);

useEffect(() => {
  if (!videoRoomRef.current) return;

  // 监听远端参与者发布轨道事件
  const handleTrackPublished = (participant, trackPublication) => {
    if (trackPublication.trackName === "screen_share" && trackPublication.track) {
      setRemoteScreenTrack(trackPublication.track);
    }
  };

  // 监听远端参与者取消发布轨道事件
  const handleTrackUnpublished = (participant, trackPublication) => {
    if (trackPublication.trackName === "screen_share") {
      setRemoteScreenTrack(null);
    }
  };

  videoRoomRef.current.on('trackPublished', handleTrackPublished);
  videoRoomRef.current.on('trackUnpublished', handleTrackUnpublished);

  return () => {
    videoRoomRef.current.off('trackPublished', handleTrackPublished);
    videoRoomRef.current.off('trackUnpublished', handleTrackUnpublished);
  };
}, [videoRoomRef.current]);

// 渲染屏幕共享视图
return (
  <View>
    {remoteScreenTrack && (
      <VideoView
        track={remoteScreenTrack}
        style={{ width: '100%', height: 300 }}
        mirror={false}
      />
    )}
  </View>
);

三、注意事项 #

• iOS限制：需使用真机测试（模拟器不支持ReplayKit），且应用需处于前台才能进行屏幕共享。
• Android限制：Android 10及以上需配置前台服务权限，共享音频时需注意系统兼容性。
• 资源清理：组件卸载或离开房间时，务必停止并取消发布屏幕轨道，避免资源泄漏。

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