在简单的对等方中添加多个视频和音频流

问题描述

我正在尝试构建一个webRTC视频聊天应用程序，该应用程序还可以选择将本地视频文件加载到浏览器，然后将其流式传输到同位体。 这是网状拓扑中的小组视频聊天，因此，对于聊天室中的n个用户，每个用户都有一个大小为n-1个对等体的数组。

到目前为止，我已经设法使用getUserMedia访问的网络摄像头和麦克风流在同级之间建立了所有连接。现在，我正在尝试添加本地视频文件。我当前的代码等待将视频文件添加到浏览器，然后使用captureStream捕获流，然后迭代所有对等点的数组，并使用addStream将新流添加到每个连接。但是，由于on('stream')事件不会触发，因此我不确定如何在接收方处理新添加的流。

这是我的客户端代码现在的样子。

const socket = io.connect("/");
let myPeers = [];

const videoGrid = document.getElementById("video-grid");
const myVideo = document.createElement("video");
myVideo.muted = true;

navigator.mediaDevices
  .getUserMedia({
    video: true,audio: true,})
  .then((stream) => {
    addVideoStream(myVideo,stream);
    main(stream);
  });

function main(stream) {
  //On join,tell the server and all the users in the room tha
  socket.emit("join-room",ROOM_ID);

  //When received info on all users already in a room
  socket.on("all-users",(users) => {
    //initialize new array for rendering purposes
    const peers = [];
    users.forEach((userId) => {
      const peer = createPeer(userId,socket.id,stream);
      //Push into the array of current user's peers
      myPeers.push({ peerId: userId,peer });
      peers.push(peer);
    });
  });

  socket.on("user-joined",(payload) => {
    const item = myPeers.find((p) => p.peerId == payload.callerId);
    if (!item) {
      const peer = addPeer(payload.signal,payload.callerId,stream);
      myPeers.push({
        peerId: payload.callerId,peer,});
    }
  });

  socket.on("received-returned-signal",(payload) => {
    const item = myPeers.find((p) => p.peerId === payload.id);
    item.peer.signal(payload.signal);
  });

  function addPeer(incomingSignal,callerId,stream) {
    const peer = new SimplePeer({
      initiator: false,trickle: false,streams: [stream],});
    //The signal event is going to be fired when current user is getting and offer
    peer.on("signal",(signal) => {
      //Let the caller know our signal
      socket.emit("return-signal",{ signal,callerId });
    });

    peer.on("stream",(stream) => {
      const video = document.createElement("video");
      addVideoStream(video,stream);
    });

    //Signal back - accept the offer
    peer.signal(incomingSignal);
    return peer;
  }

  function createPeer(userToSignal,myId,stream) {
    const peer = new SimplePeer({
      initiator: true,});
    //The signal event is going to fire instantly,because current user is initiator
    peer.on("signal",(signal) => {
      socket.emit("sending-signal",{ userToSignal,callerId: myId,signal });
    });
    peer.on("stream",stream);
    });
    return peer;
  }
}
function addVideoStream(video,stream) {
  if ("srcObject" in video) {
    video.srcObject = stream;
  } else {
    video.src = window.URL.createObjectURL(stream);
  }
  videoGrid.append(video);
  video.play();
}

// Whenever new video is added to the website,add it to each peer's stream. This does not work yet,needs to be fixed.

let localVideoInput = document.querySelector("#video-input");
localVideoInput.addEventListener("added-video",() => {
  localVideo = document.querySelector("#local-video");
  stream = localVideo.captureStream();
  myPeers.forEach((peer) => {
    peer["peer"].addStream(stream);
  });
  socket.emit("added-video",ROOM_ID);
});

socket.on("added-video",() => {
  myPeers.forEach((peer) => {
    peer["peer"].on("stream",() => {
      console.log("received stream");
    });
  });
});

有人建议我如何在接收方检索新的流以及旧的流吗？ 谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）