react-native-voximplant
react-native-voximplant copied to clipboard
voximplant
how to add function of reverse and mute in video calling ?
i apply props of voximplant docs front and back with function but there is show an error like that is undefined function. if anyone apply these props please help how to apply in react native?
Hello! @torretorich
You can use sendAudio method on instance current Call with param true/false - that says about send audio or not.
For more information you can check our docs.
For example:
const Client = Voximplant.getInstance();
const currentCall = useRef().current;
currentCall = await Client.call(number, callSettings);
currentCall.sendAudio(false); // audio will be muted
import { View, Text,StyleSheet,Pressable,PermissionsAndroid,Platform,Alert,Dimensions} from 'react-native'
import React,{useEffect,useState,useRef} from 'react'
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons"
import CallActionBox from '../../Components/CallActionBox';
import { NavigationContainer } from '@react-navigation/native';
import { useNavigation,useRoute } from '@react-navigation/native';
import { Voximplant } from 'react-native-voximplant';
import Draggable from 'react-native-draggable';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { CameraType } from 'react-native-voximplant/src/Voximplant';
const permissions = [
PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
PermissionsAndroid.PERMISSIONS.CAMERA,
]
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
export default function CallingScreen(props) {
const [permissionsGranted,setPermissionGranted] = useState(false)
const [callStatus,setCallStatus] = useState("Initializing...")
const [localVideoStreamId,setLocalVideoStreamId] = useState("")
const [remoteVideoStreamId,setRemoteVideoStreamId] = useState("")
const [isMuted,setIsAudioMuted] = useState(false)
const [videoView,setVideoView] = useState(false)
const navigation = useNavigation()
const route = useRoute()
const {user,call: incomingCall,isIncomingCall} = route?.params;
const voximplant = Voximplant.getInstance();
const call = useRef(incomingCall);
console.log("fe",route.params);
// audio will be muted
const endpoint = useRef(null)
const params = props.route.params;
const callId = params ? params.callId : null;
const Client = voximplant
var currentCall = useRef().current;
const goBack=()=>{
navigation.pop()
}
useEffect(() => {
const getPermissions = async() =>{
const granted = await PermissionsAndroid.requestMultiple(permissions);
// console.warn(granted);
const recordAudioGranted =
granted[PermissionsAndroid.PERMISSIONS.RECORD_AUDIO]==="granted"
const cameraGranted =
granted[PermissionsAndroid.PERMISSIONS.CAMERA] ==="granted"
if(!cameraGranted || !recordAudioGranted){
alert("Permission Not Granted")
}
else{
setPermissionGranted(true);
}
}
if(Platform.OS==="android"){
getPermissions()
}
else{
setPermissionGranted(true)
}
}, [])
useEffect(() => {
if(!permissionsGranted){
return;
}
const callSetting = {
video:{
sendVideo:true,
receiveVideo:true
}
}
const makeCall = async() =>{
call.current = await voximplant.call(user.userName,callSetting)
subscribeToCallEvents();} ;
const answerCall = async() =>{
subscribeToCallEvents();
endpoint.current = call.current.getEndpoints()[0];
subscribeToEndpointEvent()
call.current.answer(callSetting)
}
const subscribeToCallEvents = () =>{
call.current.on(Voximplant.CallEvents.Failed,callEvent=>{
showError(callEvent.reason)
})
call.current.on(Voximplant.CallEvents.ProgressToneStart,callEvent=>{
setCallStatus("Calling")
})
call.current.on(Voximplant.CallEvents.Connected,callEvent=>{
setCallStatus("Connected")
})
call.current.on(Voximplant.CallEvents.Disconnected,callEvent=>{
navigation.navigate("Contacts")
})
call.current.on(Voximplant.CallEvents.LocalVideoStreamAdded,callEvent=>{
setLocalVideoStreamId(callEvent.videoStream.id)
})
call.current.on(Voximplant.CallEvents.EndpointAdded,callEvent=>{
endpoint.current = callEvent.endpoint;
subscribeToEndpointEvent();
})
}
const subscribeToEndpointEvent = async() =>{
endpoint.current.on(Voximplant.EndpointEvents.RemoteVideoStreamAdded,endpointEvent =>{
setRemoteVideoStreamId(endpointEvent.videoStream.id)
})
}
const showError = reason =>{
Alert.alert("Call Failed",Reason: ${reason},[{text:"ok",onPress:navigation.navigate("Contacts")}]);
}
if(isIncomingCall){
answerCall();
}
else{
makeCall();
}
return()=>{
call.current.off(Voximplant.CallEvents.Failed)
call.current.off(Voximplant.CallEvents.ProgressToneStart)
call.current.off(Voximplant.CallEvents.Connnected)
call.current.off(Voximplant.CallEvents.Disconnected)
};
}, [permissionsGranted]);
const onHangupPress = ()=>{
call.current.hangup()
}
const onReverseCamera = ()=>{
console.warn("check log");
Voximplant.CameraType.BACK
}
const onToggleCamera = ()=>{
console.warn("pressed");
Voximplant.CameraType.BACK.back
}
const onToggleMicrophone = async()=>{
console.warn("mic");
const callSetting = {
video:{
sendVideo:true,
receiveVideo:true,
sendAudio:false
},
audio:{
sendAudio:false
}
}
currentCall = await Client.call(route.params.user.userName,callSetting);
currentCall.sendAudio(false);
}
return (
<View style={styles.page}>
<View style={styles.cameraPreview}>
<Pressable onPress={goBack} style={styles.backButton}>
<Ionicons name='chevron-back' color="white" size={30}/>
</Pressable>
{
(videoView)?(
<>
<Voximplant.VideoView
videoStreamId={localVideoStreamId}
style = {styles.locaklVideo1}
scaleType={Voximplant.RenderScaleType.SCALE_FIT}
>
</Voximplant.VideoView>
<Draggable x={250} y={250}>
<TouchableOpacity onPress={()=>{
alert("hft")
setVideoView(false)
}}>
<Voximplant.VideoView
videoStreamId={remoteVideoStreamId}
style = {styles.remoteVideo1}
scaleType={Voximplant.RenderScaleType.SCALE_FIT}
showOnTop={true}
>
</Voximplant.VideoView>
</TouchableOpacity>
</Draggable>
</>
):(
<>
<Voximplant.VideoView
videoStreamId={remoteVideoStreamId}
style = {styles.remoteVideo}
scaleType={Voximplant.RenderScaleType.SCALE_FIT}
>
</Voximplant.VideoView>
<Draggable x={250} y={250}>
<TouchableOpacity onPress={()=>{
setVideoView(true)
}}>
<Voximplant.VideoView
videoStreamId={localVideoStreamId}
style = {styles.localVideo}
showOnTop={true}
scaleType={Voximplant.RenderScaleType.SCALE_FIT}
switchCamera = { Voximplant.CameraType.BACK}
>
</Voximplant.VideoView>
</TouchableOpacity>
</Draggable>
</>
)
}
{console.log(user)}
<Text style={styles.name}>{user?.userName}</Text>
<Text style={styles.phoneNumber}>{callStatus}</Text>
</View>
<CallActionBox onToggleCamera={onToggleCamera} onToggleMicrophone={onToggleMicrophone} onReverseCamera={onReverseCamera} onHangupPress = {onHangupPress}></CallActionBox>
</View>
)
}
const styles = StyleSheet.create({
page:{
backgroundColor:"orange",
height:"100%",
width:"100%"
},
cameraPreview:{
backgroundColor:"orange",
flex:1,
alignItems:"center",
paddingTop:10,
},
name:{
fontSize:30,
fontWeight:"bold",
color:"white",
marginTop:50,
marginBottom:10
},
phoneNumber:{
color:"white"
},
backButton:{
position:"absolute",
top:64,
left:8,
paddingHorizontal:20
},
localVideo:{
backgroundColor:"rgb(0,0,0)",
width:windowWidth0.29,
height:windowHeight0.22,
right:10,
borderRadius:10,
},
remoteVideo:{
backgroundColor:"rgb(0,0,0)",
width:windowWidth,
position:"absolute",
borderRadius:10,
height:windowHeight,
bottom:windowHeight0
},
remoteVideo1:{
backgroundColor:"rgb(0,0,0)",
width:windowWidth0.29,
height:windowHeight0.22,
right:10,
borderRadius:10,
},
locaklVideo1:{
backgroundColor:"rgb(0,0,0)",
width:windowWidth,
borderRadius:10,
height:windowHeight,
bottom:windowHeight0
}
})
Hello! @torretorich
You have some issues in code:
-
CallSettingsdon't have audio parameters, you may check correct parameters in our docs - To mute audio in the call, it is required to call
Call.sendAudio(false)API for the current active call instance. In youronToggleMicrophonemethod implementation you create a new call and it does not look correctly as it leads to multiple calls at the same time and probably unexpected behavior on the application side if it is designed for a single call at the moment. If I understand your code correctly, youronToggleMicrophonemethod should look something like:
const onToggleMicrophone = async () => {
console.warn("mic");
call.current.sendAudio(false); //assuming call.current is the current active call
}
yes, you are right it was my fault . now it's working properly thankyou so much. can you help to reverse camera functionality?
Hello @torretorich !
We glad to help you, you can check realization main piece SDK API in ours React Native Voximplant Demo Projects.
You need to do something like that:
import {Voximplant} from 'react-native-voximplant';
const CameraManager = Voximplant.Hardware.CameraManager.getInstance();
const cameraType = Voximplant.Hardware.CameraType;
const [cameraState, setCameraState] = useState(cameraType.FRONT);
const toggleCameraMode = () => {
if (cameraState === cameraType.FRONT) {
CameraManager.switchCamera(cameraType.BACK);
setCameraState(cameraType.BACK);
} else {
CameraManager.switchCamera(cameraType.FRONT);
setCameraState(cameraType.FRONT);
}
};
Thanks again for help to me. I have one more issue in speaker functionality. when call is connect with another user, loud speaker is not working, call connect with ear speaker. can you help me to solve this issue.
Hello @torretorich !
We glad to help you, you can check realization main piece SDK API in ours React Native Voximplant Demo Projects.
You need to do something like that:
import {Voximplant} from 'react-native-voximplant';
const AudioDeviceManager =
Voximplant.Hardware.AudioDeviceManager.getInstance();
const selectAudioDevice = async (device: string) => {
// device equal one of these: 'Earpiece', 'Speaker', 'WiredHeadset', 'Bluetooth'
await AudioDeviceManager.selectAudioDevice(device);
};
