WebRTC mobile cameras not switching

Question

I'm trying to make a live stream app and I want the functionality of switching cameras in smartphones. I've followed this article from MDN but I couldn't get the expected results.

The following are the results I'm getting: Chrome mobile results: Camera switching from front to back but not switching the other way around. Firefox mobile results: Camera starting the stream with the rear camera(which is not expected) and not switching to the front camera.

I'm using RTCMultiConnection and RecordRTC for this app.

Code:

function switchCamera(stream){
    connection.replaceTrack(stream)
    video.pause();
    video.srcObject = stream;
    video.play();
}
var front = true;
$('#switch').on('click', function(e){
    e.preventDefault();
    e.stopImmediatePropagation();
                                  
    front = !front;
    var constraints = { video: { facingMode: (front? "user" : "environment") } };
                                 
    var internalRecorder = recorder.getInternalRecorder();
                                  

     connection.streamEvents.selectFirst({local: true}).stream.getVideoTracks().forEach(function(track){
         track.stop();
      });
     navigator.mediaDevices.getUserMedia(constraints).then(function(stream){
          if(internalRecorder instanceof MultiStreamRecorder){
             internalRecorder.resetVideoStreams(stream)
          }
     switchCamera(stream)
  });