如何使用javaScript流式传输远程参与者屏幕共享？

Question

这是我的本地参与者屏幕共享代码。

const videoElem = document.getElementById("video");
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");
// Options for getDisplayMedia()
var displayMediaOptions = {
  video: {
    cursor: "always",
    height: 1000,
    width: 1200
  },
  audio: false
};
// Set event listeners for the start and stop buttons
startElem.addEventListener("click", function(evt) {
  startCapture();
}, false);
stopElem.addEventListener("click", function(evt) {
  stopCapture();
}, false);
async function startCapture() {
  try {
    videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    dumpOptionsInfo();
  } catch (err) {
    console.error("Error: " + err);
  }
}

function stopCapture(evt) {
  let tracks = videoElem.srcObject.getTracks();
  tracks.forEach(track => track.stop());
  videoElem.srcObject = null;
}

function dumpOptionsInfo() {
  const videoTrack = videoElem.srcObject.getVideoTracks()[0];
  console.info("Track settings:");
  console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
  console.info("Track constraints:");
  console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
}

在上面的代码中，我仅获得本地屏幕共享。

用例：创建一个房间，有两个参与者，并且彼此共享屏幕并查看输出。

所以，任何人都知道这一点或提供指导。

Answer 1

你在这里错过了很多。首先，您需要访问 WebRTC API（如果您尝试发送和接收流）。其次，信令服务器对于建立 p2p 连接是必需的。你仅仅实现了获取用户的显示媒体，还有很多事情要做。

这是官方 Mozilla 指南。