I have developed a video calling feature using twilio video javascript, everything works fine but when user mutes the video from Safari browser on mac OS, the page reloads automatically showing an error This web page was reloaded because a problem occured. Below is the function called when audio / video is muted/unmuted:
toggleMedia("video");
function toggleMedia(mediaType) {
try {
console.log("toggleMedia");
if (!window.room) return;
var localMedia = window.room.localParticipant;
localMedia.tracks.forEach(function (publication) {
if (publication.kind === mediaType) {
if (publication.isTrackEnabled) {
publication.track.disable();
} else {
publication.track.enable();
}
}
});
} catch (e) {
console.log(e);
}
}
I am trying to avoid publish, unpublish track approach. What is wrong with track.disable() on Safari?
Yesterday I also faced this problem! This error is already listed in the list of Common Issues.
The error only appears when using the H264 codec, so you can use the VP8 codec as a temporary solution:
import TwilioVideo from 'twilio-video';
await TwilioVideo.connect(token, {
name,
preferredVideoCodecs: [ 'VP8' ]
});
In my case, the code looks like this:
connect(authHelper.getUserVideoChatToken()?.token, {
name:'testRoom',
audio: true,
video: { facingMode: { exact: (isUsingFrontCamera ? 'environment' : 'user') } },
preferredVideoCodecs: ['VP8']
}).then(...)