livekit stream screen share in electron not working - Stack Overflow

admin管理员组

文章数量:1355540

How to share and stream screen with livekit in electron app? I've tried this which works on web

await localParticipant.setScreenShareEnabled(true, {
          video: {
            displaySurface: "monitor",
          },
        });

but electron doesn't prompt screen share so what I tried is I used electron's desktopCapturer to collect screen sources and show it on ui and then publish track with selected screen using livekit. But it's didn't work, here is what I've tried

get screen sources using desktopCapturer in main

async function getScreenSources() {
    return await desktopCapturer.getSources({
      types: ["window", "screen"],
      thumbnailSize: { width: 800, height: 600 },
    });
  }

used it in the renderer process

 const getSources = async () => {
      const fetchedSources = await window.ipc.getScreenSources();
      setSources(
        fetchedSources.map((src) => ({
          id: src.id,
          name: src.name,
          thumbnail: src.thumbnail.toDataURL(),
        }))
      );
    };
    getSources();

UI to get a selectedSource

 <div className="grid grid-cols-2 gap-4">
              {sources.map((source) => (
                <div
                  key={source.id}
                  className={`p-2 border ${
                    selectedSource?.id === source.id
                      ? "border-blue-500"
                      : "border-gray-300"
                  } cursor-pointer`}
                  onClick={() => {
                    if (source.name.toLowerCase() !== "entire screen") {
                      toast({
                        title: "Please share entire screen",
                      });
                      return;
                    }
                    setSelectedSource(source);
                  }}
                >
                  <img
                    src={source.thumbnail}
                    alt={source.name}
                    className="w-full h-auto"
                  />
                  <p className="text-center">{source.name}</p>
                </div>
              ))}
            </div>

share screen with the selected source id, then publish track.

  const shareScreen = async () => {
    try {
      const constraints = {
        audio: false,
        video: {
          mandatory: {
            chromeMediaSource: "desktop",
            chromeMediaSourceId: selectedSource?.id,
          },
        },
      } as MediaStreamConstraints;
      const stream = await navigator.mediaDevices.getUserMedia(constraints);

      const videoTrack = stream.getVideoTracks()[0];

      // const livekitVideoTrack = new LocalVideoTrack(videoTrack); //tried uncommenting this as well didn't work
      await localParticipant.publishTrack(videoTrack, {
        name: "screen",
        source: Track.Source.ScreenShare,
      });
    } catch (error) {
      console.error("Error starting screen share:", error);
    }
  };

本文标签： livekit stream screen share in electron not workingStack Overflow