Not able to see remote video from iOS/Safari 13.3

[schlegz]

We are having an issue with not being able to see the remote video from an iOS device using Safari 13.3. The receiving client is latest Chrome on OSX. The behavior is as follows:

• Both clients are receiving audio just fine.
• Safari can see the Chrome client's video.
• Chrome client cannot see Safari's video (Chrome can see it if we use a iPhone 6 Plus, does not work on iPhone 7/X devices)

We have had success with other browser/device combinations.

RemoteVideoTrack log from Chrome client:

RemoteVideoTrack {kind: "video", name: "a12b58c1-c8a1-41ba-8643-03596bd873b3", mediaStreamTrack: MediaStreamTrack, dimensions: {…}, …}
isStarted: false
isEnabled: true
isSwitchedOff: false
priority: null
_isStarted: false
kind: "video"
name: "a12b58c1-c8a1-41ba-8643-03596bd873b3"
mediaStreamTrack: MediaStreamTrack {kind: "video", id: "4d0eba95-b17b-4a55-bd7c-5ef4b5670f02", label: "4d0eba95-b17b-4a55-bd7c-5ef4b5670f02", enabled: false, muted: true, …}
dimensions: {width: 2, height: 2}
sid: "MTacfba868e7c4311e2b4091cadb5afdc7"
muted: true

Track logs from Chrome client:

2020-02-20 22:43:53.428Z | INFO in [createLocalTracks #4]: Call to getUserMedia successful; got MediaStreamTracks: [MediaStreamTrack]
log.js:138 2020-02-20 22:43:53.429Z | DEBUG in [LocalVideoTrack #5: undefined]: Initializing
log.js:138 2020-02-20 22:43:53.430Z | DEBUG in [LocalVideoTrack #5: acb27685-6fdb-4f6d-9493-953762576731]: Attempting to attach to element: <video autoplay playsinline>​</video>​
log.js:138 2020-02-20 22:43:53.451Z | INFO in [createLocalTracks #5]: Call to getUserMedia successful; got MediaStreamTracks: [MediaStreamTrack]
log.js:138 2020-02-20 22:43:53.452Z | DEBUG in [LocalAudioTrack #6: undefined]: Initializing
log.js:138 2020-02-20 22:43:53.452Z | DEBUG in [LocalAudioTrack #6: 4aa8d967-f394-4bb3-815f-d31dc0af58f1]: Attempting to attach to element: <audio autoplay>​</audio>​
log.js:138 2020-02-20 22:43:53.687Z | DEBUG in [LocalAudioTrack #6: 4aa8d967-f394-4bb3-815f-d31dc0af58f1]: Started
log.js:138 2020-02-20 22:43:54.188Z | DEBUG in [LocalVideoTrack #5: acb27685-6fdb-4f6d-9493-953762576731]: Dimensions: {width: 1280, height: 720}
log.js:138 2020-02-20 22:43:54.188Z | DEBUG in [LocalVideoTrack #5: acb27685-6fdb-4f6d-9493-953762576731]: Started

• [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.
• [ ] I verified that the Quickstart application works in my environment.
• [x] I am not sharing any Personally Identifiable Information (PII) or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Expected behavior:

Chrome client should see the video from iOS Safari.

Actual behavior:

Chrome client does not see the iOS Safari video (but audio works).

Software versions:

• [x] Browser(s): Chrome, Safari
• [x] Operating System: OSX (Chrome), Safari (iOS)
• [x] twilio-video.js: 2.1.0
• [x] Third-party libraries (e.g., Angular, React, etc.): React

[makarandp0]

Hello @schlegz, Thank you for writing about this issue.

I looked into our server logs for the track MTacfba868e7c4311e2b4091cadb5afdc7 from the room RM7c783add63c98c4284cdae970b1ca5fa, and see that there were no bytes sent from the client.

This seems like client side issue on the iOS Safari - Does this issue repro consistently ? Does the same video track look okay on the client side ? To debug further - It would be great if we can get a local repro of this issue. Can you check if the quick-start sample works for the same iOS device ?

Thanks, Makarand

[schlegz]

@makarandp0 The sample worked and after refactoring our video component to more closely match the sample, I may have discovered the problem. In calling createLocalVideoTrack, I was using the following options:

      const track = await createLocalVideoTrack({
        logLevel: 'debug',
        facingMode: 'user',
        width: 1920,
        height: 1080,
        aspectRatio: 1.777777778,
      });

Removing all these options allowed iOS/Safari to begin streaming its video properly. I was under the impression that if the specified video dimensions were not available, that it would fallback to the next closest dimensions. These options were working on other browsers, both mobile and desktop, so there is something about how iOS/Safari is interpreting these values.

[makarandp0]

Thanks @schlegz for the update, and I am glad that you managed to find a solution. Yeah, Safari on iOS acts lot differently than other browsers, You might want to also take a look at our media devices sample, that we try to keep up-to-date against iOS Safari.

I will close this issue now.

Thanks, Makarand

[andris310]

@schlegz thanks for this! I spent a day trying to narrow in on this until i found your comment! I can't believe the Twilio docs do not mention anything like that. At least I did not see anything while I was working on the app for two weeks.