Twilio ios Video Call issue - ios

Question

I have created a video call using Twilio JS 2.x Version. And using this in my both mobile app Android & iOS. On Android it is working perfectly.
But on iOS, there is an issue, when users reach the video call page, it's showing preview but as the user clicks on the Join Room button, then his/her video stops and just showing a black screen. But Audio option alone work's fine in ios APP.
Actual thing is we are converting web view in to Mobile sdk using React Native APP. But the twilio logic's has been written using Javascript. Can anyone help on this?
I am using the following logic:
$.ajax({
url: callInitiate + "?userSTAuthToken=" + token,
type: "POST",
data: {
callType: "video",
subType: "wb-video",
},
error: function () {},
success: function (data) {
identity = "user_" + userId;
roomName = meetingId;
videoToken = data.token;
console.log("Joining room '" + roomName + "'...");
if (previewTracks) {
connectOptions.tracks = previewTracks;
}
// Join the Room with the token from the server and the LocalParticipant's Tracks.
console.log("Test token : " + data.token);
Twilio.Video.connect(videoToken, connectOptions).then(
roomJoined,
function (error) {
console.log("Unable to connect to Room: " + error.name);
TV.Util.DialogIntimation(
"Notification",
"Unable to connect to Room " + error.name
);
logTwilioerror(10);
$("#maskDiv").hide();
}
);
},
});
function roomJoined(room) {
window.room = activeRoom = room;
console.log("Joined as '" + identity + "'");
addIcons();
logSessionDetails(videoToken, room.sid, room.localParticipant.sid, room.name);
// Attach LocalParticipant's Tracks, if not already attached.
var previewContainer = document.getElementById("local-media");
if (!previewContainer.querySelector("video")) {
attachTracks(getTracks(room.localParticipant), previewContainer);
}
// Attach the Tracks of the Room's Participants.
var remoteMediaContainer = document.getElementById("remote-media");
room.participants.forEach(function (participant) {
console.log("Already in Room: '" + participant.identity + "'");
participantConnected(participant, remoteMediaContainer);
});
// When a Participant joins the Room, log the event.
room.on("participantConnected", function (participant) {
console.log("Joining: '" + participant.identity + "'");
participantConnected(participant, remoteMediaContainer);
});
// When a Participant leaves the Room, detach its Tracks.
room.on("participantDisconnected", function (participant) {
console.log(
"RemoteParticipant '" + participant.identity + "' left the room"
);
detachParticipantTracks(participant);
removeName(participant);
});
// Once the LocalParticipant leaves the room, detach the Tracks of all Participants, including that of the LocalParticipant.
room.on("disconnected", function () {
console.log("Left---disconnected");
logVideoActivity(
"10841",
"Tutor side disconnected the video Successfully."
);
if (previewTracks) {
previewTracks.forEach(function (track) {
track.stop();
});
previewTracks = null;
}
detachParticipantTracks(room.localParticipant);
room.participants.forEach(detachParticipantTracks);
room.participants.forEach(removeName);
activeRoom = null;
});
}