Function MediaSettingsModal

Example

import React, { useState } from 'react';
import { MediaSettingsModal } from 'mediasfu-reactjs';
import { io } from 'socket.io-client';

const App = () => {
  const socket = io("http://localhost:3000");
  const [isMediaModalVisible, setIsMediaModalVisible] = useState(true);

  const handleMediaSettingsClose = () => setIsMediaModalVisible(false);
  const handleSwitchCamera = async (options) => console.log("Camera switched", options);
  const handleSwitchVideo = async (options) => console.log("Video input switched", options);
  const handleSwitchAudio = async (options) => console.log("Audio input switched", options);

  const parameters = {
    userDefaultVideoInputDevice: "default",
    videoInputs: [
      { deviceId: "camera1", label: "Front Camera" },
      { deviceId: "camera2", label: "Rear Camera" }
    ],
    audioInputs: [
      { deviceId: "mic1", label: "Built-in Microphone" },
      { deviceId: "mic2", label: "External Microphone" }
    ],
    userDefaultAudioInputDevice: "default",
    isBackgroundModalVisible: false,
    updateIsBackgroundModalVisible: (visible) => console.log("Background modal visibility:", visible),
    getUpdatedAllParams: () => console.log("Updated all parameters"),
  };

  return (
    <MediaSettingsModal
      isMediaSettingsModalVisible={isMediaModalVisible}
      onMediaSettingsClose={handleMediaSettingsClose}
      switchCameraOnPress={handleSwitchCamera}
      switchVideoOnPress={handleSwitchVideo}
      switchAudioOnPress={handleSwitchAudio}
      parameters={parameters}
      position="topRight"
      backgroundColor="#83c0e9"
    />
  );
};

export default App;
Copy