Bug 241303 – REGRESSION (Safari 15): Local video is sometimes black when joining video call WebRTC

• Component: WebRTC
• Status: NEW

[PhungDuong]

We got this issue on almost our device. It's infrequent, but it's also annoying for end-users

We can confirm and reproduce this bug on iOS/iPadOS 15 (15.1, 15.2, 15.3, 15.4, 15.4.1 & 15.5)
Here are steps to reproduce:
1. Open the link using webRTC (https://it.dev-akameet.link/video/room/videocall)
2. Allow micro and camera.
3. Click the button to join the meeting.

Expected: The local video is normal.
Actual: The local video is black.

Note: From step 2 to step 3 do with speed as fast as possible. When you can't repo it, close the safari, open it again, and repeat the steps above, because the frequency isn't 100%.

I also comment on the ticket id=230922 & 232599 but can’t update the status to reopen.

[Alexey Proskuryakov]

Thank you for the report! could you please confirm if iOS 14.x worked fine, or if you don't have such information?

[PhungDuong]

Created attachment 460041 [details]
Repo on Iphone

Here is a sample when joining with black local video.
In addition, when we rotate iPhone, the video can render normal.

[PhungDuong]

(In reply to Alexey Proskuryakov from comment #1)
> Thank you for the report! could you please confirm if iOS 14.x worked fine,
> or if you don't have such information?

Hi Alexey,

On iOS 14.4.2, 14.6, 14.7.1 worked fine.
For now, we just reproduce only iOS 15 (all versions)

[youenn fablet]

I tried a few times and did not reproduce. Can you send me ([e-mail]) a sysdiagnose and the time of the issue?
Also, is calling play fixing the issue? Or do you see some error messages in the web inspector console ?

[Radar WebKit Bug Importer]

<rdar://problem/94430172>

[PhungDuong]

(In reply to youenn fablet from comment #4)
> I tried a few times and did not reproduce. Can you send me
> ([e-mail]) a sysdiagnose and the time of the issue?
> Also, is calling play fixing the issue? Or do you see some error messages in
> the web inspector console ?

Hi youenn,

I have been sent a video attachment. In the web inspector, I can't see any errors.
In my view, I guess the problem is CSS on Safari when rendering video.

[Dag-Inge Aas]

I think this is related to https://github.com/twilio/twilio-video.js/issues/1724#issuecomment-1146448951. I can confirm Confrere has been seeing this also, but only intermittently.

Short summary: There seems to be a bug with CSS Transforms of 180 degrees that can make the local video disappear. I've reported a similar bug before, but I don't think it's related. https://bugs.webkit.org/show_bug.cgi?id=202576#c6

Workaround is to to use a simpler 2d transform (rotateY() is a 3d transform) instead: transform: scaleX(-1); (Shamelessly copy-pasted from Github.

All kudos goes to timmydoza who replicated.

[Vladyslav]

It is reproduced from time to time on all devices:
- Mac OS Safari
- iPhone Safari
- iPad Safari and Chrome

In our case, it shows a black video but when we change the video layout and restore it back to the initial state again, the video is restored as well

I have anothor way to reproduce this issue:

1. open this page on ios 15.0 safari: https://webrtc.github.io/samples/src/content/devices/input-output/

2. allow microphone and camera permission.
3. when you see yourself, open Siri.
4. then, close Siri.

try step 3 & 4 repeatedly.

then you cannot see yourself.

rotate iPhone, then you can see your self again.

For the comment I mentioned above:

this can be reproduced on iOS 15.0 ~ 15.3.

please check the attachment video below

Created attachment 461709 [details]
iOS video black issue

(In reply to rychouwei from comment #9)
> I have anothor way to reproduce this issue:
> 
> 1. open this page on ios 15.0 safari:
> https://webrtc.github.io/samples/src/content/devices/input-output/
> 
> 2. allow microphone and camera permission.
> 3. when you see yourself, open Siri.
> 4. then, close Siri.
> 
> try step 3 & 4 repeatedly.
> 
> then you cannot see yourself.
> 
> rotate iPhone, then you can see your self again.

Switch the page to the background, and then cut back to the foreground to be able to resume.

(In reply to rychouwei from comment #10)
> For the comment I mentioned above:
> 
> this can be reproduced on iOS 15.0 ~ 15.3.
> 
> please check the attachment video below

Correction to the above description, currently only reproduced in iOS 15.0