I have Reactjs application in which I have a video call concept. I have used RTCMultiConnection package to achieve video call.
Peer server is connected and the video call works well in localhost.
But when I hosted the react js application in a server (has ssl certificate too) the video call is not working.
The onStream function is not getting calling when video call starts and hence the user video is not displaying.
I have hosted the react js app by taking build and tried it in Heroku server and in windows dedicated server (through IIS). But the video call didn't worked in either of the servers.
How to get the video call to work on server too.
My sample code:
export function AudioVideoConferenceStart(data, callback) {
var liveOrJoined = data.liveOrJoined;
var callType = data.callType;
var documentData = data.documentData;
var sectionCount = data.sectionCount;
var roomId = data.roomId;
var isChat = data.isChat;
var isOnetoOne = data.isOnetoOne;
globalVar.connection = new RTCMultiConnection();
globalVar.connection.socketURL = defaultVal.ENV === "dev" ? defaultVal.APILINK_DEV : defaultVal.APILINK_PROD;
globalVar.connection.socketMessageEvent = 'video-conference-demo';
globalVar.connection.session = {
audio: true,
video: true
};
globalVar.connection.sdpConstraints.mandatory = {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
};
var bitrates = 512;
var resolutions = 'Ultra-HD';
var videoConstraints = {};
if (resolutions == 'HD') {
videoConstraints = {
width: {
ideal: 1280
},
height: {
ideal: 720
},
frameRate: 30
};
}
if (resolutions == 'Ultra-HD') {
videoConstraints = {
width: {
ideal: 1920
},
height: {
ideal: 1080
},
frameRate: 30
};
}
globalVar.connection.mediaConstraints = {
video: videoConstraints,
audio: true
};
var CodecsHandler = globalVar.connection.CodecsHandler;
globalVar.connection.processSdp = function (sdp) {
var codecs = 'vp8';
if (codecs.length) {
sdp = CodecsHandler.preferCodec(sdp, codecs.toLowerCase());
}
if (resolutions == 'HD') {
sdp = CodecsHandler.setApplicationSpecificBandwidth(sdp, {
audio: 128,
video: bitrates,
screen: bitrates
});
sdp = CodecsHandler.setVideoBitrates(sdp, {
min: bitrates * 8 * 1024,
max: bitrates * 8 * 1024,
});
}
if (resolutions == 'Ultra-HD') {
sdp = CodecsHandler.setApplicationSpecificBandwidth(sdp, {
audio: 128,
video: bitrates,
screen: bitrates
});
sdp = CodecsHandler.setVideoBitrates(sdp, {
min: bitrates * 8 * 1024,
max: bitrates * 8 * 1024,
});
}
return sdp;
};
globalVar.connection.iceServers = [{
'urls': [
'stun:stun.l.google.com:19302',
'stun:stun1.l.google.com:19302',
'stun:stun2.l.google.com:19302',
'stun:stun.l.google.com:19302?transport=udp',
]
}];
globalVar.connection.onstream = function (event) {
alert("Stream Added");
};
globalVar.connection.onstreamended = function (event) {
alert("stream removed");
};
globalVar.connection.onMediaError = function (e) {
alert(e.message);
};
// document.getElementById('room-id').value = roomid;
localStorage.setItem(globalVar.connection.socketMessageEvent, roomid);
// auto-join-room
(function reCheckRoomPresence() {
globalVar.connection.checkPresence(roomid, function (isRoomExist) {
if (isRoomExist) {
globalVar.connection.join(roomid);
return;
}
setTimeout(reCheckRoomPresence, 5000);
});
})();
}