Twilio-video.js: Safari12.1.1 - Issues related to webcams!

[kumail-raza]

Our application is working fine with other browsers and machine, even with chrome on mac.
Today while testing our app on Safari 21 on Mac, we observed following issues:

Steps:
1) UserA join from Safari12+-Mac.
2) UserB join from Chrome v73.0.3683 @ Ubuntu18.04

Issues:
1) UserA unable to see UserB (webcams) tracks not gets attached.
2) UserB unable to see UserA (webcam) initially unless he refreshes and on reconnection he can see UserA webcam
3) UserA on refresh still not able to see UserB webcam.

Software versions:

• [x] Browser(s): Safari 12+
• [x] Operating System: Mac
• [x] twilio-video.js: v2.0.0-beta11
• [x] Third-party libraries (e.g., Angular, React, etc.): Angular

[kumail-raza]

@manjeshbhargav @philnash ???

[philnash]

Do you receive track published events from each user? Do you get any errors logged?

[kumail-raza]

@philnash

I observed trackSubscribed event not received on Safari of the remote participants.

[philnash]

So I recently built a video app with the JS SDK and I did not have a problem receiving that event. Can you share your connection code? When you say Safari 21, do you mean version 12? Or 13?

[kumail-raza]

I mean version 12.

Get Outlook for Androidhttps://aka.ms/ghei36

---

From: Phil Nash [e-mail]
Sent: Thursday, August 8, 2019 9:41:35 PM
To: twilio/twilio-video.js [e-mail]
Cc: Kumail [e-mail]; Author [e-mail]
Subject: Re: [twilio/twilio-video.js] Safari12.1.1 - Issues related to webcams! (#706)

So I recently built a video app with the JS SDK and I did not have a problem receiving that event. Can you share your connection code? When you say Safari 21, do you mean version 12? Or 13?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://github.com/twilio/twilio-video.js/issues/706?email_source=notifications&email_token=AAUSZWVJWQNHZMMBCGMUU3LQDRED7A5CNFSM4IIQ2LUKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD34GU5A#issuecomment-519596660, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AAUSZWSDEOQBU3AXUTZZTTDQDRED7ANCNFSM4IIQ2LUA.

[philnash]

Can you share your connection code, that is, the code you call to make the connection, starting with Video.connect() and including your track subscription code. Thanks.

[kumail-raza]

@philnash Sure, below is the code, also as mentioned; the application is working perfectly fine with Chrome on Mac (and other os platform)

The issue is only with the Safari12+ Mac., issue observed is that on Safari, event for trackSubscribed not received after participant get connected, not understand the different behavior with chrome and safari. 😕

Twilio.Video.connect(this.twToken, connectOptions).then((room) => {
    Utils.logger('> connect to twilio : success');

    // When a Participant joins the Room, log the event.
    room.on('participantConnected', (participant) => {
        Utils.logger('tw-event:participantConnected: (' + participant.identity + ', ' + participant.sid + ') join the room');

        this.attachNetworkQualityCheker(participant);
    });

    // When a Participant's Track is subscribed to, attach it to the DOM.
    room.on('trackSubscribed', (track, publication, participant) => {
        Utils.logger('tw-event:trackSubscribed:' + participant.identity + ': track(' + track.kind + ', ' + track.sid + ')');

        const container = document.getElementById(participant.identity);
        this.attachTracks([track], container);
    });

    room.on('trackUnsubscribed', (track, publication, participant) => {
        Utils.logger('tw-event:trackUnsubscribed:' + participant.identity + ': track(' + track.kind + ', ' + track.sid + ')');

        this.detachTracks([track]);
    });

    // When a Participant leaves the Room, detach its Tracks.
    room.on('participantDisconnected', (participant) => {
        Utils.logger('tw-event:participantDisconnected: (' + participant.identity + ', ' + participant.sid + ')  left the room');

        this.detachParticipantTracks(participant);
    });


    // extra events for tesitng purpose
    room.on('reconnected', () => {
      Utils.logger('tw-event:reconnected!');
    });

    room.on('reconnecting', error => {
      Utils.logger('tw-event:reconnecting!', error.message);

      let errMsg = ''
      if (error.code === 53001) {
        errMsg = error.message + ' - Reconnecting your signaling connection!';
      } else if (error.code === 53405) {
        errMsg = error.message + ' - Reconnecting your media connection!';
      }
      this.sendTwilioLogs({
        type: 'error', msg: errMsg
      })
    });
});

[philnash]

I'll take a look at this tomorrow. Thanks for supplying your code.

[philnash]

I only have Safari 12.1.2 to test on here and I am getting room trackSubscribed events.

Is it possible you are having issues with codecs between Safari and other browsers? Check out the documentation here: https://www.twilio.com/docs/video/developing-safari-11. Are you using Group or Peer to Peer rooms? If it's a Group room you might want to try enforcing H.264 as the codec.

[kumail-raza]

I am using the Group room, can you provide any guidance as I believe H.264 is default code? Or how can I verify and do that?

Further @philnash, we are targetting only Safari 12+.

[philnash]

As I said, I can't reproduce the issue at all.

Have you tried increasing the log level (pass logLevel: 'debug' as one of your connect options)? Could you share the log?

[manjeshbhargav]

Hi @smkrn110 ,

For Safari 12.1 and below, please refer to this guide for how to interop with other browsers in Group Rooms. For Safari 12.1.1 and above, it should work since it supports VP8, so I'm surprised that you are running into this issue. Can you share some Room SIDs so we can take a look at our logs?

Thanks,

Manjesh Malavalli
JSDK Team

[kumail-raza]

@manjeshbhargav @philnash

thanks, both of you guys I will check for codec thing and get back to you.

[nitin-code-machine]

Hello @manjeshbhargav , any update on this issue?
I am facing the same issue. Here are the details:

Safari: 12.1.2 On MAC
Chrome: 79 on Ubuntu 14.04 LTS
SID: RM9b5b8da1afa50ccf536300fe46e34113

[nitin-code-machine]

Ok, I have fixed this issue by adding these two lines:

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/zone.js/dist/webapis-rtc-peer-connection.js"></script>

Refrence:- https://github.com/angular/zone.js/issues/883

[manjeshbhargav]

Hi @kumail-raza ,

Maybe this comment might apply to your situation as well. Can you try it out and let me know?

Thanks,

Manjesh Malavalli
JSDK Team