Screen, camera stream in the same session. OV ScreenShare doesn't work in Safari

OpenVidu v2 Issues with deployment
1

So typically a user will be sharing his camera and screen at the same time. I followed Micael’s suggestion here and got 2 OV instances, one for the camera, the other for the screen.

For the screenshare itself, I followed the documentation from here and did exactly as instructed.

But I’m having problems.

  1. First of the problems is, this doesn’t work in Safari.

  2. The other problems are that, I get “StreamManager of Stream str_SCR_GlI1_con_CUfOdOcEmr (Subscriber) did not trigger “streamPlaying” event in 4000 ms” coming from the screen stream.

  3. The last problem is when I click a button (the button does just this “document.location.href = window.location.origin;”) to go to the home screen while the screen stream is on, I get:

OpenViduLogger.js:214 TypeError: Cannot read property ‘id’ of undefined
at Stream.disposeWebRtcPeer (Stream.js:556)
at StreamEvent.callDefaultBehavior (StreamEvent.js:93)
at Session.js:965
OpenViduLogger.error @ OpenViduLogger.js:214
(anonymous) @ Session.js:974
Promise.catch (async)
Session.onParticipantLeft @ Session.js:973
(anonymous) @ jsonrpcclient.js:109
emit @ events.js:146
RpcBuilder.decode @ index.js:434
transportMessage @ index.js:139

Any ideas getting past these will be appreciated.

2

Hi @ovdev ,

First of all we need to know why your screen sharing approach isn’t working. Do you have some logs, error or exception for helping?

As you know, our official OpenVidu Call application is able to publish the camera and screen share at the same time using OpenVido so it is officialy possible.

3

This is my setup for calls:

let OV = new OpenVidu();
let session = OV.initSession();
let token = "some_token"

 let publisher = OV.initPublisher("publisher", {
  });

session.on('streamCreated', event => {
    //..
  });

session.on('streamDestroyed', event => {
  //...
});

session.connect(token)
  .then(() => {
    session.publish(publisher);
  })
  .catch(error => {
  });

For calls alone, this works as expected. Problems start when I mix in screen sharing. My setup for screen sharing looks like this:

 let screenButton = document.getElementById("screen-share")
  screenButton.onclick = () => {

    let ScreenSharer = new OpenVidu();
    let screensession = ScreenSharer.initSession();
    let screenShareToken = "some token"

    screensession.connect(screenShareToken)
      .then(() => {
        let skreen = OV.initPublisher("publisher", {
          videoSource: "screen",
          publishAudio: false,
        });

        skreen.once('accessAllowed', (event) => {
          skreen.stream.getMediaStream().getVideoTracks()[0].addEventListener('ended', () => {
            screensession.disconnect();
          });
          screensession.publish(skreen);
        });
      });
  }

For starters, screen sharing this doesn’t work in Safari (works in other browsers). Trying to share screen in Safari produces these errors:

getMediaError: InvalidAccessError: getDisplayMedia must be called from a user gesture handler. 

Publisher initialization failed. GENERIC_ERROR: InvalidAccessError: getDisplayMedia must be called from a user gesture handler.

And even though screen sharing starts and works for the other browsers, when I click the “stop sharing” button provided by the browser’s native UI, I get

Stream.js:556 Uncaught TypeError: Cannot read property 'id' of undefined
    at Stream.disposeWebRtcPeer (Stream.js:556)
    at SessionDisconnectedEvent.js:91
    at Map.forEach (<anonymous>)
    at SessionDisconnectedEvent.callDefaultBehavior (SessionDisconnectedEvent.js:85)
    at Session.leave (Session.js:1396)
    at Session.disconnect (Session.js:375)
    at MediaStreamTrack.<anonymous> (room.js:150)

room.js:150 points to screensession.disconnect(); inside the accessAllowed event. Without the screensession.disconnect();, the shared screen doesn’t disconnect for the user on the other side.

4

@ovdev you must to init the screen publisher with the OV screen instance, In your case ScreenSharer.initPublisher(). This may fix your errors but if it doesn’t, take account that Safari need a user gesture to allow access to your media devices.

5

Doesn’t fix the errors. I’ll play around a bit more.

6

How did you reslove the above error , I too Facing same issue @CSantosM @ovdev

7

Did you tried the screen share tutorial? openvidu-insecure-js-screen-share - OpenVidu Docs

8

Hi all, I am facing the same issue, there is no clear information about why this is happening only in safari, if you have any clue, please let me know.