远程用户可以在 PeerJS 中看到视频但没有音频

问题描述 投票:0回答:0

我正在尝试制作一个视频聊天网站,但视频中没有音频。 我能够实现本地用户可以连接到另一个远程用户但听不到远程连接用户的音频的视频功能。

我试图在音频标签中附加流对象,但没有成功,本地用户也只是在循环中听到自己的声音。

这是代码:

本地用户:

 useEffect(() => {
    if (isVideo) {
      const newPeer = new window.Peer();
      newPeer.on("open", (id) => {
        console.log("peer Runs", id);
        peerID = id;
        setPeer(newPeer);
      });

      const myVideo = document.createElement("video");
      const myAudio = document.createElement("audio");
      const videoGridStranger = document.getElementById("video-1");

      let mediaConnection = {};

      myVideo.muted = true;
      navigator.mediaDevices
        .getUserMedia({
          audio: true,
          video: true,
        })
        .then((stream) => {
          myVideoStream = stream;
          console.log(myVideoStream);
          addVideoStream(myVideo, stream);
        });
      return () => {
        newPeer.destroy();
      };
    }
  }, []);

呼叫远程用户:

socket.on("getVideo", (roomId) => {
            console.log("getVideo", roomId);
            if (true) {
              var getUserMedia =
                navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia;
              getUserMedia(
                { video: true, audio: false },
                function (stream) {
                  // myVideoStream = stream;
                  otherVideoStream.push(stream);
                  const video = document.createElement("video");
                  const audio = document.createElement("audio");

                  var call = peer.call(roomId, stream);
                  mediaConnection = call;
                  if (mediaConnection) {
                    mediaConnection.on("close", function () {
                      console.log("closes media connection 2");
                      // console.log(myVideoStream.getVideoTracks()[0].enabled);
                      // myVideoStream.getTracks().forEach((track) => track.stop());
                    });
                  }
                  call.on("stream", function (remoteStream) {
                    otherVideoStream.push(remoteStream);
                    console.log("asda");
                    addVideoStream(video, remoteStream, videoGridStranger);
                    // addAudioStream(audio, remoteStream, videoGridStranger);
                  });
                  // call.off("stream");
                },
                function (err) {
                  console.log("Failed to get local stream", err);
                }
              );
            }
            socket.off("getVideo");
          });

接听电话:

if (peer) {
    peer.on("call", function (call) {
      mediaConnection = call;

  navigator.mediaDevices
    .getUserMedia({
      audio: true,
      video: true,
    })
    .then((stream) => {
      //   addVideoStream(myVideo, stream);
      otherVideoStream.push(stream);
      const video = window.document.createElement("video");
      const audio = window.document.createElement("audio");

      call.answer(stream); // Answer the call with an A/V stream.
      mediaConnection.on("close", function () {
        console.log("closes media connection 1");
        // myVideoStream.getTracks().forEach((track) => {
        //   track.stop();
        // });
        // console.log((myVideoStream.getVideoTracks()[0].enabled = false));
        // peer.disconnect();
      });
      call.on("stream", function (remoteStream) {
        console.log("streaing");
        otherVideoStream.push(remoteStream);
        // video.muted = true;
        addVideoStream(video, remoteStream, videoGridStranger);
        addAudioStream(audio, remoteStream, videoGridStranger);
      });
    });
});
reactjs webrtc peerjs videochat
© www.soinside.com 2019 - 2024. All rights reserved.