Managing Media Streams

Once you have set up event listeners and initialized the Samvyo React Native SDK, the next step is to manage media streams, specifically audio and video. This includes functionalities to mute/unmute the microphone and turn the camera on or off.

Why Manage Media Streams?

Managing media streams is essential for providing users with control over their audio and video settings during a call. This allows participants to:

Mute themselves when not speaking to reduce background noise
Turn off their camera for privacy or bandwidth conservation
Easily toggle their audio and video settings based on their preferences

Sample Code for Managing Media Streams

Here's how to implement media stream controls in a React Native component:

// filepath: /components/MediaControls.tsx
import React, { useState } from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import { useSamvyo } from 'basic-rn-sdk-3.0';
import Icon from 'react-native-vector-icons/MaterialIcons';
 
const MediaControls = () => {
  const [isMuted, setIsMuted] = useState(false);
  const [isCameraOn, setIsCameraOn] = useState(true);
  const samvyoInstance = useSamvyo();
 
  const toggleMic = async () => {
    try {
      if (isMuted) {
        await samvyoInstance.unmuteMic();
      } else {
        await samvyoInstance.muteMic();
      }
      setIsMuted(!isMuted);
    } catch (error) {
      console.error('Error toggling microphone:', error);
    }
  };
 
  const toggleCamera = async () => {
    try {
      if (isCameraOn) {
        await samvyoInstance.disableCam();
      } else {
        await samvyoInstance.enableCam();
      }
      setIsCameraOn(!isCameraOn);
    } catch (error) {
      console.error('Error toggling camera:', error);
    }
  };
 
  return (
    <View style={styles.container}>
      <TouchableOpacity 
        style={styles.button} 
        onPress={toggleMic}
      >
        <Icon 
          name={isMuted ? 'mic-off' : 'mic'} 
          size={24} 
          color="#FFFFFF" 
        />
      </TouchableOpacity>
 
      <TouchableOpacity 
        style={styles.button} 
        onPress={toggleCamera}
      >
        <Icon 
          name={isCameraOn ? 'videocam' : 'videocam-off'} 
          size={24} 
          color="#FFFFFF" 
        />
      </TouchableOpacity>
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
    gap: 16,
  },
  button: {
    backgroundColor: '#2196F3',
    padding: 12,
    borderRadius: 25,
    width: 50,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
 
export default MediaControls;

Usage in a Video Call Screen

Here's how to use the MediaControls component in your video call screen:

// filepath: /screens/VideoCallScreen.tsx
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { RTCView } from 'react-native-webrtc';
import MediaControls from '../components/MediaControls';
 
const VideoCallScreen = () => {
  return (
    <View style={styles.container}>
      <RTCView 
        streamURL={/* your stream URL */}
        style={styles.videoStream}
      />
      <MediaControls />
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
  videoStream: {
    flex: 1,
  },
});
 
export default VideoCallScreen;

Summary

This implementation provides a clean and user-friendly way to manage media streams in your React Native video calling application. The MediaControls component handles both the UI state and SDK interactions, while providing visual feedback through icons. Remember to:

Handle errors appropriately
Provide visual feedback for stream states
Consider adding loading states during toggle operations
Test on both Android and iOS platforms

The example uses Material Icons, but you can customize the UI using any icon set or custom images that match your application's design.

Event Emitters Leave Room