PeerJS споделянето на екрана блокира при спиране на споделянето на екрана

Настроих споделяне на екрана чрез 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";
};

Какво трябва да включа и къде, така че потокът за споделяне на екрана да бъде премахнат и за други потребители?


person Somsubhra Das    schedule 07.08.2020    source източник


Отговори (1)


Споделянето на екрана работи само през https, трябва да добавите ssl сертификат за споделяне на екрана. Така че peerjs не може да споделя поток за споделяне на екрана през http://localhost.

person Jinoy Varghese    schedule 06.02.2021