Opentok on streamCreated subscribe makes mobile chrome freeze - google-chrome

Question

I am developing webRTC chat on opentok platform and vue.js. While everything is fine on desctop and mobile firefox browser, mobile chrome gets hung up when trying to subscribe to the event.stream. The weird thing is that if I activate developer tools then it will work on mobile chrome as expected so I can not debug error log on this one. I have been racking my brain on this for three days now. If anyone can help me I would appreciate it! Here is the relevant part of my code:
//start the live vicdeo sessiion
startLivevideoSession: function(session){
this.call = true; //set call to true
//initiate opentok session
this.LiveVideo_session = OT.initSession(session.apiKey, session.session)
//define on streamcreated method
this.LiveVideo_session.on('streamCreated', function(event) {
//this is the problem:
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)
//problem ends
}.bind(this))
//define on sessionDisconnected method
this.LiveVideo_session.on("sessionDisconnected", function (event) {
if(this.call){
this.stopVideoButtonPress() //stop on going chat session if any
bus.$emit('showModal', "stopLivevideoSessionLeft"); //notify user that other user left the page
}
}.bind(this))
//define connect method
this.LiveVideo_session.connect(session.token, function(error) {
if(error){
this.handleError(error)
}else{
//if call mode is chat, do not publish chat at all
if(this.call_mode != 'chat'){
this.LiveVideo_session.publish(this.my_video); //publish my video to chatroom
}
//if testsession, publish stream also to stream_video1
if(this.testSession){
this.LiveVideo_session.publish(this.test_publisher)
}
}
}.bind(this));
//store session.premium_session to premium_session
this.premium_session = session.premium_session
//wait for UI elements to be created on page before OT.initPublisher
setTimeout(() => {
//setup my_video
if(this.call_mode == "audio") //if only audio is selected
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
//setup my_video for videochat
var publisherOptions = {
name: this.connection_setup.stream_video_description,
width: '100%',
height: '100%',
opaque: '1',
style: {
nameDisplayMode: "on",
audioLevelDisplayMode: "on",
}
}
//if call mode is chat, do not publish chat at all
if(this.call_mode != 'chat'){
console.log("call mode"+this.call_mode)
this.my_video = OT.initPublisher('my_video', publisherOptions, this.handleError)
}
//if testsession, publish stream also to stream_video1
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);
},

Answer 1

It might be Chrome that freezes, not opentok. See this chrome 61/android bug which includes a workaround of adding a border-radius