如何在React Native中使用MediaRecorder API录制WebRTC流并上传至后端服务器？

Hey there! Since React Native doesn’t support the browser’s native MediaRecorder API, we need platform-specific solutions or third-party libraries to record WebRTC streams and send chunks to your backend via Socket. Here are two practical approaches to solve this:

Approach 1: Use react-native-webrtc + react-native-media-recorder #

This is the most straightforward method, leveraging existing libraries to handle WebRTC streams and recording.

Step 1: Install Dependencies #

First, ensure you have react-native-webrtc set up for WebRTC stream handling, then install the recording library:

npm install react-native-media-recorder react-native-webrtc --save
# Or use yarn:
yarn add react-native-media-recorder react-native-webrtc

For React Native 0.60+, autolinking handles native setup, but double-check platform permissions:

• Android: Add camera/microphone permissions to AndroidManifest.xml
• iOS: Add camera/microphone descriptions to Info.plist

Step 2: Implement Recording & Socket Transmission #

Assuming you already have a WebRTC MediaStream (from local camera/mic or a remote peer), here’s how to record and send chunks:

import { MediaRecorder } from 'react-native-media-recorder';
import io from 'socket.io-client';

// Initialize Socket client with binary data support
const socket = io('your-backend-url', {
  transports: ['websocket'],
  reconnection: true,
  upgrade: true, // Critical for binary data transmission
});

// Assume you've obtained your WebRTC MediaStream via react-native-webrtc
let webRtcStream;

// Configure recorder options (adjust based on your needs)
const recorderOptions = {
  audioBitrate: 128000,
  audioChannels: 2,
  audioSampleRate: 44100,
  videoBitrate: 5000000,
  videoFrameRate: 30,
  videoWidth: 1280,
  videoHeight: 720,
  format: 'mp4',
};

// Initialize recorder with your WebRTC stream
const mediaRecorder = new MediaRecorder(webRtcStream, recorderOptions);

// Listen for data chunks (event name matches library specs)
mediaRecorder.on('data', (chunk) => {
  // Only send non-empty chunks
  if (chunk && chunk.length > 0) {
    // Convert chunk to Blob if your backend expects it (optional)
    const blob = new Blob([chunk], { type: 'video/mp4' });
    // Send via Socket
    socket.emit('message1', blob);
  }
});

// Start recording
mediaRecorder.start();

// To stop recording later:
// mediaRecorder.stop();

Key Notes: #

• Binary Socket Support: Confirm your Socket client (like socket.io-client) is configured to handle binary data (the upgrade: true option ensures this).
• Permission Checks: Always request camera and microphone permissions before starting recording (use react-native-permissions for streamlined permission handling).
• Library Compatibility: Verify that react-native-media-recorder supports your target RN version and WebRTC stream format.

Approach 2: Custom Native Module (For Advanced Use Cases) #

If you need full control over the recording process (e.g., custom codecs, low-latency transmission), build a native module:

• Android: Use Android’s MediaRecorder API to capture the WebRTC stream, split into chunks, and send events to React Native via the bridge.
• iOS: Use AVAssetWriter to write the stream to buffer chunks, then pass them up to your RN code for Socket transmission.

This approach requires native Android/iOS development skills but offers maximum flexibility.

Alternative: Record to Local File & Upload (Non-Real-Time) #

If real-time transmission isn’t strictly required, record the WebRTC stream to a local file first, then split it into chunks and upload to your backend. Libraries like react-native-fs can help with file handling and chunked uploads.

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