4

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. 

PShah_h
  • 43
  • 5

1 Answers1

6

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

Adam Ullman
  • 1,517
  • 7
  • 12
  • Yes, I have created a safari project and using the apikey from the safari project. – PShah_h Feb 08 '18 at 12:09
  • Can you point me to where your application is running so I can debug it? It looks like you have some polyfills in there, I'm wondering whether they're messing with the native PeerConnection object? – Adam Ullman Feb 09 '18 at 04:48
  • Ah yes, are you using polyfills from Angular? Specifically using zone.js? I think you're probably running into this issue https://github.com/angular/zone.js/issues/883 – Adam Ullman Feb 09 '18 at 04:50
  • If so you will need to include the 'zone.js/dist/webapis-rtc-peer-connection' file in your polyfills like I did here https://github.com/opentok/opentok-web-samples/pull/18 – Adam Ullman Feb 09 '18 at 04:52
  • Yeah, I bet that's it, let me edit my original answer. – Adam Ullman Feb 09 '18 at 04:52
  • Yes adding import 'zone.js/dist/webapis-rtc-peer-connection' and import 'zone.js/dist/zone-patch-user-media.js' made it work on Safari. Thank you for such a prompt answer :). But I still have one more issue on IOS 11. It gives me error ot_media_err_aborted : unknown error while getting user media . But I will still mark this as accepted , since error on safari is gone. Thanks – PShah_h Feb 12 '18 at 16:54
  • Sorry after one ore more iteration I see the same error again on Safari. It times out with same error message "The stream was uanble to connect due to network issuess..". However same connection on same machine works fine on Chrome. – PShah_h Feb 12 '18 at 20:28
  • Does this Angular 5 app work for you? https://opentok.github.io/opentok-web-samples/Angular-Basic-Video-Chat/ – Adam Ullman Feb 13 '18 at 01:04
  • Yes that works without any error!. My app is on angular 4.4.3. Could that be a problem? Also IOS 11 it gives out error – PShah_h Feb 14 '18 at 09:45
  • Error on IOS 11 Ipad - webkitAudioContext.createMediaStreamSource must be an instance of MediaStream. Any idea ? – PShah_h Feb 14 '18 at 09:51
  • I have a similar issue, but with the publisher. I can subscribe fine in Safari, but publishing times out (on Tokbox's demo, my platform and @AdamUllman demo). Never had a problem in any other browser, on the same network, with the same hardware, on the same machine. Been waiting months for Tokbox to have a look at the issue. – Si-N Apr 18 '18 at 09:53
  • I have noticed this as well but specifically when using LTE on T-Mobile on Safari on iOS. When I connect via WiFi it works fine. Is this the same behaviour you are seeing? Is it when using a cellular connection? Can you try using a different network and see if you get the same issue? – Adam Ullman Apr 23 '18 at 21:48
  • So helpful thank you. OpenTok if you're listening, this should be prominent in the docs somewhere... – Chris Kooken Aug 12 '20 at 13:09