twilio / video-quickstart-js

A quickstart and code samples for Twilio Video JavaScript SDK. https://www.twilio.com/docs/video
Other
389 stars 337 forks source link

Video track not visible to remote after unshare screen #208

Closed bhavinatharva closed 2 years ago

bhavinatharva commented 2 years ago

@manjeshbhargav , @PikaJoyce , @philnash In my application video sharing and screen sharing working as expected but when i try to video share like below

then its not visible to remote participant

My code of screen share

const screenShareAction = useCallback(
    (room) => {
      if (room) {
        navigator.mediaDevices
          .getDisplayMedia({ audio: false })
          .then((stream) => {
            const track = stream.getTracks()[0];

            // All video tracks are published with 'low' priority. This works because the video
            // track that is displayed in the 'MainParticipant' component will have it's priority
            // set to 'high' via track.setPriority()
           // room.localParticipant.publishTrack(track);

            switchPublishedTracks(room, track)
              .then((trackPublication) => {

                stopScreenShareRef.current = () => {

                  console.log(track, "track")
                  if(track.name !== "screen"){

                    room.localParticipant.unpublishTrack(track);
                  }

                  // track.detach().forEach(detachedElement => {
                  //   detachedElement.remove()
                  // })
                  // TODO: remove this if the SDK is updated to emit this event
                  room.localParticipant.emit(
                    "trackUnpublished",
                    trackPublication
                  );
                  // track.stop();
                  setScreenShare(false);
                };
                track.onended = stopScreenShareRef.current;
                setScreenShare(true);
              })
              .catch("onError");
          })
          .catch((error) => {

            // Don't display an error if the user closes the screen share dialog
            if (
              error.name !== "AbortError" &&
              error.name !== "NotAllowedError"
            ) {
              //onError(error);
            }
          });
      }
    }
const switchPublishedTracks = async(room, track) => {    
    room.localParticipant.tracks.forEach(function (trackPublication) {      
      if (
        trackPublication.kind === track.kind &&
        trackPublication.priority !== "standard"
      ) {
        room.localParticipant.unpublishTrack(trackPublication.track);
      }
    });

     const showtrack = await room.localParticipant.publishTrack(track, {
      name: "screen", // Tracks can be named to easily find them later
      priority: "high", // Priority is set to high by the subscriber when the video track is rendered
    }).catch(() => {});
    return showtrack
  };