Twilio-video.js: Remote video doesn't appear in Safari 11

[siyavash4812]

• [x] I have verified that the issue occurs with the latest twilio-video.js release and is not marked as a known issue in the CHANGELOG.md.
• [x] I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• [x] I verified that the Quickstart application works in my environment.

Code to reproduce the issue:

// Interface of response JSON object for tokens
export interface Token {
    token: string
}

var activeRoom;
var localMediaTracks;
var identity;
var roomName;
var token;
var nextAppointment;

// Detach the Tracks from the page
function detachTracks(tracks) {
    tracks.forEach(function (track) {
        track.detach().forEach(function (detachedElement) {
            detachedElement.remove();
        });
    });
}

// Detach the Participant's Tracks from the page
function detachParticipantTracks(participant) {
    var tracks = Array.from(participant.tracks.values());
    detachTracks(tracks);
}

// Connect to a Room
function connectRoom(): void {
    if (localMediaTracks) {
        connect(token, {
            name: roomName,
            tracks: localMediaTracks,
            audio: false,
            video: false,
            preferredAudioCodecs: ['isac'],
            preferredVideoCodecs: ['H264']
            //preferredVideoCodecs: ['H264']
        }).then(function (room) {
            // Store the connected Room
            console.log(roomName);
            activeRoom = room;

            // Attach the Tracks of the Participants already in the Room
            room.participants.forEach(function (participant) {
                participant.tracks.forEach(track => {
                    document.getElementById('remote-media-ctr').appendChild(track.attach());
                });
                document.getElementById('remote-media-fullscreen-btn').style.zIndex = '5';
            });

            // Whenever a Participant adds a Track, attach it to the page
            room.on('trackAdded', function (track, participant) {
                document.getElementById('remote-media-ctr').appendChild(track.attach());
                document.getElementById('remote-media-fullscreen-btn').style.zIndex = '5';
            });

            // Whenever a Participant removes a Track, detach it from the page
            room.on('trackRemoved', function (track, participant) {
                detachTracks([track]);
            });

            // Whenever a Participant leaves the Room, detach their Tracks
            room.on('participantDisconnected', function (participant) {
                detachParticipantTracks(participant);
            });

            // Once the LocalParticipant leaves the Room, detach their Tracks
            // and all of the other connected Participants' Tracks
            room.on('disconnected', function () {
                localMediaTracks.forEach(function (track) {
                    track.stop();
                });
                detachParticipantTracks(room.localParticipant);
                room.participants.forEach(detachParticipantTracks);
                activeRoom = null;
                localMediaTracks = null;
            });
        }, function (error) {
            document.getElementById('connectBtn').removeAttribute('disabled');
            console.error('Unable to connect to Room: ' + error.message);
        });
    }
}

Expected behavior:

Expected to show remote video but it doesn't show

Actual behavior:
If person1 from safari connects to person2 who uses chrome.
Person2 is able to hear and see person1 however person1 is not able to view or hear person2.

TODO

Software versions:

• [x] Browser(s): Latest versions
• [x] Operating System: MacOS, Ubuntu -> both latest version
• [x] twilio-video.js: 1.8.0
• [x] Third-party libraries (e.g., Angular, React, etc.): Angular 4

[vsrboth]

This is codecs issue. Chrome is likely to send VP8 codecs back, and Safari only supports H264, so the safari won't able to display the remote video stream. Try this preferredVideoCodecs: ['VP8', 'H264'].

Another way is to disconnect and connect back with the right codecs, i.e, if safari, please force chrome to use H264.

[inkredabull]

Cross-referencing: https://github.com/twilio/video-quickstart-js/issues/26

[markandrus]

Hi @siyavash4812,

Can you clarify if this is a Group or P2P Room, and could you also provide a Room SID? Based on your code, I _think_

• Safari _should_ be able to receive Chrome's AudioTrack _and_ VideoTrack*, and
• Chrome _should_ be able to receive Safari's AudioTrack _and_ VideoTrack,

if—and this is the subtle part—the Group Room's VideoCodecs property allows both "VP8" and "H264". You can configure this setting via the REST API or in the Console:

* Technically, there's one other caveat: some Chrome/Android devices don't support the H.264 profile we require. If you share a Room SID, I can check this. Also, I recommend that you set the following event handlers in your code, as soon as the connect Promise resolves:

room.localParticipant.on('trackPublicationFailed', (error, localTrack) => {
  console.warn('Failed to publish LocalTrack "%s": %s', localTrack.name, error.message);
});

room.on('trackSubscriptionFailed', (error, remoteTrackPublication, remoteParticipant) => {
  console.warn('Failed to subscribe to RemoteTrack "%s" from RemoteParticipant "%s": %s"', remoteTrackPublication.trackName, remoteParticipant.identity, error.message);
});

[vincentwoo]

@markandrus are there compatibility issues if P2P rooms are used instead?

[hverma]

@markandrus I am having the same issue with mobile Safari. I am using iphone 6 with ios 11.2.6 to test.

I have changed the room to use only H264 codecs.

Chrome Desktop to Chrome Mobile works fine. I can see audio and video on both the devices.
However, Safari to Chrome only shows audio and video on Chrome. I have tried both mobile chrome and desktop chrome to safari.

I am using Group Room. Also, I have tried 1.6 and 1.8 versions without any luck.
Room SID - RM98c824e68bf9f693052dd066f3b3c01d

Please assist as Safari is crucial for viability of our project. Thanks!

[markandrus]

@vincentwoo

@markandrus are there compatibility issues if P2P rooms are used instead?

If by compatibility issue you mean the profile ID caveat I mentioned, perhaps not. It depends on how the clients handle differing profile level IDs.

@hverma I see an ICE failure for one of your Participants, which could lead to the failure you describe. You may want to open a support ticket.

[JarredPrichard]

For ever it may help: I had a a similar issue on iPad; the key was it being an Angular 5 project. Once I converted the rooms to use H264, the issue was persisting where iPad would not display remote participants' audio or video.

The fix was to have polyfill.ts load a RTCPeerConnection patch after zone.js is loaded, as described in this issue: https://github.com/angular/zone.js/issues/883#issuecomment-329938702

For example:

import 'zone.js/dist/zone';
import 'zone.js/dist/webapis-rtc-peer-connection';

[markandrus]

@JarredPrichard ah, thanks very much for sharing that fix. Actually, we ask about "third-party libraries" in the GitHub issue template precisely for this reason. Some libraries, like Angular, patch browser globals in ways that create bugs, unfortunately.

This Angular issue with Safari and WebRTC was first identified here: https://github.com/twilio/twilio-video.js/issues/156

[m-andrew-albright]

My team was seeing this same issue. vsrboth's solution worked, except instead of:

preferredVideoCodecs: ['VP8', 'H264']

we had to do:

preferredVideoCodecs: ['H264', 'VP8']

We are using v1.14.1

[nikhilsharmahcs]

@JarredPrichard this fix helps and it is working for me