Twilio可编程视频屏幕共享不起作用

时间:2020-08-06 19:11:33

标签: javascript reactjs twilio twilio-video

我正在捕获用户的屏幕,并将该轨迹发布到房间的本地参与者对象,但是供稿继续显示用户的摄像机。如果我将房间对象记录到控制台,它不会显示多条轨道。在尝试发布用户的屏幕轨迹之前,是否需要取消发布用户的摄像机轨迹?我提供了共享屏幕方法,供您查看。预先感谢您提供的任何帮助!

我已经遍历了这些参考文献,并且代码似乎与此处编写的代码非常相似,但遗憾的是它仍然无法正常工作

-https://www.twilio.com/blog/screen-sharing-javascript-twilio-programmable-video

-https://www.twilio.com/blog/2018/01/screen-sharing-twilio-video.html

export default function useScreenShareToggle() {
  const { room, onError } = useVideoContext();
  const [isSharing, setIsSharing] = useState(false);
  const stopScreenShareRef = useRef<() => void>(null!);

  const shareScreen = useCallback(() => {
    navigator.mediaDevices
      .getDisplayMedia({
        audio: false,
        video: {
          frameRate: 10,
          height: 1080,
          width: 1920,
        },
      })
      .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, {
            name: 'screen', // Tracks can be named to easily find them later
            priority: 'low', // Priority is set to high by the subscriber when the video track is 
rendered
          } as MediaStreamTrackPublishOptions)
          .then(trackPublication => {
            stopScreenShareRef.current = () => {
              room.localParticipant.unpublishTrack(track);
              // TODO: remove this if the SDK is updated to emit this event
              room.localParticipant.emit('trackUnpublished', trackPublication);
              track.stop();
              setIsSharing(false);
            };

            track.onended = stopScreenShareRef.current;
            setIsSharing(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);
        }
      });
  }, [room, onError]);

  const toggleScreenShare = useCallback(() => {
    !isSharing ? shareScreen() : stopScreenShareRef.current();
  }, [isSharing, shareScreen, stopScreenShareRef]);

  return [isSharing, toggleScreenShare] as const;
}

P.s。我没有编写此代码,因此可能存在一些我忽略的细微行为问题。如果某些事情似乎是明显的疏忽,那么我只是有机会错过了,而且这不是故意的。

0 个答案:

没有答案