Bug 237365 – WebRTC Peer Video black on Chromium devices (Client iOS device)

• Status: RESOLVED
• Resolution: FIXED
• Component: WebRTC

[Steve Bamelis]

Created attachment 453609 [details]
SDP Peer

URLs (if applicable) : https://rtcmulticonnection.herokuapp.com/demos/Video-Broadcasting.html (For testing the bug)
Browsers tested:
    Firefox OK
    Chromium browser: NOK

iPhone: iOS version 15.x

What steps will reproduce the problem?
(1) Use the above URL for starting the Video Broadcasting demo, open this on Edge or Chrome and open this also on an iPhone
(2) Start a room on the iPhone
(3) Enter that room in the Chrome or Edge browser
(4) In the Chrome/Edge browser the video remains black

If we do the same test with Firefox as the browser there is no issue. We get a video stream displayed.

Attached you can find the SDP of the remote peer.

When using an Android device this is also working. Video is then able to be seen in Edge or Chrome.

Recap
- iPhone broadcast to Chrome/Edge not working
- iPhone broadcast to Firefox working
- Android broadcast to Chrome/Edge/Firefox working

In our code we receive an onstream event for the video. But nothing is shown.


kind regards,
Steve

[youenn fablet]

The test website does not work for me.
Is it working in Safari as wells Firefox but not Chrome in iOS?
Can you inspect the video element and see if it is playing?

[Steve Bamelis]

Hi Youeen,
for the video broadcasting test you need to first open a room on the iphone, then join the room in Chrome.
(btw, this is not our site but our application is based on that source)

The compleet setup is 
- Windows machine running Chrome, iPhone using Safari, no video
- Windows machine running Firefox, iPhone using Safari, we have video

Mac is not our target audience but for compleetness I have tested our application there. Using Safari on the Mac and Safari on the iPhone. Nothing is working there.
But as I said this is not our target audience.


I did some further checks through DevTools.
I noticed that, on a working setup (Firefox), I see our socket.io getting triggered through the signaling service.

On Chrome, this is not getting triggered. 

I see an HTTP status 101 happening on "wss://" (protocol). (101 = Switching Protocols)
In a working setup this goes over to https://revidea-signaling.zamia.be/socket.io/ (this is our signaling server) and this gets a 200 (http status) and then we get video.


In chrome this does not happen.

[youenn fablet]

(In reply to Steve Bamelis from comment #2)
> Hi Youeen,
> for the video broadcasting test you need to first open a room on the iphone,
> then join the room in Chrome.
> (btw, this is not our site but our application is based on that source)
> 
> The compleet setup is 
> - Windows machine running Chrome, iPhone using Safari, no video
> - Windows machine running Firefox, iPhone using Safari, we have video
> 
> Mac is not our target audience but for compleetness I have tested our
> application there. Using Safari on the Mac and Safari on the iPhone.

I tried on the Mac with Firefox sending and Safari receiving.
The video element stays black because of autoplay (if you set controls=true and then click on play, it will work. Ditto if the video element is muted). It might be the same for iOS.

[Steve Bamelis]

I have enabled the controls (even removed the autoplay) but I still did not get video. (Both in our application as with the Demo video broadcasting)

Our main setup is iPhone (Safari) to Chrome (or edge) (Windows). (our customer uses Windows computers)

Is it possible that you can verify our main setup?

[youenn fablet]

I just tried Chrome Mac (I do not have Chrome window) to Safari iPhone and I can see the following error:
[Error] TypeError: Attempted to assign to readonly property.
	(anonymous function) (adapter.js:1514)

Do you have the same issue?

[Steve Bamelis]

We have seen the same error when we where debugging our code.
But there is not reason that we can think of why.

This problem has started as of iOS 15.x 
So, the question is also what has been changed that results in this problem.

Using iOS versions prior to 15 where working.

[youenn fablet]

(In reply to Steve Bamelis from comment #6)
> We have seen the same error when we where debugging our code.
> But there is not reason that we can think of why.
> 
> This problem has started as of iOS 15.x 
> So, the question is also what has been changed that results in this problem.
> 
> Using iOS versions prior to 15 where working.

Can you try with the latest adapter.js version?
It should have the fix to prevent this error.

[youenn fablet]

> So, the question is also what has been changed that results in this problem.

adapter.js code seems to kick in due to extmap-allow-mixed.
extmap-allow-mixed is now on by default for Chrome around M92 and for Safari in iOS 15.

[Steve Bamelis]

We updated the adapter.js and now it is working.
Thanks very much Youenn.