【免费下载】 React Native WebRTC 基础使用指南：从媒体流到视频通话实现

React Native WebRTC 基础使用指南：从媒体流到视频通话实现

【免费下载链接】react-native-webrtc The WebRTC module for React Native 项目地址: https://gitcode.com/gh_mirrors/re/react-native-webrtc

前言

React Native WebRTC 是一个强大的开源库，它让开发者能够在 React Native 应用中实现 WebRTC 功能。本文将深入讲解该库的基础使用方法，帮助开发者快速构建实时音视频通信功能。

核心模块导入

首先需要导入库的核心组件和 API：

import {
    ScreenCapturePickerView,
    RTCPeerConnection,
    RTCIceCandidate,
    RTCSessionDescription,
    RTCView,
    MediaStream,
    MediaStreamTrack,
    mediaDevices,
    registerGlobals
} from 'react-native-webrtc';

这些组件涵盖了 WebRTC 的核心功能，包括：

• 音视频采集（MediaStream/MediaStreamTrack）
• 点对点连接（RTCPeerConnection）
• 信令处理（RTCSessionDescription/RTCIceCandidate）
• 视频渲染（RTCView）

全局注册（可选）

如果你的项目需要与浏览器 WebRTC API 兼容，可以使用 registerGlobals() 方法：

registerGlobals();

此方法会将以下 WebRTC API 注册到全局对象：

• navigator.mediaDevices 相关方法
• window 下的 WebRTC 核心类

媒体设备管理

1. 枚举设备

获取设备上的可用媒体输入输出设备：

async function getDevices() {
    try {
        const devices = await mediaDevices.enumerateDevices();
        const cameras = devices.filter(device => device.kind === 'videoinput');
        console.log(`找到 ${cameras.length} 个摄像头`);
    } catch (error) {
        console.error('获取设备列表失败:', error);
    }
}

2. 媒体约束配置

配置音视频采集参数：

const mediaConstraints = {
    audio: true,  // 启用音频
    video: {
        frameRate: 30,      // 帧率
        facingMode: 'user', // 默认使用前置摄像头
        width: 1280,        // 宽度
        height: 720         // 高度
    }
};

媒体流获取与处理

1. 获取用户媒体流

let localStream;

async function startLocalStream() {
    try {
        localStream = await mediaDevices.getUserMedia(mediaConstraints);
        
        // 纯音频模式
        if (isVoiceOnly) {
            const videoTracks = localStream.getVideoTracks();
            videoTracks.forEach(track => track.enabled = false);
        }
    } catch (error) {
        console.error('获取媒体流失败:', error);
    }
}

2. 获取屏幕共享流

async function startScreenShare() {
    try {
        localStream = await mediaDevices.getDisplayMedia();
    } catch (error) {
        console.error('屏幕共享失败:', error);
    }
}

3. 释放媒体流

function stopLocalStream() {
    if (localStream) {
        localStream.getTracks().forEach(track => track.stop());
        localStream = null;
    }
}

点对点连接建立

1. 配置 ICE 服务器

const peerConstraints = {
    iceServers: [
        { urls: 'stun:stun.l.google.com:19302' },  // 免费STUN服务器
        // 实际项目中应添加TURN服务器
    ]
};

2. 创建 PeerConnection

const peerConnection = new RTCPeerConnection(peerConstraints);

// 设置事件监听
peerConnection.addEventListener('icecandidate', handleICECandidate);
peerConnection.addEventListener('track', handleRemoteTrack);
peerConnection.addEventListener('connectionstatechange', handleConnectionStateChange);

3. 添加媒体轨道

function addLocalTracks() {
    localStream.getTracks().forEach(track => {
        peerConnection.addTrack(track, localStream);
    });
}

信令交换流程

1. 创建 Offer

async function createOffer() {
    try {
        const offer = await peerConnection.createOffer({
            offerToReceiveAudio: true,
            offerToReceiveVideo: true
        });
        await peerConnection.setLocalDescription(offer);
        // 发送offer给对端
        sendSignalingMessage({ type: 'offer', sdp: offer.sdp });
    } catch (error) {
        console.error('创建Offer失败:', error);
    }
}

2. 处理 Answer

async function handleAnswer(answer) {
    try {
        await peerConnection.setRemoteDescription(
            new RTCSessionDescription(answer)
        );
    } catch (error) {
        console.error('设置远程描述失败:', error);
    }
}

数据通道使用

1. 创建数据通道

const dataChannel = peerConnection.createDataChannel('chat');

dataChannel.onmessage = (event) => {
    console.log('收到消息:', event.data);
};

dataChannel.onopen = () => {
    console.log('数据通道已打开');
};

2. 发送数据

function sendMessage(message) {
    if (dataChannel && dataChannel.readyState === 'open') {
        dataChannel.send(message);
    }
}

媒体控制

1. 切换静音状态

function toggleMute() {
    const audioTracks = localStream.getAudioTracks();
    audioTracks.forEach(track => {
        track.enabled = !track.enabled;
    });
}

2. 切换摄像头

function switchCamera() {
    const videoTrack = localStream.getVideoTracks()[0];
    const constraints = {
        facingMode: currentFacingMode === 'user' ? 'environment' : 'user'
    };
    videoTrack.applyConstraints(constraints);
    currentFacingMode = constraints.facingMode;
}

视频渲染

使用 RTCView 组件渲染视频流：

<RTCView
    streamURL={localStream.toURL()}
    style={styles.localVideo}
    objectFit="cover"
    mirror={true}  // 前置摄像头镜像效果
    zOrder={0}
/>

<RTCView
    streamURL={remoteStream.toURL()}
    style={styles.remoteVideo}
    objectFit="cover"
    zOrder={1}
/>

最佳实践建议

1. 错误处理：所有 WebRTC 操作都应包裹在 try-catch 中
2. 资源释放：通话结束后务必释放所有媒体轨道和连接
3. 状态管理：合理处理各种连接状态变化
4. ICE 候选：完整收集和处理 ICE 候选信息
5. TURN 服务器：生产环境必须配置 TURN 服务器

常见问题

1. Android 屏幕共享：Android 10+ 需要前台服务支持
2. iOS 权限：确保 Info.plist 中配置了相机和麦克风权限描述
3. 设备兼容性：不同设备对媒体约束的支持可能有差异
4. 连接稳定性：复杂网络环境下应考虑使用高级 ICE 策略

通过本文介绍的基础使用方法，开发者可以快速实现 React Native 应用中的音视频通话功能。实际项目中还需要考虑信令服务器实现、房间管理、错误恢复等更复杂的场景。

【免费下载链接】react-native-webrtc The WebRTC module for React Native 项目地址: https://gitcode.com/gh_mirrors/re/react-native-webrtc