tokbox : Subscriber time out error on Safari - webrtc

Question

Using opentok.js v2,  the video channel works fine with Chrome and Firefox . The opentok version used is from this link: https://static.opentok.com/v2/js/opentok.min.js
But it doesn't work with safari 11.0.3.
On session's stream created event, it generates following error message "The stream was unable to connect due to a network error. Make sure your connection isnt blocked by a firewall"
The publisher is published successfully i.e session.publish(..) works fine.
The code below is used to make a video call:
this.session=OT.initSession(this.apiKey, this.sessionId);
this.session.on({
streamCreated: (event) => {
 
this.session.subscribe(event.stream, 'subscriber');
},
streamDestroyed: (event) => {
console.log(`Stream ${event.stream.name} ended because ${event.reason}`);
}
});
this.session.connect(this.token, () => {
this.publisher=OT.initPublisher('publisher');
this.session.publish(this.publisher);
});
}
 
Other exceptions in console generated by opentok.js are as follows: 
[Error] OT.exception :: title: undefined (1554) msg: OT.Subscriber PeerConnection Error: OT.Subscriber failed to subscribe to a stream in a reasonable amount of time
error
_exceptionHandler (vendor.js:150924)
handleJsException (vendor.js:151002)
onPeerConnectionFailure (vendor.js:162673)
(anonymous function) (vendor.js:162414)
onInvokeTask (vendor.js:4239)
runTask (polyfills.js:3:10225)
invokeTask (polyfills.js:3:16182)
n (polyfills.js:2:31400)
[Error] OT_ICE_WORKFLOW_FAILED: ICEWorkflow: Subscriber PeerConnection with connection (not found) failed: OT.Subscriber failed to subscribe to a stream in a reasonable amount of time
error
dispatchOTError (vendor.js:159161)
(anonymous function) (vendor.js:160080)
handleThisOnce (vendor.js:137437)
(anonymous function) (vendor.js:137675)
onInvokeTask (vendor.js:4239)
runTask (polyfills.js:3:10225)
invokeTask (polyfills.js:3:16182)
n (polyfills.js:2:31400)
[Error] OT.exception :: title: undefined (1554) msg: ICEWorkflow: Subscriber PeerConnection with connection (not found) failed: OT.Subscriber failed to subscribe to a stream in a reasonable amount of time
error
_exceptionHandler (vendor.js:150924)
handleJsException (vendor.js:151002)
dispatchOTError (vendor.js:159163)
(anonymous function) (vendor.js:160080)
handleThisOnce (vendor.js:137437)
(anonymous function) (vendor.js:137675)
onInvokeTask (vendor.js:4239)
runTask (polyfills.js:3:10225)
invokeTask (polyfills.js:3:16182)
n (polyfills.js:2:31400)
 
 
All the above errors  are generated only on Safari browser. 

Answer 1

You need to make sure you have created a Safari Project in your OpenTok Account Portal. More details at https://tokbox.com/developer/sdks/js/safari/
It looks like you're using a polyfills.js file. If that is the polyfill from Angular that includes zone.js then you will need to include the fix for RTCPeerConnections 'zone.js/dist/webapis-rtc-peer-connection' in your polyfills.js file.
import 'zone.js/dist/webapis-rtc-peer-connection';
You will also probably want to include the polyfill for getUserMedia. More details at https://github.com/angular/zone.js/issues/948#issuecomment-357558384