CODEWITHSUNDEEP
cancellationscreensharingagora.io
CodeLover
CodeLover

Reputation: 161

How to get Agora io Screen sharing cancel event?

I am using agora io for video calling and screen sharing. screen share is working fine. But problem is when I cancel the screen share then stream is not displaying. But join is still active. I need to catch the cancel event of screen sharing. I have read the document but there is no clue about cancel event. Would you please help to get the cancel event? Advance thank you.

Upvotes: 5

Views: 4082

Answers (4)

Reza Bozorgi
Reza Bozorgi

Reputation: 21

This is an error and you should handle it. If a user cancel screen sharing, screen track will need to be stopped and leave. So, you can simply use try/catch.

try {
      await clientScreen.join(appId, channelName, rtcToken, screenShareUid);

      const screenTrack = await AgoraRTC.createScreenVideoTrack(
        {
          encoderConfig: interviewInfo.video_encoding[0] as VideoEncoderConfiguration,
        },
        'disable'
      );
      screenTrack.on('track-ended', () => {
        handleStopShareScreen();
      });

      if (screenTrack) {
        await clientScreen.publish(screenTrack);
      }
    } catch (e) {
      handleStopShareScreen();
    }
  };

and handleStopShareScreen function:

const handleStopShareScreen = async () => {
    if (screenShareTrack) {
      screenShareTrack.stop();
      screenShareTrack.close();
    }
    clientScreen.removeAllListeners();
    await clientScreen.leave();
  };

Upvotes: 0

Sunny
Sunny

Reputation: 1476

    If you are using agora web sdk ng library then you can detect this by using track-ended event.
    
    We can create screen track using createScreenVideoTrack in this sdk.
step-1 call this method to create track
     async shareScreen() {
        const localScreenTrack = await AgoraRTC.createScreenVideoTrack();
        return localScreenTrack;
      }
 
step2- call event method after creating track.
 
    To add event on this track create different method to handle event
    shareScreenEvent(){
    const track = this.shareScreen()
    
     if (track) {
          track.on('track-ended', () => {
            console.log('track-ended');
    console.log('you can run your code here to stop screen')
          })
        }
    }

Upvotes: 5

Neha Soni
Neha Soni

Reputation: 4694

If you are using the Agora Web SDK NG, then you can use like this-

screen_rtc.screenTrack.close();

Here screen_rtc is my client object and you can also disable the screen client like below -

screen_rtc.client.leave();

My Full code for screen sharing is as follows -

<!-- Import Agora -->
     import AgoraRTC from "agora-rtc-sdk-ng";

<!-- Create client for screen -->
      screen_rtc: {
       client: null,
       screenTrack: null,
      },

<!-- Start Screen sharing -->
     screen_rtc.client = AgoraRTC.createClient({
       mode: "rtc",
       codec: "vp8",
     });

     await screen_rtc.client.join(
       <YOUR_APP_ID>,
       <YOUR_CHANNEL_NAME>,
       <YOUR_TOKEN>,
       null
    );

    screen_rtc.screenTrack = await AgoraRTC.createScreenVideoTrack();
    await screen_rtc.client.publish(screen_rtc.screenTrack);

<!-- Stop screen sharing -->
   screen_rtc.screenTrack.close();
   await screen_rtc.client.leave();

Upvotes: 3

Hermes
Hermes

Reputation: 2898

Agora's Web SDK does not offer any methods to detect this, but since the Agora Web SDK is based on Web RTC you can leverage the navigator object and catch the error.

navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
    /* media access has been granted */
}).catch(function(err) {
    //log to console first 
    console.log(err); /* handle the error */
    if (err.name == "NotFoundError" || err.name == "DevicesNotFoundError") {
        //required track is missing 
    } else if (err.name == "NotReadableError" || err.name == "TrackStartError") {
        //webcam or mic are already in use 
    } else if (err.name == "OverconstrainedError" || err.name == "ConstraintNotSatisfiedError") {
        //constraints can not be satisfied by avb. devices 
    } else if (err.name == "NotAllowedError" || err.name == "PermissionDeniedError") {
        //permission denied in browser 
    } else if (err.name == "TypeError" || err.name == "TypeError") {
        //empty constraints object 
    } else {
        //other errors 
        console.log("Error: " + err.name);
    }
});

Reference Link: https://blog.addpipe.com/common-getusermedia-errors/
Code Pen Demo: https://codepen.io/naicuoctavian/pen/wPeZWO

Upvotes: 0

Related Questions