为什么 PeerJs 在发送给某人时会更改 MediaStream？

Question

我正在使用 Next.js 14、Express、socket.io、peerjs 编写视频聊天应用程序

问题是我发送一个流，而用户收到一个更改后的流。当我在关闭相机的情况下加入房间时就会发生这种情况。

如果我已经在房间里并且用户加入这个房间

useUpdateEffect(() => {
    if (!peer) return;

    socket.on(
      "user:joined",
      ({
        peerId: remotePeerId,
        muted: remoteMuted,
        visible: remoteVisible,
        name: remoteName,
        email: remoteEmail,
        image: remoteImage,
      }) => {
        toast.success(`${remoteName} joined`);
        // Calling new user
        console.log("My stream", stream?.getTracks());

        const call = peer.call(
          remotePeerId,
          stream as MediaStream, // my stream
          {
            metadata: {
              user: {
                email: data?.user?.email,
                name: data?.user?.name,
                image: data?.user?.image,
              },
              muted,
              visible,
            },
          },
        );
        call.on("stream", (remoteStream: MediaStream) => {
          console.log("User b stream", remoteStream.getTracks());
          addConnection({
            peerId: remotePeerId,
            connection: call,
            stream: remoteStream,
            muted: remoteMuted,
            visible: remoteVisible,
            name: remoteName,
            email: remoteEmail,
            image: remoteImage,
          });
        }); // On new user answer
      },
    );
    return () => {
      socket.off("user:joined");
    };
  }, [peer]);

我是新用户

useUpdateEffect(() => {
    if (!peer) return;

    peer.on("call", (call: any) => {
      const { peer: remotePeerId, metadata } = call;
      const {
        user: remoteUser,
        muted: remoteMuted,
        visible: remoteVisible,
      } = metadata;

      call.answer(stream); // * answers incoming call with my stream
      console.log("My stream", stream?.getTracks());

      call.on("stream", (remoteStream: MediaStream) => {
        console.log("User a stream", remoteStream.getTracks());
        addConnection({
          peerId: remotePeerId,
          connection: call,
          stream: remoteStream,
          muted: remoteMuted,
          visible: remoteVisible,
          name: remoteUser.name,
          image: remoteUser.image,
          email: remoteUser.email,
        });
      }); // * new stream stream
      call.on("close", () =>
        toast.success(`${remoteUser.name} has left the room`),
      );
    });
  }, [peer]);

视频跟踪第一个用户发送的	第二个用户获得的视频轨道
第一个用户获得的视频轨道	第二个用户发送的视频轨道

但我期待同样的曲目

这是git链接https://github.com/ZAKHAROV-Artem/stack-overflow-problem

Answer 1

好的。我想我找到了解决方案:)

<video
    ref={(node) => {
      if (node) node.srcObject = stream;
    }}
    autoPlay
    muted={true}
    className="aspect-video h-full w-full -scale-x-100 rounded-xl object-contain"
  />
  <audio
    ref={(node) => {
      if (node) {
        node.srcObject = stream;
      }
    }}
    autoPlay
    muted={isMe}
  />

我想这个

await navigator.mediaDevices.getUserMedia({
        audio: !muted,
        video: visible,
      });

将音频和视频绑定在一起，因此一旦我们将音频设置为enabled=false，它就会将视频设置为muted=true。

也许，可以处理它们和独立的轨道，所以如果你知道如何，请分享。谢谢！