Currently, I am working on developing a webRTC chat using the opentok platform and vue.js. Everything seems to be working fine on desktop and mobile Firefox browsers, but I am facing an issue with mobile Chrome when trying to subscribe to the event stream. An interesting observation is that activating developer tools resolves the problem in mobile Chrome, making it difficult for me to debug the error logs. I have been trying to troubleshoot this for three days now without any luck. Any assistance would be greatly appreciated! Below is the relevant snippet of my code:
// Initiating the live video session
startLivevideoSession: function(session){
this.call = true; // Setting call to true
// Initializing opentok session
this.LiveVideo_session = OT.initSession(session.apiKey, session.session)
// Defining the 'streamCreated' method
this.LiveVideo_session.on('streamCreated', function(event) {
// The problematic section:
this.LiveVideo_session.subscribe(event.stream, 'stream_video1', {
height: '100%',
width: '100%',
showControls: true,
style: {
audioLevelDisplayMode: 'auto',
buttonDisplayMode: 'off',
nameDisplayMode: 'off',
videoDisabledDisplayMode: 'auto',
showArchiveStatus: false
}
}, this.handleError)
// End of problematic section
}.bind(this))
// Defining the 'sessionDisconnected' method
this.LiveVideo_session.on("sessionDisconnected", function (event) {
if(this.call){
this.stopVideoButtonPress() // Stopping ongoing chat session if any
bus.$emit('showModal', "stopLivevideoSessionLeft"); // Notifying user that the other user left the page
}
}.bind(this))
// Defining the connect method
this.LiveVideo_session.connect(session.token, function(error) {
if(error){
this.handleError(error)
} else {
// If call mode is chat, do not publish video at all
if(this.call_mode != 'chat'){
this.LiveVideo_session.publish(this.my_video); // Publishing my video to the chatroom
}
// If test session is active, also publish stream to 'stream_video1'
if(this.testSession){
this.LiveVideo_session.publish(this.test_publisher)
}
}
}.bind(this));
this.premium_session = session.premium_session;
setTimeout(() => {
if(this.call_mode == "audio") {
var publisherOptions = {
videoSource: null,
name: this.connection_setup.stream_video_description+" (vain ääni)",
width: '100%',
height: '100%',
opaque: '1',
style: {
nameDisplayMode: "on",
audioLevelDisplayMode: "on"
}
};
} else {
var publisherOptions = {
name: this.connection_setup.stream_video_description,
width: '100%',
height: '100%',
opaque: '1',
style: {
nameDisplayMode: "on",
audioLevelDisplayMode: "on"
}
};
}
if(this.call_mode != 'chat'){
console.log("call mode"+this.call_mode);
this.my_video = OT.initPublisher('my_video', publisherOptions, this.handleError);
}
if(this.testSession){
console.log("call testSession "+this.testSession);
publisherOptions.name = 'Sinun kuvasi keskustelukumppanin näkemänä';
this.test_publisher = OT.initPublisher('stream_video1', publisherOptions, this.handleError);
}
}, 600);
},