PeerJS屏幕共享卡在屏幕共享停止

Question

我已经通过 peerJS WebRTC 设置了屏幕共享。但是，当共享屏幕的人从他的一端停止屏幕共享时，其他用户的屏幕共享就会卡住。我想为所有用户从 dom 中删除屏幕共享流视频。

这是我的 script.js 前端代码：

const socket = io("/");
const videoGrid = document.getElementById("video-grid");
var myUserId = "";

const myPeer = new Peer(undefined, {
  path: "/peerjs",
  host: "/",
  port: PORT,
});

let myVideoStream;
const myVideo = document.createElement("video");
myVideo.muted = true;

const peers = {};

navigator.mediaDevices
  .getUserMedia({
    video: true,
    audio: true,
  })
  .then((stream) => {
    myVideoStream = stream;
    console.log("test");
    addVideoStream(myVideo, stream);
    myPeer.on("call", (call) => {
      call.answer(stream);
      const video = document.createElement("video");
      call.on("stream", (userVideoStream) => {
        addVideoStream(video, userVideoStream);
      });
    });

    socket.on("user-connected", (userId) => {
      myUserId = userId;
      connectToNewUser(userId, stream);
    });
    // input value
    let text = $("input");
    // when press enter send message
    $("html").keydown(function (e) {
      if (e.which == 13 && text.val().length !== 0) {
        socket.emit("message", text.val());
        text.val("");
      }
    });
    socket.on("createMessage", (message) => {
      $("ul").append(`<li class="message"><b>user</b><br/>${message}</li>`);
      scrollToBottom();
    });
  });

socket.on("user-disconnected", (userId) => {
  if (peers[userId]) peers[userId].close();
});

myPeer.on("open", (id) => {
  socket.emit("join-room", ROOM_ID, id);
});

function connectToNewUser(userId, stream) {
  const call = myPeer.call(userId, stream);
  const video = document.createElement("video");
  call.on("stream", (userVideoStream) => {
    addVideoStream(video, userVideoStream);
  });
  call.on("close", () => {
    video.remove();
  });

  peers[userId] = call;
}

function addVideoStream(video, stream) {
  video.srcObject = stream;
  video.addEventListener("loadedmetadata", () => {
    video.play();
  });
  videoGrid.append(video);
}

const scrollToBottom = () => {
  var d = $(".main__chat_window");
  d.scrollTop(d.prop("scrollHeight"));
};

const muteUnmute = () => {
  const enabled = myVideoStream.getAudioTracks()[0].enabled;
  console.log(enabled);
  if (enabled) {
    myVideoStream.getAudioTracks()[0].enabled = false;
    setUnmuteButton();
  } else {
    setMuteButton();
    myVideoStream.getAudioTracks()[0].enabled = true;
  }
};

const playStop = () => {
  // console.log("object");
  let enabled = myVideoStream.getVideoTracks()[0].enabled;
  if (enabled) {
    myVideoStream.getVideoTracks()[0].enabled = false;
    setPlayVideo();
  } else {
    setStopVideo();
    myVideoStream.getVideoTracks()[0].enabled = true;
  }
};

const exit = () => {
  window.location.href = "/exit";
};

const copyInfo = () => {
  navigator.clipboard.writeText(window.location.href);
};

const shareScreen = async () => {
  let captureStream = null;

  try {
    captureStream = await navigator.mediaDevices.getDisplayMedia();
  } catch (err) {
    console.error("Error: " + err);
  }
  // connectToNewUser(myUserId, captureStream);
  myPeer.call(myUserId, captureStream);
};

const setMuteButton = () => {
  const html = `
    <i class="fas fa-microphone"></i>
  `;
  document.querySelector(".main__mute_button").innerHTML = html;
  document.getElementsByClassName(
    "main__mute_button"
  )[0].style.backgroundColor = "white";
  document.getElementsByClassName("main__mute_button")[0].style.color = "black";
  // document.getElementsByClassName("main__mute_button")[0].style.paddingLeft = "1.5rem !important";
  // document.getElementsByClassName("main__mute_button")[0].style.paddingRight = "1.5rem !important";
};

const setUnmuteButton = () => {
  const html = `
    <i class="unmute fas fa-microphone-slash"></i>
  `;
  document.querySelector(".main__mute_button").innerHTML = html;
  document.getElementsByClassName(
    "main__mute_button"
  )[0].style.backgroundColor = "red";
  document.getElementsByClassName("main__mute_button")[0].style.color = "white";
  // document.getElementsByClassName("main__mute_button")[0].style.paddingLeft = "0.5rem !important";
  // document.getElementsByClassName("main__mute_button")[0].style.paddingRight = "0.5rem !important";
};

const setStopVideo = () => {
  const html = `
    <i class="fas fa-video"></i>
  `;
  document.querySelector(".main__video_button").innerHTML = html;
  document.getElementsByClassName(
    "main__video_button"
  )[0].style.backgroundColor = "white";
  document.getElementsByClassName("main__video_button")[0].style.color =
    "black";
};

const setPlayVideo = () => {
  const html = `
  <i class="stop fas fa-video-slash"></i>
  `;
  document.querySelector(".main__video_button").innerHTML = html;
  document.getElementsByClassName(
    "main__video_button"
  )[0].style.backgroundColor = "red";
  document.getElementsByClassName("main__video_button")[0].style.color =
    "white";
};

我应该包括什么以及在哪里才能让其他用户也删除屏幕共享流？

Answer 1

屏幕共享只能通过 https 进行，您需要添加 ssl 证书才能进行屏幕共享。所以 peerjs 不能通过 http://localhost 共享屏幕共享流。