Call Feature

A MirrorflyCall Module allows users to make a audio/video call with the another users. Once the client app is connected to the Mirrorfly server by using InitializeMirrorfly module, you can initiate the call to another user.

Initialization#

import { InitializeMirrorfly,MirrorflyCall } from "mirrorfly-uikit/dist"
import "mirrorfly-uikit/dist/assets/scss/bundle.css"
 function App() {
 return (
     <>
     <InitializeMirrorfly
         licenseKey="********************" 
         userIdentifier="**************"
     />
     <MirrorflyCall 
         userId="*********"
         callType="******" // set as audio/video
         enableDeviceSize = {false} // if you added width or height enableDeviceSize will change disabled
      />
     </>
     );
 }
 export default App;

Argument	Type	Description
userId	`Array`	set userId for whom to call
callType	`String`	set your calltype
enableDeviceSize	`Bool`	set your enableDeviceSize

The Mirrorfly UI component is customizable on theme model.Customized themes that fit your requirment can also be created by providing colorSet.

Basic colorSet Property#

colorSet Prop is a style property which is provided with the list of variables where the seperate component layouts color can be changed. On a basic level of colorSet object the colors of the component can be changed.

    const customColorSet={
        mfBgcCallGradient:"#00000096",
        mfBgcCallActionBtnHangup:"#E76161",
        mfBgcCallActionBtnHangupHover:"#E76161",
        mfClrCallActionBtnAudioVideo:"#E76161",
        mfClrCallActionBtnAudioVideoActive:"#E76161",
        mfBgcCallParentContainer:"#fff",
    }

    <MirrorflyCall 
        userId="*******************"
        callType="*******************"
        colorSet={customColorSet}
        enableDeviceSize = {false} // if you added width or height enableDeviceSize will change disabled
    />

Basic colorSet Variables#

The following table lists the style components of each Components used.

Components	colorSet Variables
Incoming And Outgoing Call Screen Background Color	`mfBgcCallGradient`
End Button Theme Color	`mfBgcCallActionBtnHangup`
End Button Hover BG Color	`mfBgcCallActionBtnHangupHover`
Audio Video Mute Theme Color	`mfClrCallActionBtnAudioVideo`
Audio Video UnMute Theme Color	`mfClrCallActionBtnAudioVideoActive`
Call BG color	`mfBgcCallParentContainer`

ColorSet#

The ColorSet is the set of colors provided by UIKit for Web and is fully customizable.

const customColorSet={
    
    // Calls properties
    mfBgcCallGradient:"#00000096",
    mfBgcCallOwnVideo:"#B04759",
    mfBgcCallDefault:"#152134",
    mfBgcCallDefaultLight:"#152134",
    mfBgcCallAvatar:"#8BACAA",
    mfBgcCallRemoteVideo:"#fff",
    mfBgcCallVideoBody:"#fff",
    mfBgcCallVideoInner:"#fff",
    mfBgcCallVideoTag:"#fff",
    mfBgcCallScrollTrack:"#0ab7921f",
    mfBgcCallParticipantInfoGradient:"#E76161",
    mfClrCallParticipantInfo:"#fff",
    mfBgcVideoFullview:"#333D52",
    mfClrVideoFullviewIcon:"#fff",
    mfClrCallToggleAnimation:"#333D52",
    mfBgcVideoFullviewHover:"#333D52",
    mfBgcCallParentContainer:"#fff"

    // Icons color
    mfBgcCallVideoAudioPinStatus:"#fff",
    mfBgcCallActionBtnDisabled:"#474e5b",
    mfBgcCallActionBtnHangup:"#E76161",
    mfBgcCallActionBtnHangupHover:"#E76161",
    mfBgcCallActionBtnAudioVideo:"#fff",
    mfClrCallActionBtnAudioVideo:"#E76161",
    mfClrCallActionBtnAudioVideoActive:"#E76161",
    mfBgcCallActionBtnAudioVideoHover:"#fff",
    mfClrCallParticipantStatusIcon:"#3276E2",
    mfClrCallActionIcon:"#fff",
    mfBgcCallActionAttend:"#4CDA64",
    mfBgcCallActionAttendHover:"#0D2852",
    mfClrCallActionAttend:"#fff",
    mfBgcCallActionBtnGradient:"#333D52",
    mfBgcCallOverlayText:"#0ab7921f",
    mfBgcCallActionBtnAudioVideoDisabled:"#B04759",
    mfClrCallTopActionIcon:"#3276E2"
}

Text Styling#

The text styling is also handled in the colorSetProp. Each text's style is handled by below mentioned variable of objects.

const colorSetObject={
    // Font Styles
        regular: " SFUIDisplayRegular, sans-serif",
        light: " SFUIDisplayLight, sans-serif",
        medium: " SFUIDisplayMedium, sans-serif",
        bold: " SFUIDisplayBold, sans-serif",
        black: " SFUIDisplayBlack, sans-serif",
        semibold: " SFUIDisplaySemibold, sans-serif",
        thin: " SFUIDisplayThin, sans-serif",
        heavy: " SFUIDisplayHeavy, sans-serif",
        ultralight: " SFUIDisplayUltralight, sans-serif",
        regularNova: " ProximaNova-Regular, sans-serif",
        lightNova: " ProximaNova-Light, sans-serif",
        SemiboldNova: " ProximaNova-Semibold, sans-serif",
        boxLayoutBg: "#D8DBE3",
        parentTopGap: " 0px",
        maxParentheight: " calc(100vh - var(--parent-top-gap))",
    }
    <MirrorflyCall 
        userId="*******************"
        callType="*******************"
        colorSet={colorSetObject}
        enableDeviceSize = {false} // if you added width or height enableDeviceSize will change disabled
    />