CODEWITHSUNDEEP
javascriptiosiphonewebrtcgetusermedia
oscar rodriguez
oscar rodriguez

Reputation: 71

Blackscreen on IOS WebRTC js

I’m trying to develop a webrtc video call system between mobile devices and computers. The mobile device sends the video stream of his to the computer.

In the mobile device the UI only shows the video it is recordings via its camera, in android this all works great but in iOS (I tested with 2 different iphones with the latest iOS version) the video doesn’t get started and it shown as black thought it gets transmitted to the computer without problems.

I tried everything I found online, adding controls to the video element, removing the controls, adding autoplay playsinline..., requesting the getUserMedia unload and reproducing the stream based on an user gesture, but nothing seems to work and I don't even get any errors on the console of the mobile phone. I tested on different browsers safari and chrome. And for more weirdness sometimes it starts when going to the list of tabs you have open on the browser and you go back to the page

This is the code of the video element

<video class='user-virtual-assessment-video' id='virtualAssessmentVideo' autoplay muted playsinline>
            
</video>
<button id='startVirtualAssessment' class='action-button'>
  <svg ...>
</button>

And the code executed when the user clicks on the button

e.stopPropagation();
e.preventDefault();
const videoElement = document.getElementById('virtualAssessmentVideo')
videoElement.srcObject = stream;
videoElement.play()
startVirtualAssessment()

The function startVirtualAssessment basically starts the rtc connection, and the user media of the iPhone gets requested on page load and stored on the stream variable

navigator.mediaDevices.getUserMedia({video: { facingMode: 'environment', aspectRatio: {exact: 16/9}, frameRate: { ideal: 10, max: 15 } }}).then((streamObject) => {
    stream = streamObject;
  })

Maybe there's something obvious that I'm missing or not understanding but I don't really see the problem with the code.

Thanks a lot :)

Upvotes: 3

Views: 2776

Answers (1)

Duane J
Duane J

Reputation: 1823

We think we've identified the cause of this issue: on mobile safari (only) there is a limitation that getUserMedia cannot be requested multiple times for the same media type.

If you call getUserMedia once for the user to see him/herself prior to connecting to others, and then let a webRTC library (such as mediasoup, in our case) call getUserMedia again, the first request is muted (causing a black screen) and the second request will then take priority (letting others see the user).

A workaround seems to be to .clone() the media stream once retrieved the first time, rather than calling getUserMedia a second time.

See also this webkit bug report: https://bugs.webkit.org/show_bug.cgi?id=179363

Upvotes: 1

Related Questions