Screen share event for subscribers

OpenVidu v2 How to implement?
1

Hi, I’m using openvidu browser, and it’s really fantastic.

Now, I would like to detect when a publisher is screensharing (noth initializing publisher with videoSource: ‘screen’ or using replaceTrack() to switch his media), so that I can manage its video differently in every subscriber’s browser (e.g. enlarging it, or whatever).

Does it exist an event fired somewhere that can help me in this?

2

Hello @blazeag,

Listening to steramCreated event you will be able to receive the stream created.
You can check the video type with stream typeOfVideo property.
This property can has three values: “CAMERA”, “SCREEN” or “CUSTOM”.

This is the simplest way to know if a screen is connected.

Regards

3

Thank you @CSantosM, your solution worked well when the stream is created the first time.
But when I use the new v2.12.0 replaceTrack() function, no streamCreated event is fired.

4

Hello,

The replaceTrack method doesn’t fire any event so you have two options:

  1. Use the traditional way to change from camera to screen (initializing a new publisher) and listen to streamCreated event.

  2. Use the replaceTrack method and send a custom signal whenever the method is used with the stream relevant info.

Regards.

5

I like replaceTrack() very much, so I don’t want to get rid of it XD

Using signal is definitely a good idea, thank you very much @CSantosM

6

We can study the possibility of triggering streamPropertyChangedEvent when a Publisher calls replaceTrack.

1 Like
7

That would be superb @pabloFuente, thank you. Meanwhile, using signal for this purpose is working like a charm @CSantosM, being aware of the possible security issues (not a real problem in my environment, anyway)

2 Likes
8

Hello @CSantosM @blazeag,

I tried to listen to streamCreated but it didn’t helped. I used the below code to listen

     this.session.on('streamCreated', (event: StreamEvent) => {
      const subscriber: Subscriber = this.session.subscribe(event.stream, undefined);
      this.subscribers.push(subscriber);

      event.stream.getMediaStream().getVideoTracks()[0].addEventListener('ended', () => {
        console.log('User pressed the "Stop sharing" button');
      });
    });

I also posted it SO but got no response.

9

I’m using this code and it works with all browsers I tested:

subscriber.stream.getMediaStream().addEventListener('inactive', screen_stop);
subscriber.stream.getMediaStream().getVideoTracks()[0].addEventListener('ended', screen_stop);

I don’t remeber why I used two different kind of event, but be sure it helps in some way.

10

I just tested it and it’s working.

11

Actually its not working in my side. But now I got it working. I used the official doc’s method to share screen.